/*----------------------------------------------------

KW Commission Calculator

-----------------------------------------------------*/

.kw-header{

    text-align:center;

    margin-bottom:40px;

}



.kw-header h2{

    margin:0;

    font-size:38px;

    font-weight:700;

    color:#111;

}



.kw-header p{

    max-width:750px;

    margin:15px auto 0;

    color:#666;

    font-size:18px;

    line-height:1.7;

}



.kw-commission-earned{

    margin-bottom:50px;
    padding: 40px;
    border: 1px solid #E1DDD8;

}
.kw-commission-earned label {
    display: block;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
   color: #51565B;
    font-family: "Jost", Sans-serif;
    text-transform: uppercase;
    leading-trim: NONE;
    line-height: 16.8px;
    letter-spacing: 2.46px;
}
#commissionDisplay {
    margin: 10px 0 0px;
    text-align: left;
    font-size: 60px;
    color: #0E1216;
    font-weight: 300;
    font-family: "Jost", Sans-serif;
    letter-spacing: -1.5px;
}

.drag-name p {
     font-family: "Jost", Sans-serif;
    font-weight: 400;
  text-transform: uppercase;
    font-size: 12px;
    color: #51565B;
    margin-bottom: 0px;
    letter-spacing: 2.64px;
}

.kw-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 40px;
}

/* Slider */



#commissionSlider{

    width:100%;

    appearance:none;

    height:6px;

    background:#E1DDD8;

    outline:none;

}



#commissionSlider::-webkit-slider-thumb{

    appearance:none;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#D01C29;

    cursor:pointer;

    border:4px solid #fff;

    box-shadow:0 0 10px rgba(0,0,0,.25);

}



#commissionSlider::-moz-range-thumb{

    width:26px;

    height:26px;

    border:none;

    border-radius:50%;

    background:#C8102E;

    cursor:pointer;

}



/* Cards */



.kw-results{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:0px;

    margin-top:45px;

}

.kw-card.kw-card-red {
    border-right: 1px solid #ececec;
}
.kw-card.comp-card{
    border-left:1px solid #ececec;
}

.kw-card{
    background:#fff;
    padding:30px;

}
.kw-card.kw-card-red .amount {
    color: #D01C29;
}
.kw-card-content,.competition-card-content {
    margin-top: 30px;
    border-top: 1px solid #E1DDD8;
    padding-top: 24px;
}
.card-content-wrap {
    display: flex;
    justify-content: space-between;
}
.card-cols.col-left span{
    font-family: "Jost", Sans-serif;
}
.card-cols.col-right span {
    color: #0E1216 !important;
    font-family: "Jost", Sans-serif;
        text-align: right;
}
.card-cols.col-right span strong {
    font-weight: 500;
    font-family: "Jost", Sans-serif;
}
.card-cols.col-left span,.card-cols.col-right span  {
    display: block;
    padding: 6px 0px;
}
.kw-card h3 {
    font-family: "Jost", Sans-serif;
    font-weight: 500 !important;
    font-style: Medium;
    font-size: 14px !important;
    line-height: 16.8px;
    letter-spacing: 2.46px;
    text-transform: uppercase;
    margin-bottom: :24px !important;
}

span.kw-icon {
    display: inline-flex;
    font-family: "SF Pro Medium", Sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1px;
    color: #fff;
    background: #D01C29;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}
span.comp-icon {
    border: 1px solid #0E1216;
      display: inline-flex;
    font-family: "SF Pro Medium", Sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1px;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    margin-right: 4px;
}

.amount {
       margin: 8px 0 25px;
    text-align: left;
    font-family: "Jost", Sans-serif;
    font-weight: 300;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1.2px;
    vertical-align: middle;
}
span#theyKeep,span#youKeep{
    font-weight:500;
}


/* Progress */



.progress{

    height:8px;

    background:#E1DDD8;

    overflow:hidden;

}



.progress-fill{

    height:100%;

    width:0%;

    transition:.35s;

}



.progress-red{

    background:#CE011F;

}



.progress-black{

    background:#0E1216;

}



/* Savings */



.kw-savings {
    margin-top: 32px;
    text-align: center;
    background: #F2F2F2;
    padding: 64px 48px 48px 48px;
    border: 1px solid #E1DDD8;
}

span.annual-save-para {
  font-family: "Jost", Sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16.8px;
    letter-spacing: 2.46px;
    text-align: center;
    text-transform: uppercase;
}
span.saving-last-para {
 font-family: "Jost", Sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22.75px;
    letter-spacing: -0.15px;
    text-align: center;
    max-width: 501px;
    width: 100%;
    display: block;
    margin: 10px auto;
}
div#savingAmount:before {
    content: '+';
    margin-right: 10px;
}

.kw-savings h2{

    margin:0;

    color:#666;

    font-size:30px;

}



.saving-number{
color:#0E1216D9;
font-family: "Jost", Sans-serif;
font-weight: 700;
font-size: 72px;
line-height: 72px;
letter-spacing: -1.8px;
text-align: center;
vertical-align: middle;

}
span.brokerage {
     font-family: "Jost", Sans-serif;
    font-weight: 400;
    color:#51565B;
    line-height: 20px;
    letter-spacing: -0.15px;
}


/* Tagline */



.kw-tagline{

    margin-top:40px;

    padding:30px;

    background:#C8102E;

    color:#fff;

    border-radius:15px;

    text-align:center;

    line-height:1.8;

    font-size:18px;

}



.kw-tagline strong{

    display:block;

    font-size:26px;

    margin-bottom:15px;

}

div#capMarker {
    display: flex;
    justify-content: space-between;
    margin-top:5px;
}
div#capMarker span {
    font-family: "Jost", Sans-serif;
    font-size: 11px;
    color: #51565B;
    text-transform: uppercase;
}

/* Responsive */



@media(max-width:991px){



.kw-results{

grid-template-columns:1fr;

}



#commissionDisplay{

font-size:58px;

}



.amount{

font-size:46px;

}



.saving-number{

font-size:52px;

}



.kw-header h2{

font-size:32px;

}



}



@media(max-width:767px){



.kw-calculator-wrapper{

padding:0px;

margin:0px;

}
.kw-commission-earned {
    padding: 40px 15px;
}
.kw-card.kw-card-red,.kw-card.comp-card {
    border: 1px solid #ececec;
}
.kw-results{
    gap:30px;
}
.kw-top-inner {
    flex-wrap: wrap;
    gap: 20px;
}
#commissionDisplay{

font-size:44px;

}



.amount{

font-size:38px;

}



.saving-number{

font-size:42px;

}



.kw-header p{

font-size:16px;

}



.kw-tagline{

font-size:16px;

}



}