/*
 * This file contains all mixins and functions. Ya, it's called
 * 'mixins' but I cheat a little and put functions in here too.
 */
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes open_height_toggle {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    opacity: 0;
    transform: scaleY(0); }
  100% {
    opacity: 1;
    transform: scaleY(1); } }

.calc_wrapper__has_cta {
  border: 2px solid #79797c;
  box-shadow: 5px 5px 0px 0px #D9D9D6;
  padding: 6px; }
  @media (min-width: 601px) {
    .calc_wrapper__has_cta {
      display: inline-flex; } }

.co-pix_calc {
  border: 2px solid #79797c;
  box-shadow: 5px 5px 0px 0px #D9D9D6;
  color: #515252;
  display: block;
  margin-right: auto;
  margin-left: auto;
  max-width: 730px;
  padding-top: 25px;
  padding-bottom: 25px;
  text-align: center; }
  .co-pix_calc {
    padding-left: 15px;
    padding-right: 15px; }
    @media screen and (min-width: 321px) {
      .co-pix_calc {
        padding-left: calc(15px + 15 * ((100vw - 321px) / 469));
        padding-right: calc(15px + 15 * ((100vw - 321px) / 469)); } }
    @media screen and (min-width: 790px) {
      .co-pix_calc {
        padding-left: 30px;
        padding-right: 30px; } }
  .calc_wrapper__has_cta .co-pix_calc {
    border: none;
    box-shadow: none; }
  .co-pix_calc--title {
    color: #396A6A;
    font-family: "Kumbh Sans", sans-serif;
    font-size: 20px;
    font-weight: 700; }
  .co-pix_calc--radio_group {
    color: #396A6A;
    display: flex;
    justify-content: center;
    margin-bottom: 25px; }
  .co-pix_calc--radio_option {
    margin-left: 10px; }
  .co-pix_calc--radio_input {
    display: none; }
  .co-pix_calc--radio_label {
    align-content: center;
    display: flex;
    font-weight: 600; }
    .co-pix_calc--radio_label:before {
      border: 2px solid #fff;
      border-radius: 100%;
      box-shadow: 0 0 0 1px #396A6A;
      content: "";
      display: inline-block;
      height: 16px;
      margin-right: 5px;
      width: 16px; }
      .co-pix_calc--radio_input:checked + .co-pix_calc--radio_label:before {
        background-color: #996B18; }
  .co-pix_calc--input {
    display: block;
    margin-bottom: 25px; }
  .co-pix_calc--input_label {
    display: block;
    margin-bottom: 12.5px; }
    .co-pix_calc--input_label {
      font-size: 18px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--input_label {
          font-size: calc(18px + 2 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--input_label {
          font-size: 20px; } }
  .co-pix_calc--input_amount {
    color: #843C62;
    display: block;
    font-weight: 700;
    line-height: 1; }
    .co-pix_calc--input_amount {
      font-size: 25px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--input_amount {
          font-size: calc(25px + 15 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--input_amount {
          font-size: 40px; } }
  .co-pix_calc--output_label {
    display: block;
    margin-top: 16.66667px; }
    .co-pix_calc--output_label {
      font-size: 18px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--output_label {
          font-size: calc(18px + 2 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--output_label {
          font-size: 20px; } }
  .co-pix_calc--output {
    align-items: flex-end;
    display: flex;
    justify-content: center;
    margin-top: 16.66667px; }
    @media (max-width: 432px) {
      .co-pix_calc--output {
        display: block; } }
  .co-pix_calc--output_amount {
    color: #843C62;
    font-weight: 700;
    line-height: 1; }
    .co-pix_calc--output_amount {
      font-size: 35px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--output_amount {
          font-size: calc(35px + 55 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--output_amount {
          font-size: 90px; } }
    @media (max-width: 432px) {
      .co-pix_calc--output_amount {
        display: block; } }
  .co-pix_calc--output_details {
    line-height: 1.2;
    padding-left: 10px;
    text-align: left; }
    .co-pix_calc--output_details {
      font-size: 18px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--output_details {
          font-size: calc(18px + 6 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--output_details {
          font-size: 24px; } }
    .co-pix_calc--output_details {
      padding-bottom: 3px; }
      @media screen and (min-width: 321px) {
        .co-pix_calc--output_details {
          padding-bottom: calc(3px + 12 * ((100vw - 321px) / 469)); } }
      @media screen and (min-width: 790px) {
        .co-pix_calc--output_details {
          padding-bottom: 15px; } }
    @media (max-width: 432px) {
      .co-pix_calc--output_details {
        display: block;
        text-align: center;
        margin-top: 12.5px; } }
  .co-pix_calc--output_detail {
    display: block; }
  .co-pix_calc input[type=range] {
    margin: 13.8px 0;
    background-color: transparent;
    max-width: 540px;
    margin-right: auto;
    margin-left: auto;
    -webkit-appearance: none;
    width: 100%; }
  .co-pix_calc input[type=range]:focus {
    outline: none; }
  .co-pix_calc input[type=range]::-webkit-slider-runnable-track {
    background: #D9D9D6;
    border: none;
    border-radius: 10px;
    width: 100%;
    height: 20px;
    cursor: pointer; }
  .co-pix_calc input[type=range]::-webkit-slider-thumb {
    margin-top: -10px;
    width: 40px;
    height: 40px;
    background: #996B18;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    -webkit-appearance: none; }
  .co-pix_calc input[type=range]:focus::-webkit-slider-runnable-track {
    background: #D9D9D6; }
  .co-pix_calc input[type=range]::-moz-range-track {
    background: #D9D9D6;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    height: 20px;
    width: 100%; }
  .co-pix_calc input[type=range]::-moz-range-thumb {
    width: 40px;
    height: 40px;
    background: #996B18;
    border: none;
    border-radius: 100%;
    cursor: pointer; }
  .co-pix_calc input[type=range]::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 14.8px 0;
    color: transparent;
    width: 100%;
    height: 20px;
    cursor: pointer; }
  .co-pix_calc input[type=range]::-ms-fill-lower {
    background: #996B18;
    border: none;
    border-radius: 10px; }
  .co-pix_calc input[type=range]::-ms-fill-upper {
    background: #D9D9D6;
    border: none;
    border-radius: 10px; }
  .co-pix_calc input[type=range]::-ms-thumb {
    width: 40px;
    height: 40px;
    background: #996B18;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/ }
  .co-pix_calc input[type=range]:focus::-ms-fill-lower {
    background: #996B18; }
  .co-pix_calc input[type=range]:focus::-ms-fill-upper {
    background: #D9D9D6; }

.co-calc_cta {
  background-color: #D9D9D6;
  color: #002A3A;
  padding: 18px;
  text-align: left;
  width: 100%; }
  @media (min-width: 601px) {
    .co-calc_cta {
      max-width: 282px; } }
  .co-calc_cta--img {
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px; }
  .co-calc_cta--headline {
    font-family: "Arvo", serif;
    font-size: 24px; }
  .co-calc_cta--description {
    margin-bottom: 20px; }
    .co-calc_cta--description p:last-child,
    .co-calc_cta--description ol:last-child,
    .co-calc_cta--description ul:last-child {
      margin-bottom: 0; }

.co-simplePaymentCalc,
.co-cdCalc {
  border: 2px solid #79797c;
  box-shadow: 5px 5px 0px 0px #D9D9D6;
  display: flex;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  text-align: left; }
  @media (min-width: 961px) {
    .co-simplePaymentCalc,
    .co-cdCalc {
      max-width: 800px; } }
  .co-simplePaymentCalc--heading,
  .co-cdCalc--heading {
    color: #396A6A;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 26px; }
  .co-simplePaymentCalc--inputs,
  .co-cdCalc--inputs {
    background-color: #FAFAFA;
    padding: 30px;
    width: 100%; }
    @media (min-width: 961px) {
      .co-simplePaymentCalc--inputs,
      .co-cdCalc--inputs {
        width: 33%; } }
  .co-simplePaymentCalc--text_input_wrap,
  .co-cdCalc--text_input_wrap {
    width: 100%;
    margin-bottom: 32px; }
  .co-simplePaymentCalc--text_input_label,
  .co-cdCalc--text_input_label {
    color: #396A6A;
    font-size: 20px;
    margin-bottom: 10px; }
  .co-simplePaymentCalc--text_input_row__has_post_label,
  .co-cdCalc--text_input_row__has_post_label {
    align-items: center;
    display: flex;
    gap: 15px;
    justify-content: space-between; }
  .co-simplePaymentCalc--text_input,
  .co-cdCalc--text_input {
    border: 1px solid #79797c;
    border-radius: 1em;
    padding: 5px 1em;
    width: 100%; }
  .co-simplePaymentCalc--submit_button,
  .co-cdCalc--submit_button {
    font-size: 16px; }
  .co-simplePaymentCalc--output,
  .co-cdCalc--output {
    padding: 30px;
    width: 100%; }
    @media (min-width: 961px) {
      .co-simplePaymentCalc--output,
      .co-cdCalc--output {
        width: 67%; } }
  .co-simplePaymentCalc--dl,
  .co-cdCalc--dl {
    align-items: baseline;
    display: grid;
    flex-wrap: wrap;
    gap: 10px;
    grid-template-columns: 60% 40%; }
  .co-simplePaymentCalc--dt, .co-simplePaymentCalc--dd,
  .co-cdCalc--dt,
  .co-cdCalc--dd {
    width: 100%; }
  .co-simplePaymentCalc--dt,
  .co-cdCalc--dt {
    color: #396A6A;
    font-size: 20px;
    font-weight: 400; }
  .co-simplePaymentCalc--dd,
  .co-cdCalc--dd {
    margin: 0;
    font-size: 20px;
    font-weight: 600; }
    .co-simplePaymentCalc--dd__big,
    .co-cdCalc--dd__big {
      color: #843C62;
      font-size: 45px;
      font-weight: 600; }

.co-cdCalc--error {
  background-color: #843C62;
  color: #fff;
  margin: 0 auto 15px;
  padding: 10px 20px;
  text-align: left; }
  @media (min-width: 961px) {
    .co-cdCalc--error {
      max-width: 800px; } }

.co-cdCalc--output {
  color: #396A6A;
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 600;
  justify-content: center; }

.co-cdCalc--output_number {
  color: #843C62;
  font-size: 75px;
  margin-bottom: 0.8em; }

.co-cdCalc--output_sub {
  border-top: 2px solid #396A6A;
  display: flex;
  justify-content: space-between;
  padding-top: 20px; }

.co-cdCalc--output_sub_label {
  font-weight: 400; }

.co-cdCalc--disclosure {
  color: #396A6A;
  font-size: 14px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 961px) {
    .co-cdCalc--disclosure {
      max-width: 800px; } }