/* HERO SECTION */
.submitted-message {color:#433358; 
  font-weight:400; padding-left:42px;
  font-size:0.875rem; line-height:1rem; overflow:hidden;
  border-radius: 8px; position:relative; display: inline-flex; align-items: center; }

.submitted-message span { display:flex;  background-color:#F5ECFE; padding: 20px 24px 20px 16px; text-align:left; }

.submitted-message:before {
  content: ''; 
  position:absolute;
  background: url('https://www.companionenergy.com/hubfs/coming-soon/check%20icon.png') #39076e;
  width:42px; height:100%; left:0; top:0; 
  text-align:center; vertical-align: middle; background-repeat: no-repeat; background-position:center;
}
.coming-soon__hero {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
/*   height: calc(100vw * 900 / 1440); */
  height:100vh; 
  position: relative;
}

/* HERO CONTENT POSITION */
.coming-soon__hero-content {
  position: absolute;
/*   bottom: 23%;
  left: 0;
  right: 0;*/
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  margin-top:180px;
  text-align: center; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TEXT STYLING */
.coming-soon__hero .hero-text {
  text-align: center;
  max-width: 560px; 
  margin: 0 auto;
}

.coming-soon__hero .hero-text h1 {
  color: #FFFFFF;
  margin: 20px 0;
  font-size: 3rem;
  line-height: 3.5rem;
}

.coming-soon__hero .hero-text p {
  color: #fff;
  font-size: 1rem;
  margin: 0 auto;
}

/* FORM WRAPPER */
.coming-soon__form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px auto;
  width: 100%;
}

/* FORM FIX */
.coming-soon__form form .hs_email ul.no-list.hs-error-msgs.inputs-list:nth-of-type(2),
.coming-soon__form form .hs_email ul.no-list.hs-error-msgs.inputs-list:nth-of-type(3) {
  top: calc(100% + 3px); padding-top:0px;
}
.coming-soon__form form {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 16px;
  padding: 5px;
  max-width: 420px;
  /* width: 100%; */
}

/* Email input field */
.coming-soon__form form .hs_email,
.coming-soon__form form .hs_email input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
}

.coming-soon__form form input[type="email"] {
  padding: 10px 17px;
  border: none;
  outline: none;
  font-size: 0.875rem;
  border-radius: 16px 0 0 16px;
  color: #726682;
/*   width: 100%; */
}

.email-form {border:1px solid transparent;}
.email-form:has(input.hs-input.error),
.email-form:has(input.hs-input.invalid){
border: 1px solid #DF5233 !important;
  border-radius:16px;
}
/* Button */
.coming-soon__form form .hs_submit,
.coming-soon__form form input.hs-button.primary.large {
  flex: 0 0 auto;
}

.coming-soon__form form input.hs-button.primary.large {
  background-color: #5F0BB7 !important;
  -webkit-appearance: none;
  background-image: none !important;
  color: #FFFFFF;
  border: none;
  padding: 14px 17px;
  font-size: 0.8125rem;
  border-radius: 16px 16px 16px 16px;
  cursor: pointer;
  font-weight: 600;
}

/* REMOVE HUBSPOT DEFAULT TITLE & ERRORS */
.coming-soon__form .email-form h3 {
  display: none;
}
.coming-soon__form form > .hs_error_rollup {
  display: none;
}
.hs-form .hs-error input, .hs-form .hs-input.error {
/*   border: 1px solid #DF5233 !important; */
}
.coming-soon__form ul.no-list.hs-error-msgs.inputs-list {
  position: absolute;
  padding: 5px 0 5px 3px;
  font-size: 0.875rem;
  color: #DF5233;
  list-style: none; padding-left:0;
}

@media (min-width: 1024px) {
  .coming-soon__form form {
    width:350px !important;    
  }
  .coming-soon__form form .hs_email input[type="email"] {
    Flex: 1 1 0 !important;
    width: 84%;
  }
}

/* RESPONSIVE — KEEP DESKTOP LOOK */
@media (max-width: 767px) {
  
  .coming-soon__hero-content { width:100%; margin-top:130px;}
  .coming-soon__form {margin:20px auto;}
  .coming-soon__hero-content p br {display:none;}
  .coming-soon__hero .hero-text h1 {font-size:2rem; line-height:2.5rem;}
  .coming-soon__hero .hero-text p  {font-size:14px; line-height:20px;}
  .coming-soon__form form { flex-direction: row; margin: 0 auto;}
  .coming-soon__form form input[type="email"] {font-size: 0.875; padding: 10px; }
  .coming-soon__form form input.hs-button.primary.large { font-size: 0.812rem; line-height:1rem; padding: 14px 17px; }
}

@supports (-webkit-touch-callout: none) {
  .coming-soon__form form input[type="email"] {
    font-size: 16px;}
}


@media (max-width: 1024px) {
   .coming-soon__hero-content {width:100%;}
}

@media (min-width: 1024px) {
  .coming-soon__hero .hero-text {width:560px;}
}

@media (max-width: 480px) {
   .coming-soon__form .email-form {width: 90%;}
  .coming-soon__form form input[type="email"] { width:85%; }
  .coming-soon__form form {
    width:auto; max-width:unset; }
}

@media (max-width: 360px) {
  .coming-soon__hero .hero-text h1 {font-size:1.8rem; line-height: 2.3rem;
  margin: 10px 0;}
}

@media screen and (max-height: 600px) { 
  .coming-soon__hero-content {margin-top: 0px;}
}

/* @media screen and (max-height: 900px)  and (min-width: 1024px) { */
  @media screen and (max-height: 900px) and (min-width: 1024px) {
  .coming-soon__hero-content {margin-top:100px;}
  .coming-soon__hero .hero-text h1 { font-size:1.9rem; line-height: 2.4rem; margin: 10px 0;    }
  .coming-soon__form form input.hs-button.primary.large {padding:10px 17px;}
  .coming-soon__form form input[type="email"] {padding:6px 17px;}
  .coming-soon__hero .hero-text p {font-size:0.9rem;}
  .coming-soon__form {margin:15px auto 10px;}
  .coming-soon__form form {max-width:300px!important;}
  .coming-soon__hero .hero-text {max-width: 500px;}
}

@media only screen and (max-device-width: 932px) and (orientation:landscape) {
  .coming-soon__hero .hero-text p br {display:none;}
  .coming-soon__hero-content {margin-top:100px;}
  .coming-soon__hero .hero-text h1 { font-size:1.9rem; line-height: 2.4rem; margin: 10px 0;    }
  .coming-soon__form form input.hs-button.primary.large {padding:10px 17px;}
  .coming-soon__form form input[type="email"] {padding:6px 17px;}
  .coming-soon__hero .hero-text p {font-size:0.9rem;}
  .coming-soon__form {margin:15px auto 10px;}
  .coming-soon__form form {max-width:300px!important;}
  .coming-soon__hero .hero-text {max-width: 460px;}
  .coming-soon__hero-content {margin-top: 0px;}
}