/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/
* {margin: 0; padding: 0; font-family:arial;}

html {
  height: 100%;
  /*Image only BG fallback*/

  /*background = gradient + image pattern combo*/
  background: 
    linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}

body {
  display
  font-family: montserrat, arial, verdana;
}
.hero-landright-new { width: 100%; display: inline-block; }
/*form styles*/
#msform {
  width: 100%;
  margin: 50px auto;
  text-align: center;
  display: inline-block;
/*   position: relative; */
}
#msform fieldset {
  background: #fff;
  border: 0 none;
  border-radius: 3px;
  padding: 40px 30px;
  box-sizing: border-box;
  width: 100%;
/*   margin: 0 10%; */

  /*stacking fieldsets above each other*/
  position: relative;
}

#msform fieldset:before {
    content: '';
    border-top: 10px solid #009959;
    position: absolute;
    bottom: 100%;
    left: 40px;
    right: 40px;
}

p.error-msg {
    float: left;
    width: 100%;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-align: left;
}

input.hs-input.invalid.error {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
a.submit-btn {
    width: auto;
    color: #fff;
    background-color: #009959;
    height: auto;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    appearance: none;
    border-width: 2px;
    border-style: solid;
    border-color: #009959;
    border-image: initial;
    border-radius: 50px;
    font-size: 13px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
}
.submitted-message {
    text-align: center;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}
/*inputs*/
#msform input, #msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}
/*buttons*/
#msform .action-button {
  width: 100px;
  background: #d8d8d8 ;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 50px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #009959;
}
/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #fff;
  margin-bottom: 20px;
  display: none;
}
/*progressbar*/
#progressbar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
  background: #27AE60;
  color: white;
}

