#hero {color:#FFF;}
#hero .inside {max-width: 100%;border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; min-height: 700px;overflow: hidden; position: relative; aspect-ratio: 5 / 3; background: #000000;}
#hero .two-columns { width: 100%; }
#hero video {position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover;}
#hero .p-60 {padding-bottom: 100px;}
#hero.short .inside {aspect-ratio: 2 / 0.95}
#hero .bg-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

#hero .variation-centered .display-lg {font-size: 50px;}

#hero .background-mask {position: absolute; background: #000; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;}
#hero .content-wrap {position: relative; z-index: 2; max-width: 100%;}


#hero .two-columns .display-lg {font-size: 52px; text-transform: uppercase; line-height: 1.1;}
#hero .btn {padding-left: 20px; padding-right: 20px; margin-bottom: 10px;}
#hero p {color: #f2f0e6;}
#hero.centered p {max-width: 900px; text-align: center;}


.welcome {position: relative; margin-bottom: -100px; z-index: 0; }
.welcome .robot {position: absolute; z-index: 2; width: 150px; right: 20%; transform: translate(-50%); bottom: 37px;}
.welcome .bg {position: absolute; width: 100%; height: 100%; left: 0; transform: scale(0.9); top: 0; background: #614503; overflow: hidden; }
.welcome .bg img {margin-top: -350px; opacity: 0.7;  }
.welcome .mask {position: relative; z-index: 1;}


.hero-date { padding: 7px 24px; font-size: 20px; }


.single-startup #hero .img-placeholder {width:100%; max-width: 240px; height: auto; aspect-ratio:3 / 2; background-color:#FFF; margin:0 auto; border-radius: 20px; margin-bottom: 20px; display: flex; align-items: center}
.single-startup #hero .img-placeholder img {max-height: 80%; max-width: 80%; width: auto; margin: 0 auto; display: block; object-fit: contain}
.single-startup #hero p {text-transform: uppercase; letter-spacing: 1.5px; font-weight: 900; font-size: 19px;}



@media only screen and (max-width:768px) {
  #hero .inside { display: flex; align-items: flex-end; padding-left: 0; min-height: 50vh; aspect-ratio: unset; padding-top: 100px;}
  .hero-date { padding: 7px 15px; font-size: 14px; }
  #hero .two-columns .display-lg { font-size: 36px; }
  #hero .p-45 { padding: 20px; }
  #hero .variation-centered .display-lg { font-size: 32px; line-height: 1.1;}

  #hero.short .inside {aspect-ratio: auto}
  #hero .inside {width: 100%; justify-content: center}

  .welcome .mask {width: auto; height: auto;}
  .welcome .bg img {margin-top: -100px}
  .welcome {margin-bottom: -40px;}
  .welcome .robot {width: 100px; top: -80px}

  .single-startup #hero .inside {min-height: 40vh;}
}