/* CSS Document */
:root {
    --light: #f7f7f7;
    --grey: #d7d7d7;
    --pink: #f01f72;
    --dark: #5c5b5b;
}

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebasneue-regular-webfont.woff2') format('woff2'),
         url('../fonts/bebasneue-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.container{
  max-width: 1400px;
}

h2{
  padding: 15px;
}

h5{
  margin: 1em 0 !important;
  font-size: 16px !important;
}

a{
  color: var(--pink);
}

a:hover{
  text-decoration: none;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--grey) !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: var(--grey) !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: var(--grey) !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: var(--grey) !important;
}

.alternate{
  background-color: var(--light);
}

.calc-wrap{
  background-color: #FFF;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.10);
}

#BenefitCalculator .calc-header{
}


.actions{
  padding: 15px;
  text-align: right;
}

#BenefitCalculator .actions input[type="button"]{
  text-transform: uppercase;
  padding: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-block;
  margin-left: 10px;
}

#BenefitCalculator input.clear-btn{
  border: 1px solid var(--grey);
  background-color: var(--light);
}

#BenefitCalculator input.clear-btn:hover{
  border: 1px solid var(--grey);
  background-color: var(--grey);
  color: #FFF;
}

#BenefitCalculator input.email-btn{
  background-color: var(--pink);
  color: #FFF;
  border: 1px solid var(--pink);
}

#BenefitCalculator input.email-btn:hover{
  background-color:#000;
  border: 1px solid #000;
  color: #f52c70;
}

#BenefitCalculator .pum label, #BenefitCalculator .pum input{
  font-weight: 500;
  color: #ff0080;
  font-size: 16px !important;
}

#BenefitCalculator .pum{
  padding: 10px 0;
}

#BenefitCalculator label{
  font-size: 13px;
  color: #404040;
}

.payment-box{
  margin-bottom: 15px;
}

.offerhq{
  color: #78b341;
}

.offerhq span{
  color: #3b56a7;
}

.easybond{
  color: #1f99e7;
}

.easybond span{
  color: #fea84c;
}

#BenefitCalculator small.form-text{
  color: var(--grey) !important;
  font-size: 12px;
  display: block;
  width: 100%;
}

#BenefitCalculator input[type="text"]{
  text-align: right !important;
  font-weight: 400;
}

#BenefitCalculator .modal-header{
  background-color: var(--pink);
}

#BenefitCalculator .modal-header button.close{
  color: #FFF;
}

#BenefitCalculator h5.modal-title{
  margin: 0;
  color: #FFF;
}

#BenefitCalculator .modal-body input[type="email"]{
  margin-top: 1em;
}

#BenefitCalculator .modal-body input[type="email"],
#BenefitCalculator .modal-body input[type="text"]{
  width: 100%;
  padding: 10px;
  font-size: 1.2em;
  border-radius: 0;
  font-weight: 500;
  text-align: left !important;
}

#BenefitCalculator .modal-footer button.btn{
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  font-size: 13px;
}

#BenefitCalculator .modal-footer button.btn-primary{
  background-color: var(--pink);
  border: 1px solid var(--pink);
}

#BenefitCalculator .modal-footer button.btn-primary:hover{
  background-color: #000;
  border-color: #000;
}

#BenefitCalculator input[type="text"],
#BenefitCalculator select.form-control{
  border-color: var(--grey);
  border-radius: 0;
  font-weight: 700;
}

#BenefitCalculator .input-group-prepend .input-group-text,
#BenefitCalculator .input-group-append .input-group-text{
  font-weight: 700 !important;
  color: var(--dark);
  border-radius: 0;
}

#BenefitCalculator .results{
  background: url(../img/results-bg.jpg) repeat center center scroll transparent;
  background-size: cover;
  color: #FFF;
  padding: 3em 0 0;
}

#BenefitCalculator .results h3{
  font-weight: 300;
  text-align: center;
  font-size: 22px;
  margin-bottom: 1.5em;
}

#BenefitCalculator .results input.form-control[readonly]{
  background: none;
  border: 0;
  font-size: 2.5em;
  text-align: center !important;
  color: #FFF;
  font-weight: 500;
  font-family: "Bebas";
  padding: 0.25em 0;
}

#BenefitCalculator .results .input-group-text{
  background: none;
  border: 0;
  font-size: 2em;
  color: #FFF;
  font-weight: 700;
}

#BenefitCalculator #on-progress, #BenefitCalculator .success, #BenefitCalculator .error{
  display: none;
}

#BenefitCalculator .copyright{
  margin: 4em 0 1em;
  color: var(--grey);
}

#BenefitCalculator .copyright a{
  color: var(--grey);
}

/* Responsive Custom */
@media only screen and (max-width: 961px) {
  #BenefitCalculator h1{
    padding: 15px 15px 0;
    font-size:  2em;
    text-align: center;
  }

  #BenefitCalculator .pum label {
    text-align: center;
  }


  #BenefitCalculator .pum input {
    width:100%;
  }

  #BenefitCalculator input.clear-btn{
    margin-bottom: 16px;
  }

  #BenefitCalculator .actions{
    text-align: center;
  }

  #BenefitCalculator .actions input[type="button"]{
  }
}