input, button, textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { margin-bottom: 15px; background-color: rgba(255,255,255,0.1) !important; color: #fff !important; border: none !important; }
#msform input, #msform textarea { margin-bottom: 15px; background-color: rgba(255,255,255,0.1) !important; color: #fff !important; border: none !important; }
#msform input::placeholder { font-size: 16px; font-weight: 400; color: #fff !important; }
select option { color: #000; }



.hero-landright-new #msform fieldset{width:43%;margin:50px auto 100px !important; position:relative !important; transition:all ease-in-out .2s; }
.hero-landright-new #progressbar li{display:none;}
.hero-landright-new #progressbar .progress {width: 100%;position: absolute;top: -5px;display: block;height: 8px;background-color: #e2e2e2;left: 0;z-index: 1}
.hero-landright-new #progressbar .progress .progress-pointer {width:0%;transition:all ease-in-out .9s;position:absolute; display:block; height:8px; background-color:#27AE60;}
.hero-landright-new #progressbar li:before{width:100%;background-color:#e6e6e6;border-radius:0px; position:relative; font-size:0px; height:11px; bottom:0px;}
.hero-landright-new #progressbar li.active:before{background-color:#e6e6e6; z-index:-1;}
.hero-landright-new #progressbar li:nth-child(1){display:none;}
.hero-landright-new #progressbar li.active:nth-child(1):before{background-color: #27AE60;}
.hero-landright-new #progressbar{width:43%; overflow:inherit; margin:auto; bottom:-55px; position:relative; z-index:1;}
.hero-landright-new #progressbar li:after{display:block; position:absolute;transition:all ease-in-out .9s; width:0%; top:0; left:0; height:70%; background-color: #27AE60; z-index:1;}
#progressbar .process-per{position: absolute;transition:all ease-in-out .9s; width: 55px; top: -54px; height: 40px; background-color: #27AE60; color: #fff; display: flex; border-radius:5px; justify-content: center; align-items: center;}
#progressbar .process-per:after{width: 20px; height: 20px; top: 23px; z-index: -1; position: absolute; content: ''; display: block; background-color: #27AE60; transform: rotate( 45deg );}
#progressbar li.active:after{width:100%;}
#msform .action-button{background-color: #d8d8d8  !important;padding:15px 10px;}
#msform .fs-title, #msform .fs-subtitle{color:#000;}
.mortgage_sub_field_buttons:hover{opacity:.8;}
#msform .action-button:not(.previous){display:none; margin-bottom:50px; text-decoration:none;}
.hero-landright-new .mortgage_sub_field_buttons{padding: 20px; border-radius: 4px; background: #0073aa; width: 80%; margin: 5px auto 5px; color: #fff;}
.hero-landright-new .mortgage_sub_field_buttons input[type="radio"]{display:none;}
.hero-landright-new .mortgage_sub_field_buttons{position:relative;}
.hero-landright-new .mortgage_sub_field_buttons:after{display:none; position:absolute; width:14px; height:14px; right:20px; top: calc(50% - 9px); content:''; border-radius:20px; background-color:#0073aa; border:solid 3px #c0c0c0;}
.hero-landright-new .mortgage_sub_field_buttons.chacked:after{display:block;}
.hero-landright-new .mortgage_sub_field_buttons.chacked{background-color:#ddd; color:#000;}
.hero-landright-new fieldset select{padding: 15px 20px;border-radius: 4px;width: 80%;background-color: #f3f3f3 !important;color: #000 !important;border: solid 1px #888 !important;}
.hero-landright-new .last-step .fs-title, .last-step .fs-subtitle{color:#000 !important;display:block;}
.hero-landright-new #msform .last-step input:not(.action-button), #msform .last-step textarea {display:flex; background-color:#f3f3f3 !important; color:#000 !important;}
.hero-landright-new #msform .last-step input::placeholder, #msform .last-step textarea::placeholder{font-size:16px !important;color:#000 !important;}
.hero-landright-new #msform .previous.action-button{position:absolute; color:#000 !important; bottom:-10px; width:100%;left:-5px;  border-radius:0;}
.hero-landright-new #msform .previous.action-button:hover, #msform .previous.action-button:focus{border:none !important; box-shadow:none !important;}
.hero-landright-new #msform .hs-input.is-placeholder{margin-bottom:50px !important;}
.hero-landright-new #msform fieldset select{outline:none;}
.hero-landright-new #msform .last-step input::placeholder{font-size:14px !important;}
.hero-landright-new #msform .second-step{padding-bottom:50px;}
.hero-landright-new #msform .last-step{padding-bottom:100px;}
.hero-landright-new p.error-msg{padding:5px 10px 20px 10px  !important;}
.hero-landright-new #msform .submit-btn{bottom: 46px;position: padding:12px 10px; position:absolute;width: 100%;left: 0;text-transform: capitalize;border-radius: 0;padding: 6px !important;box-sizing: border-box;text-decoration: none;}
.hero-landright-new #msform .submit-btn:hover , #msform .previous.action-button:hover{opacity:.8;}
.hero-landright-new .hero-landright-new fieldset h2{margin-bottom:20px; font-size:24px; color:#000;}
.hero-landright-new  #msform fieldset:before{display:none;}
.hero-landright-new #msform h2{ font-size:24px; color:#000; margin-bottom:24px;}
.hero-landright-new .mortgage_sub_field_buttons:last-child{margin-bottom:40px;}

body #msform input.next.action-button {
    position: absolute;
    color: #fff !important;
    bottom: -10px;
    width: 100% !important;
    left: -5px;
    background: #27ae60 !important;
    border-radius: 0 !important;
}
body #msform .third-step { height: 300px; }
body #msform .third-step input.next.action-button { display: block; }
body #msform .third-step input.next.action-button:hover { box-shadow: none; }

@media(max-width: 767px){
  /*#msform { width: 100%; padding: 0 40px;}*/
  #msform fieldset { width: 100%; margin: 0 auto; }
 
  #msform fieldset{width:90%;}
  #progressbar , .mortgage_sub_field_buttons, #msform fieldset select{width:90%;}
  .hero-landright-new #msform fieldset { width: 100%; }
  .hero-landright-new #progressbar { width: 100%; }
  
}

@media(max-width: 481px){
  #msform { padding: 0 30px !important; } 
}