.roi-calculator-area{max-width:100%;}
.roi-calculator-area .row-fluid {padding-right:0px !important;padding-left:0px !important;}

.roi-calculator .roi-calc,.roi-calculator .roi-results,.content-area{max-width:1600px;margin-right: auto;margin-left: auto;padding-right:15px;padding-left:15px;padding-bottom:30px}
.roi-calculator{
  width: 100%;
}
.roi-calculator .roi-calc{
  width: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  padding: 20px; {# ADDED PADDING FPR BETTER SPACING IN RESPOSIVE STYLES#}
}
.roi-calculator .roi-calc .text-area{
  width: 35%;
}
.roi-calculator .roi-calc .text-area .logo{
  width: 100%;
  font-weight:400;
  margin-bottom: 40px;
  font-size:45px;
  line-height:1;
  color:var(--theme-dark-background);
}
.roi-calculator .roi-calc .text-area .logo span{
  font-size:37px;
  font-weight: 400;
}
.roi-calculator .roi-calc .text-area .logo img{
  max-width:225px;
  position: relative;
  top: 5px;}
.roi-calculator .roi-calc .text-area .text{}
.roi-calculator .roi-calc .text-area .text h1{font-size:40px;color:var(--theme-dark-background);margin-bottom:10px;}
.roi-calculator .roi-calc .text-area .text p{
  margin-top:0px;margin-bottom:10px;
}
.roi-calculator .roi-calc .form-area{display:flex; width: 943px;place-content: space-around;flex-wrap: wrap;}
.roi-calculator .roi-calc .form-area .button-area{width:100%;text-align:right;}
.roi-calculator .roi-calc .form-area .button-area .button{min-height:50px;}
.roi-calculator .roi-calc .form-area .button-area .reset{border:2px solid rgb(var(--color-primary));color:rgb(var(--color-primary));margin-right:25px}
.roi-calculator .roi-calc .form-area .button-area .calculate{}
.roi-calculator .roi-calc .form-area .cols{width:48%;}
.roi-calculator .roi-calc .form-area .input {position:relative;}
.roi-calculator .roi-calc .form-area .input input.error{margin-bottom:25px;}
.roi-calculator .roi-calc .form-area .input label.error{
font-size: 12px;
    margin-top: 0px;
    position: absolute;
    bottom: 5px;
    color: #f00;
    left: 0;
}
.roi-calculator .roi-calc .form-area .input .help{
  background:#3F30A3;position:relative;    position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  top: -53px;
  right: 15px;
  float: right;
}
.roi-calculator .roi-calc .form-area .input .help:after{content:'?';color:#fff;}
.roi-calculator .roi-calc .form-area .input .help p{
  display: none;
  position: absolute;
  left: 0;
  left: -82px;
  background: #f5f5f5;
  padding: 4px 7px;
  width: 121px;
  color: #3e30a3;
  bottom: -28px;
  border-bottom: 1px solid #d4d4d4;
  font-size: 13px;
}
.roi-calculator .roi-calc .form-area .input .help:hover{cursor:pointer;}
.roi-calculator .roi-calc .form-area .input .help:hover p{display:block;}
.roi-calculator .roi-calc .form-area .input label{
  color: #3F30A3;
  font-size: 16px;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.roi-calculator .roi-calc .form-area .input input{
  background: #F5F5F5;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 0px solid transparent;
  border-bottom: 2px solid #D3D3D3;
  height: 60px;
  padding: 0px 10px;
  color: #3F30A3;
  border-radius:0px;
  font-weight: 600;
  font-size: 22px; {#Updated font-size and font weight to fit mockup #}
}

.roi-average{width:100%;display:flex;justify-content: space-between;padding-top: 70px;}
.roi-average .card-plan{width:33.3333%;box-shadow: 0px 14px 20px #00000026;width: calc(33.333333% - 15px);background:#EFECE8;}
.roi-average .card-plan .head-plan{width:100%;background:#21006E;min-height:160px;display: table;}
.roi-average .card-plan .head-plan .HfIk{padding:20px;display: table-cell;vertical-align: middle;}
.roi-average .card-plan .head-plan h5{color:#fff;text-align:center;font-weight: 400;font-size: 24px;margin-bottom: 15px;}
.roi-average .card-plan .head-plan h3{color:#e35afc;text-align:center;font-size:52px;}
.roi-average .card-plan .info-plan{background:#EFECE8;min-height:520px;text-align:center;padding-bottom:20px;display: table;width:100%;}
.roi-average .card-plan .info-plan h4{color: #21006E;padding-top:20px;padding-bottom:20px;}
.roi-average .card-plan .info-plan label{color: #222222;font-size:17px;font-weight:600;}
.roi-average .card-plan .info-plan p{color: #7E67D8;font-size:22px;line-height: 1; padding-top: 8px; padding-bottom: 17px;margin:0px;}
.roi-average .card-plan .info-plan p a.btn-popup.single-btn{font-size: 17px; color: #e35afc; cursor: pointer;}
.roi-average .card-plan .info-plan p a.btn-popup.btn-sales{margin-top:15px;}
.roi-average .card-plan .info-plan .contact-sales{display:table-cell;vertical-align:middle;padding-left:20px;padding-right:20px;}
.roi-average .card-plan .info-plan .contact-sales h4{line-height: 1.1; padding-bottom: 2px;}
.roi-average .card-plan .info-plan .contact-sales p{font-size: 17px; line-height: 1.3;}
.extra-info{width:100%;display:flex;justify-content: space-around;padding-top: 70px;background:#F5F5F5;margin-top:30px;margin-bottom:30px;padding-top:30px;padding-bottom:30px;}
.extra-info span{color: #21006E; font-size: 19px; font-weight: 600;}
.extra-info span b{color: #7E67D8;font-size: 19px;font-weight:400;margin-left:10px;}
.use-calculator{width:100%;background: #EFECE8;min-height:600px;margin-top:70px;padding-top: 50px;}
.use-calculator .content-area{width:100%;display:flex;justify-content: space-between;}
.use-calculator .content-area .image-area{width:37%;}
.use-calculator .content-area .image-area img{max-width:100%;}
.use-calculator .content-area .text-area{width:58%;}

.bofu-area{background: #21006E;padding:20px 15px;}
.bofu-area .text{color:#fff;}
.bofu-area .form-section{color:#fff;padding: 0px 40px;text-align: center;text-align: -webkit-center;}
.bofu-area .form-section h2{font-weight:400;}
.bofu-area .form-section .form-columns-1{width: 310px; display: inline-block; margin: 0;}
.bofu-area .form-section .form-columns-2{display:none;}
.bofu-area .form-section .download-pdf{display:none;color:#000;background:#fff;color: #21006E; font-size: 16px; font-weight: 600;min-height: 50px; min-width: 301px;margin-top: 20px;}
.bofu-area .form-section .submitted-message + .download-pdf{display:block;}
.bofu-area .form-section form{background:transparent;}
.bofu-area .form-section form .hs_email.hs-email{width:100%;max-width:310px;display:inline-block;text-align:left;}
.bofu-area .form-section form .hs_submit {width:330px;display:inline-block;vertical-align:baseline;}
.bofu-area .form-section form .hs_submit .hs-button{margin-top:23px;padding: 15px 20px;margin-left: 30px;}
.bofu-area .form-section .submitted-message a{background: #fff; padding: 11px 30px; border-radius: 20px; margin-top: 10px; display: inline-block; cursor: pointer;}
.bofu-area .form-section form input[type=email]{height:50px;}
.bofu-area .form-section form input[type=text],.bofu-area .form-section form input[type=email],.bofu-area .form-section form input[type=number],.bofu-area .form-section form input[type=tel]{border-radius:0px;}
.bofu-area .form-section form select{border-radius:0px;}
.bofu-area .form-section form label{color:#fff;}
.bofu-area .form-section form .send-my-results {color:#000;background:#fff;color: #21006E; font-size: 16px; font-weight: 600;min-height: 50px; min-width: 301px;}
/* medias */
@media print {
  .no-print {
    display: none;
  }
}

/* XS */
@media (max-width: 767px){
  .roi-calculator .roi-calc,.use-calculator,.roi-results,.extra-info,.bofu-area{padding-right:15px;padding-left:15px;} 
  .roi-calculator .roi-calc,.roi-calculator .roi-calc .form-area, .roi-calculator .roi-calc .text-area,.use-calculator .content-area,.roi-average,.extra-info{display:block;}
  .roi-calculator .roi-calc .text-area,.roi-calculator .roi-calc .form-area,.roi-calculator .roi-calc .form-area .cols,.use-calculator .content-area .text-area,.roi-average .card-plan{width:100%;}
  .use-calculator .content-area .image-area{display:none;}
  .roi-average .card-plan .head-plan h3{font-size:40px;}
  .roi-calculator .roi-calc .form-area,.roi-calculator .roi-calc .form-area .button-area{padding-top:20px;}
  .roi-calculator .roi-calc .text-area .logo img{max-width:155px;}
  .roi-calculator .roi-calc .text-area .logo{font-size:27px;}
  .roi-calculator .roi-calc .text-area .logo span{font-size:24px;}
  .use-calculator{padding-top:40px;margin-top:40px;}
  .roi-calculator .roi-calc, .roi-results, .use-calculator{padding-bottom:30px;}
  .roi-average .card-plan{margin-bottom:50px;}
  .roi-calculator .roi-calc .form-area .button-area .reset{margin-right:15px;}
  .bofu-area .form-section{padding:0px 10px;}
  .extra-info span{line-height:1.8;display:block;}

}

/* SM */
@media (min-width:768px) and (max-width:991px){
  .roi-calculator .roi-calc .form-area{display:block;}
  .roi-calculator .roi-calc .form-area .cols{width:100%;}
  .roi-calculator .roi-calc .form-area{width:50%;}
  .roi-calculator .roi-calc .text-area{width:50%;}
  .roi-calculator .roi-calc,.extra-info,.bofu-area{padding-right:15px;padding-left:15px;}
  .roi-calculator .roi-calc .text-area .logo img{max-width:155px;}
  .roi-calculator .roi-calc .text-area .logo{font-size:27px;}
  .roi-calculator .roi-calc .text-area .logo span{font-size:24px;}
  .roi-calculator .roi-calc .text-area .text h3{font-size:35px;line-height: 1.2;}
  .roi-calculator .roi-calc .form-area, .roi-calculator .roi-calc .text-area{padding-right:15px;}
  .roi-calculator .roi-calc .form-area .button-area{margin-top:15px;}
  .use-calculator{padding-top:40px;margin-top:40px;}
  .use-calculator .content-area .image-area{width:34%;}
  .use-calculator .content-area .text-area {width: 66%; padding: 0 15px;}
  .roi-average .card-plan .head-plan h5{font-size:18px;margin-bottom: 10px;}
  .roi-average .card-plan .info-plan label{font-size:13px;}
  .roi-average .card-plan .info-plan .contact-sales h4{font-size:20px;}
  .roi-average .card-plan .info-plan .contact-sales p{font-size:15px;}
  .roi-average .card-plan .info-plan p{font-size:20px;}
  .roi-average{padding-left:15px;padding-right:15px;}
  .roi-average .card-plan .info-plan h4{font-size: 18px; padding-top: 15px; padding-bottom: 15px;}
  .extra-info,.bofu-area{    max-width: calc(100% - 30px); margin-left: auto;margin-right: auto;}
}

/* MD */
@media (min-width:992px) and (max-width:1199px){
  .roi-calculator .roi-calc,.roi-average{padding-left:15px;padding-right:15px;}
  .roi-calculator .roi-calc .text-area{width:40%;}
  .roi-calculator .roi-calc .form-area{width:60%;padding-left: 15px;}
  .roi-calculator .roi-calc .text-area .logo img{max-width:155px;}
  .roi-calculator .roi-calc .text-area .logo{font-size:27px;}
  .roi-calculator .roi-calc .text-area .logo span{font-size:24px;}
  .roi-calculator .roi-calc .text-area .text h3{font-size:35px;line-height: 1.2;}
  .roi-average .card-plan .info-plan label{font-size:14px;}
  .roi-average .card-plan .info-plan h4{font-size: 24px; padding-top: 15px; padding-bottom: 15px;}
  .roi-average .card-plan .head-plan h5{font-size:20px;}
}


.currencyinput {
  border: 0px inset #ccc;
  display:flex;
}
.currencyinput p{
  position: absolute;
  font-size: 20px;
  margin-left: 10px;
  margin-top: 19px;
  font-weight: 600;
  color: #3F30A3;
}
.currencyinput input {
  border: 0;
}

.roi-calculator .roi-calc .form-area .input .currencyinput input{
  padding: 0px 22px;
}

/* pop-up form */
.popup {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index:9999;
  height: 100%;
}
.popup .popup__content {
  background: #fff;
  box-sizing: border-box;
  color: #000;
  height: auto;
  left: 50%;
  overflow: auto;
  padding: 20px;
  position: relative;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
}
.popup .popup__content .close {
  display: block;
  position: absolute;
  right: 19px;
  top: 15px;
  width: 20px;
  height: 20px;
}
/*.popup .popup__content .close:before{
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  display: block;
  position: absolute;
  top: -10px;
  right: -14px;
}*/
.popup .popup__content .close span {
  cursor: pointer;
  position: fixed;
  width: 20px;
  height: 3px;
  background: #21006E;
}
.popup .popup__content .close span:nth-child(1) {
  transform: rotate(45deg);
}
.popup .popup__content .close span:nth-child(2) {
  transform: rotate(135deg);
}
.text-form{
  width: 80%;
  margin: 0 auto;
}
.text-form h2{color:#21006E;}
.text-form p{color:#7E67D8;}
/* end pop-up form*/
@media (max-width: 48em){
  .currencyinput p{
    font-size: 16px;
    margin-top: 22px;
  }
}