<style>
/*custom font*/

#left-area ul.products {
    padding: 0!important;
    line-height: 1.7!important;
    list-style: none!important;
}

@import url(https://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
      margin: 0;
      padding: 0;
}

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 {
      font-family: montserrat, arial, verdana;
}
.hidden{display:none!important;}

/*form styles*/

#simulator .stepstitle .container.contauto {
      text-align: center;
      padding-top: 28px;
}

.stepstitle p {
      font-weight: 500;
      font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
      font-size: 19px;
}

.stepstitle h2 {
      font-size: 50px;
      color: #4386a6;
      line-height: 1.2;
      font-weight: 200;
}

.stepstitle h2 strong {
      font-weight: bold;
}

#apply-form {
      max-width: 1100px;
      margin: 30px auto;
      text-align: center;
      position: relative;
}

#simulator .cont .cstmcheck_div.active {
      background: #e6eff3;
      border-color: #4386a6;
}

#apply-form fieldset {
      background: white;
      border: 0 none;
      border-radius: 3px;
      /*box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);*/
      padding: 20px 30px;
      box-sizing: border-box;
      width: 80%;
      margin: 0 10%;
      /*stacking fieldsets above each other*/
      position: relative;
}


/*Hide all except first fieldset*/


/*#apply-form fieldset:not(:first-of-type) {
                        display: none;
                        }*/


/*inputs*/

#apply-form input,
#apply-form 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*/

#apply-form .action-button {
      width: auto;
      background: #FFB81D;
      font-weight: bold;
      color: white;
      border: 0 none;
      border-radius: 1px;
      cursor: pointer;
      padding: 15px 45px;
      margin: 50px 5px 10px;
      font-size: 19px;
      font-weight: normal;
}

.frm-btm {
      font-size: 11px;
}

#apply-form .action-button:hover,
#apply-form .action-button:focus {
      box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
      font-size: 15px;
      text-transform: uppercase;
      color: #2C3E50;
      margin-bottom: 10px;
}

.fs-subtitle {
      font-weight: normal;
      font-size: 13px;
      color: #666;
      margin-bottom: 20px;
}

.step4_blk_widgets {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      max-width: 300px;
      margin: auto;
}

.step4_blk_sec span.lbl {
      display: block;
      font-weight: 400;
      margin-top: 15px;
      color: #4386a6;
      font-size: 15px;
      font-family: 'Raleway', Helvetica, Arial, Lucida, sans-serif;
}

#simulator .step4_blk_sec.cont input:checked~.checkmark:after {
      top: 18px;
      left: 27px;
      margin-left: 0;
      border: 0;
      width: 15px;
      height: 15px;
}

.step4_blk_sec span.checkmark:before {
      content: "" !important;
      position: absolute;
      width: 8px;
      height: 8px;
      top: 7px;
      background: #d2d2d2;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 30px;
}

.step4_blk_sec span.checkmark {
      position: relative;
}


/*progressbar*/

#progressbar,
#progressbar-five {
      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: 25%;
      float: left;
      position: relative;
}

#progressbar-five li {
      list-style-type: none;
      color: white;
      text-transform: uppercase;
      font-size: 9px;
      width: 20%;
      float: left;
      position: relative;
}

#progressbar li:before,
#progressbar-five 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,
#progressbar-five 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,
#progressbar-five 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,
#progressbar-five li.active:before,
#progressbar-five li.active:after {
      background: #27AE60;
      color: white;
}*/

#simulator .checkmark {
      height: auto;
      background: none;
      position: absolute;
      bottom: 0;
      width: 100% !important;
}

#simulator .cont .cstmcheck_div {
      border: 1px solid #d2d2d2;
      padding: 10px 0px;
      min-height: 170px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
}

#simulator .input-fld .et_pb_column.step3_input_blk {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
}

#simulator #apply-form .all-btn.step4_sec {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      width: 100%;
}

#apply-form .step3_input input {
      background: #eeeeee;
      border-bottom: 0 !important;
      border-radius: 0;
      margin-top: 15px;
      color: #000;
      margin-bottom: 7px;
      text-align: center;
}

.step3_input {
      margin: auto;
      max-width: 250px;
}

#simulator #apply-form .input-fld .et_pb_column label {
      color: #000;
      margin-right: 0px;
}

.step4_blks {
      padding-top: 60px;
}

.step4_blks img.image-div {
      width: 140px;
}

.step4_blk_widgets:before {
      background: #d2d2d2;
      height: 3px;
      width: 160px;
      content: "";
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      margin-top: 10px;
}

.step4_blk_widgets {
      position: relative;
}

#loadingProgressG {
      display: none;
}

#kit-blocs{
      display: flex;
      justify-content: center;
      align-items: center;
}

@media (max-width:767px) {
      #progressbar,
      #progressbar-five {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
      }
      #progressbar,
      #progressbar-five {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0px;
      }
      #apply-form {
            margin-top: 40px;
      }
      .stepstitle h2 {
            font-size: 30px;
      }
}

@media (max-width:480px) {
      #simulator #apply-form .cont {
            width: 100%;
      }
      #simulator .step4_blk_sec.cont input:checked~.checkmark:after {
            top: 5px;
            left: 23px;
            bottom: auto !important;
      }
      #simulator .checkmark {
            width: 90px;
            height: 90px;
      }
      #simulator .cont .cstmcheck_div {
            padding-bottom: 10px;
      }
      #simulator .cont input:checked~.checkmark:after {
            bottom: 47px;
            width: 6px;
            height: 6px;
      }
}



</style>