body { background-color: #ffffff; padding: 0; margin: 0; }

.container { height: 100dvh; width: 100%; overflow: hidden; background-size: cover; background-position: center; position: relative; }
.container { animation: 1s fader ease-in-out 0s forwards; opacity: 0; }

.bg-image { position: absolute; left: 0; top: 0; width: 100%; height: 100dvh; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; }
.bg-image { animation: 3.5s bg ease-in-out 0s forwards; }

.bg-image.bg-video .video-container,
.bg-image.bg-video video { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.bg-image.bg-video video { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.header {
   position: absolute;
   top: 160px;
   left: 100px;
   z-index: 1;
   background-color: var(--hlc-midnight-blue);
   padding: 22px 40px 40px 40px;
   width: 90%;
   max-width: 395px;
   opacity: 0;
   box-sizing: border-box;
}

.header { animation: 1s fader ease-in-out 1s forwards; }

.header img.logo {
   /*height: 126px;
   position: absolute;
   top: -63px;
   left: 40px;*/
   width: 100%;
   margin-left: -18px;
}

.header h1 {
   font-family: 'GT Ultra', sans-serif;
   font-size: 60px;
   font-weight: 400;
   color: #ffffff;
   margin: 0.5em 0 0.5em 0;
   line-height: 1em;
}

.header p { font-family: var(--hlc-gt-ultra); font-size: 36px; font-weight: 400; color: var(--hl-light-green); line-height: 1.2em; }
.header > :last-child { margin-bottom: 0; }



a.enter-here { display: flex; flex-direction: row; gap: 10px; align-items: center; position: absolute; top: 240px; right: 0; z-index: 2; height: 53px; padding: 0 0 0 10px; background-color: #ffffff; color: var(--hlc-midnight-blue); border: none; opacity: 0; }
a.enter-here label { font-family: var(--hlc-gt-ultra); font-size: 16px; font-weight: 400; background-color: inherit; color: inherit; padding: 10px; }
a.enter-here .arrow { width: 53px; height: 53px; position: relative; }
a.enter-here .arrow:after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: 17px; background-position: center; background-repeat: no-repeat; }
a.enter-here { animation: 1s btn-in ease-in-out 2s forwards; }

a.enter-here:hover { background-color: var(--hlc-midnight-blue); color: #ffffff; }

/*** Animations ***/

@keyframes fader {
   0% { opacity: 0 }
   100% { opacity: 1 }
}

@keyframes btn-in {
   0% { opacity: 0; right: -50px; }
   100% { opacity: 1; right: 0 }
} 

@keyframes bg {
   0% { transform: scale(1.2) }
   100% { transform: scale(1) }
} 


/*** Responsive ***/

@media (max-width: 800px) {
   .header { top: 80px; left: 50px; width: auto; max-width: 340px; }
   .header h1 { font-size: 50px; }
}

@media (max-width: 590px) {
   .header { left: 30px; max-width: calc(100vw - 100px); }

   a.enter-here { top: 460px; }
}

@media (max-width: 400px) {
   .header  { max-width: calc(100vw - 60px); }
   .header h1 { font-size: 38px; line-height: 1.1em; }
}