#hero {
  position: relative;
	width: 100%;
	height: auto;
	background: #ddd;
	padding: 2rem 0rem;
/* 	background: #006837; */
/* 	background-image: url('https://info.churchillmortgage.com/hubfs/images/banners/banner-background-green-town.png'); */
	background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  overflow: hidden;
  z-index: 0;
}
	
.hero-container{
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#hero h1{
/*   color: #fff; */
  font-weight: 800;
  margin: 0;
/*   padding: 0 1rem; */
  font-size: 2.5rem;
}

#hero .promo{
  display: inline-block;
  color: #35b151;
  font-size: 1rem;
  font-weight: 700;
  background-color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 99px;
  text-transform: uppercase;
}

.hero-phone{
  color: #fff;
}

.hero-phone strong{
  color: #35b151;
}

.hero-phone a{
  font-size: 1.5rem;
  color: #fff !important;
  position: relative;
  bottom: 0;
  transition: all 0.2s ease;
}

.hero-phone a:hover{
  font-size: 1.5rem;
  bottom: 2px;
}

.hero-phone a svg{
  width: 1.25rem;
  height: auto;
/*   margin-right: 1rem; */
}

#hero-callout{
  height: auto;
  background-color: #fff;
  border-radius: 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 0 1rem;
/*   z-index: 10; */
  -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.2);
}

.flood{
  font-family: flood-std,sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* For devices smaller than 550px */
@media (max-width: 550px) {
  
  .hero-phone{
    text-align: center;
  }

  .hero-container{
/*     text-align: center; */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }

  #hero-callout{
    margin-top: 1rem;
/*     max-width: 100%: */
  }
  
  #hero h1{
    font-size: 2rem;
    text-align: center;
  }

  #hero .promo{
    display: block;
    width: max-content;
    text-align: center;
    margin: 1rem auto;
  }
}


#pop-up-form-overlay{
  position: absolute;
  top: 0;
  left 0;
  width: 100%;
  height: 100%;
/*   background-color: rgba(0,0,0,0.3); */
  z-index: -1;
/*   display: none; */
}

#connect-with-an-expert{
}

/* Icon Radio Styles */
fieldset.radio-icons{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.radio_icon_wrapper{
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  margin: 0.5em;
}

.radio_label_icon{
  display: block;
  width: 100px;
  height: 100px;
/*   padding: 1em; */
  border: 2px solid #ebf2f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.25s ease;
}

input[type="radio"]:checked + label.radio_label_icon {
  border: 2px solid #35b151;
  border-radius: 4px;
}

.radio_label_icon img{
  width: 50px; height: auto;
  margin: 0.5rem 1rem;
}

/* end icon radio */

.radio input, .radio label{
  display: inline-block;
  
}

.radio input+label{
color: #999;
}

.radio input:checked+label{
color: #47a247;
}

.red {
  color: red;
}

.invalid-error{
  color: red;
  font-size: 0.65rem;
  margin: 0;
  padding: 0;
  display: none;
}

.input-message{

  font-size: 0.65rem;
  margin: 0;
  padding: 0;

}

#pop-up-form{
  
  z-index: 10;
  background-color: #fff;
/*   position: absolute; */
/*   top: 3rem; */
  
  border-radius: 4px;
/*   padding: 0 1rem; */

}

#form-wrapper {
  width: 100%;
  height: auto;
/*   min-height: 250px; */
  box-sizing: border-box;
  z-index: 10;
  background-color: #fff;
  border-radius: 4px;
  opacity: 1;
  transition: all 0.5s ease;
}

#form-wrapper .input-grp {
  padding: 0.5rem 0;
}

#form-wrapper .input-grp(:last-child) {
  padding: 0;
}
#form_btns{
  display: flex;
/*   justify-content: flex-end; */
  justify-content: center;
  margin-bottom: 1rem;
}

/* this resets the input font size to prevent zooming on mobile */
@media screen and (600px) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

#nextBtn {
  font-size: 1.25rem;
  padding: 0.5em 1em;
  margin: 0.5rem 0 0.5rem 1rem;
  font-weight: 700;
  background-color: #47a247;
  color: #fff;
  border: none;
  border-radius: 4px;
  transition: all 0.25s ease;
  outline: none;
  position: relative;
  bottom: 0;
}

#nextBtn:hover{
  background-color: #358735;
}

#prevBtn {
  font-size: 1rem;
  padding: 0.75em 1em;
  margin: 0.5rem 0;
  font-weight: 700;
/*   background-color: #ebf2f5; */
  background-color: rgba(0, 0, 0, 0);
  color: #212121;
  text-decoration: underline;
  border: none;
  border-radius: 4px;
  transition: all 0.25s ease;
  outline: none;
  position: relative;
  bottom: 0;
}

#prevBtn:hover,
#nextBtn:hover {
  bottom: 2px;
}

#step-indicator {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 1rem auto;
/*   position: relative; */
/*   top: 1rem; */
  
}

.step {
/*   width: 25px; */
  width: 100%;
  height: 6px;
  text-align: center;
  color: #fff;
/*   border-radius: 99px; */
  background-color: #ccc;
/*   position: relative; */
/*   top: -5px; */
  transition: all 0.5s ease;
}

.step.active {
  background-color: #47a247;
  color: #fff;
  font-weight: 800;
  transform: scale(1);
/*   border-radius: 99px; */
  
}

/* Mark input boxes that gets an error on validation: */
.invalid,
input.invalid,
select.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

.tab-title{
  text-align: center;
/*   margin: 0; */
}

#ty-tab {
  display: none;
  text-align: center;
}

.form-soc-proof{
  opacity: 0.45;
  margin-bottom: 1rem;
}

.form-disclaimer{
  font-size: 0.65em;

  max-height: 80px;
  overflow: scroll;

  border: 1px solid #f4f9f9;
  margin: 2em;
  padding: 0.5em;
  }

/* ANIMATIONS */

.tab-swap2 {
  animation-name: panelForward;
  animation-duration: 0.5s;
}

@keyframes panelForward {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
  60% {
    transform: translate(100px);
    opacity: 0;
  }
  100% {
    transform: translate(-100px);
    transform: scale(1);
    opacity: 1;
  }
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-9-22 14:34:50
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}