html, body {
  margin: 0;
}
.animation_row img {
  vertical-align: top;
  height: auto;
}

.animation_row {
  max-width: 1472px;
  position: relative;
  font-family: 'Host Grotesk', sans-serif;
  color: #1A263C;

  overflow: hidden;
 
}

.animation_row * {
  pointer-events: none;
}
  
.animation_scalable {
  transform-origin: left top;
      width: 1472px;
    position: absolute;
    left: 0;
    top: 0;
}

.animation_full {
  width: 100%;
  height: auto;
  vertical-align: top;
  position: relative;
}
.animation_text {
  position: absolute;
  right: 38px;
  top: 123px;
  width: 546px;
  padding: 0px 65px 0 47px;
  box-sizing: border-box;
  color: #19263c;
  height: 479px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.animation_heading {
  font-weight: 700;
      font-size: 62px;
    line-height: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.3em;
}
.animation_p {
  margin: 32px 0 0 0;
  font-size: 20px;
  line-height: 1.4em;
  font-weight: 700;
}
.animation_abs {
  position: absolute;
}

/*animation1*/
.animation1_replay {
  visibility: hidden;
  opacity: 0;
  left: 221px;
  top: 433px;
  width: 296px;
  height: 35px;
  cursor: pointer;
  pointer-events: all!important;
}
.animation1_fireworks {
  width: 420px;
  height: 535px;
  left: 160px;
  top: 103px;
  width: 660px;
    height: 575px;
    left: 40px;
    top: 73px;
}
.animation1_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.animation1_img {
  left: 38px;
  top: 38px;
}
.animation1_svg1 {
  left: 149px;
  top: 117px;
}
.animation1_onetime {
  left: 75px;
  top: 118px;
}
.animation1_s50 {
  left: 173px;
  top: 177px;
}
.animation1_cursor {
  left: 830px;
  top: 500px;
}
.animation1_svg2 {
  left: 149px;
  top: 91px;
}
.animation1_s15 {
  left: 173px;
  top: 131px;
}
.animation1_svg3 {
  left: 149px;
  top: 91px;
}
.animation1_50input {
  font-size: 14px;
  color: #1A263C;
  line-height: 1em;
  left: 81px;
  width: 120px;
  top: 271px;
  background: #fff;
  text-align: left;
}
.animation1_subtotal {
  width: 206px;
  text-align: right;
  left: 142px;
  top: 325.61px;
  font-weight: bold;
  font-size: 14px;
  color: #2F3135;
  line-height: 1em;
}
.animation1_info_2 {
  left: 93px;
  top: 295.61px;
}


/*animation3*/
.animation3_fireworks {
  width: 420px;
  height: 535px;
  left: 355px;
  top: 103px;
}
.animation3_fireworks canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.animation_center {
  position: absolute;
  left: 391px;
  top: 172px;
  width: 346px;
  height: 410px;
}
.animation_img1 {
  width: 100%;
  height: auto;
}
.animation_heading1 {
  text-align: center;
  font-size: 16px;
  color: #FAA718;
  line-height: 18px;
  margin: 23px 18px 0 18px;
}
.animation_p1 {
  margin: 8px 20px 0 20px;
  font-size: 8px;
  color:#1A263C;
  line-height: 1em;
  text-align: center;
}
.animation_p2 {
  font-weight: bold;
  font-size: 8px;
  width: 110%;
  position: absolute;
  left: -5%;
  bottom: 25px;
  text-align: center;
}
.animation_button1 {
  position: absolute;
  bottom: 58px;
  left: 0;
  width:100% ;
  height: auto;
}
.animation_button2 {
  position: absolute;
  bottom: 77.89px;
  height: auto;
  left: 96px;
}
.animation_box1 {
  left: 176px;
  top: 268px;
}
.animation_cursor1 {
  left: 350px;
    top: 400px;
}
.animation_hidden {
  opacity: 0;
}
.animation_button2_text {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: 15px;
  color: #fff;
  line-height: 1em;
  white-space: nowrap;
}
.animation_button2_text.after::after {
  content:"|";
}


/*animation2*/
.animation2_phone {
  left: 366px;
  top: 146px;
}
.animation2_phone1 {
  width: 470px;
  height: auto;
}
.animation2_finger {
  left: 0px;
    top: 248px;
    width:140px;
}
.animation2_frame {
  position: absolute;
    left: 0;
    top: 518px;
  width: 300px;
  height: 250px;
    transform-origin: left top;
}
.animation2_mask {
  left: 57px;
  top: 121px;
  padding-top: 10px;
  width: 300px;
  height: 449px;
    transform-origin: left top;
    transform: scale(0.67);
    overflow: hidden;
    border-radius: 25px;
    box-sizing: border-box;

}
.animation2_scroll_img {
  width: 100%;
  height: 268px;
}
.animation_row3 iframe {
  background: url(https://www.feathr.co/hubfs/banners/for_199065818941/images/Iphone-spinner.gif) center no-repeat ;
  background-size: 50% auto;
}
.animation2_frame160x600 {
  left: 168px;
  top: 355px;
  transform-origin: left top;
  transform: scale(0.075);
  width: 160px;
  height: 600px;
}
.animation2_frame300x250 {
  left: 148px;
  top: 408px;
  transform-origin: left top;
  transform: scale(0.172);
  width: 300px;
  height: 250px;
}
.animation2_frame300x600 {
  left: 163px;
  top: 460px;
  transform-origin: left top;
  transform: scale(0.07);
  width: 300px;
  height: 600px;
}
.animation2_frame320x50 {
  left: 142px;
  top: 515px;
  transform-origin: left top;
  transform: scale(0.2);
  width: 320px;
  height: 50px;
}
.animation2_frame728x90 {
  left: 142px;
  top: 542px;
  transform-origin: left top;
  transform: scale(0.09);
  width: 728px;
  height: 90px;
}
.animation2_frame970x250 {
  left: 142px;
  top: 564px;
  transform-origin: left top;
  transform: scale(0.065);
  width: 970px;
  height: 250px;
}
.animation2_nums {
  left: 257px;
  width: 152px;
  top: 278px;
  color: #23DFF2;
  font-weight: bold;
  line-height: 1em;
  font-size: 26.25px;
  text-align: left;
}

/*animation4*/
.animation4_nums1 {
  left: 33px;
  top: 55px;
  font-size: 34.67px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums2 {
  left:28px;
  top: 45px;
  font-size: 27px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums3 {
  left: 29px;
  top: 48px;
  font-size: 29px;
  line-height: 1em;
  font-weight: bold;
}
.animation4_nums4 {
  left: 32px;
  top:53px;
  font-size: 33px;
  line-height: 1em;
  font-weight: bold;
}
.animation_tr_rb {
  transform-origin: right bottom;
}
.animation_tr_lb {
  transform-origin: left bottom;
}
.animation_tr_lt {
  transform-origin: left top;
}
.animation_tr_rt {
  transform-origin: right top;
}


 .animation_scalable {
  transform-origin: center top;
    width: 880px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -440px;
}
.animation_full.animation_base {
  aspect-ratio: 530 / 261;
}

/*1*/
.animation1_svg1, .animation1_svg2, .animation1_svg3 {
    left: 50%;
    margin-left: calc(-435px / 2);
}
.animation1_img {
    left: -10%;
    width: 120%;
}
/* 1: the laptop and the form overlays are centred now, so the cursor path,
   the replay hotspot and the confetti move right by the same offset (440 - 366.5) */
.animation1_cursor {
    left: 903.5px;
}
.animation1_replay {
    left: 294.5px;
}
.animation1_fireworks {
    left: 113.5px;
}
.animation_row {
  margin-left: auto;
  margin-right: auto;
  z-index: 0;
    transform: scale(1.4);
}
 .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_module {
    z-index:1
  }
  @media (max-width: 767px) {
  .row-depth-1.row-number-15 .row-fluid , .row-depth-1.row-number-21 .row-fluid {
      display: flex;
      flex-direction: column-reverse;
  }


  .animation_row {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .animation_row.animation_row1 {
    margin-left: 10vw;
  }
}

/* ===== Page 02 Donation: Mid-Fairfield site + Feathr donate pop-out (centred modal) ===== */
/* The laptop image keeps its size on any page, so the drawer always lines up with the laptop screen */
.animation1_img{max-width:none}
.mclip{left:30.7px;top:91.3px;width:819.6px;height:506px}
.mdr{--u:.62px;position:absolute;left:50%;top:50%;width:calc(410*var(--u));height:calc(757*var(--u));margin:calc(-378.5*var(--u)) 0 0 calc(-205*var(--u));background:#fff;color:#0f172a;font-family:'Host Grotesk',sans-serif;line-height:1.25;border-radius:calc(12*var(--u));box-shadow:0 calc(18*var(--u)) calc(60*var(--u)) rgba(6,20,40,.38);overflow:hidden}
.mdr *{box-sizing:border-box}
.mf{position:absolute;left:0;top:0;width:100%;height:100%;background:#fff}
.mx{position:absolute;top:calc(9*var(--u));right:calc(14*var(--u));width:calc(36*var(--u));height:calc(36*var(--u));border:1px solid #dfe1e5;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff}
.mx svg{width:calc(14*var(--u));height:calc(14*var(--u))}
.mback{position:absolute;top:calc(69*var(--u));left:calc(30*var(--u));width:calc(20*var(--u));height:calc(20*var(--u))}
.mt{position:absolute;left:0;right:0;top:calc(66*var(--u));text-align:center;font-size:calc(14*var(--u));font-weight:600;line-height:calc(26*var(--u))}
.mst{position:absolute;left:calc(23*var(--u));right:calc(26*var(--u));top:calc(103*var(--u));height:calc(8*var(--u));display:flex;gap:calc(8*var(--u))}
.mst i{flex:1;border-radius:calc(4*var(--u));background:#e4e4e7}.mst i.on{background:#1aa3e8}
.mdv{position:absolute;left:calc(12*var(--u));right:calc(14*var(--u));top:calc(124*var(--u));border-top:1px solid #e4e4e7}
.mab{position:absolute}
.mlb{position:absolute;left:calc(23*var(--u));font-size:calc(14*var(--u));font-weight:600;line-height:calc(20*var(--u))}
.mlb em{font-style:normal;font-weight:400;color:#6b7280}
.mtg{position:absolute;left:calc(23*var(--u));right:calc(26*var(--u));top:calc(138*var(--u));height:calc(46*var(--u));display:flex;gap:calc(4*var(--u));padding:calc(4*var(--u));background:#f1f1f3;border-radius:calc(8*var(--u))}
.mtgb{flex:1;display:flex;align-items:center;justify-content:center;border:1px solid #d5d7da;background:#fff;border-radius:calc(6*var(--u));font-size:calc(14*var(--u));font-weight:500;transition:background .2s,border-color .2s}
.mtgb.sel{font-weight:700}
.mgr{position:absolute;left:calc(23*var(--u));right:calc(26*var(--u));top:calc(228*var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--u))}
.mcd{height:calc(84*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #d5d7da;background:#fff;border-radius:calc(6*var(--u));font-size:calc(14*var(--u));font-weight:700;transition:background .2s,border-color .2s}
.mcu{position:absolute;left:calc(23*var(--u));right:calc(26*var(--u));top:calc(448*var(--u));height:calc(40*var(--u));display:flex;border:1px solid #d5d7da;border-radius:calc(6*var(--u));overflow:hidden;background:#fff;font-size:calc(14*var(--u));color:#6b7280}
.mcu span{display:flex;align-items:center}
.mcu1{width:calc(46*var(--u));justify-content:center;background:#f7f7f8;border-right:1px solid #d5d7da;color:#374151}
.mcu2{flex:1;padding-left:calc(14*var(--u))}
.mcu3{width:calc(56*var(--u));justify-content:center;background:#f7f7f8;border-left:1px solid #d5d7da}
.mbt{position:absolute;left:calc(23*var(--u));right:calc(26*var(--u));height:calc(38*var(--u));border-radius:calc(6*var(--u));background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(14*var(--u));font-weight:700;transition:background .2s}
.mbt.off{background:#8b909a}
.mpw{position:absolute;left:0;right:0;height:calc(41*var(--u));background:#f6f6f7;border-top:1px solid #e4e4e7;display:flex;align-items:center;justify-content:center;gap:calc(6*var(--u));font-size:calc(12*var(--u));color:#374151}
.mpw svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.mtx{position:absolute;left:calc(21*var(--u));right:calc(26*var(--u));top:calc(138*var(--u));font-size:calc(14*var(--u));line-height:calc(20*var(--u));color:#3f4651}
.mpc{position:absolute;left:calc(21*var(--u));right:calc(28*var(--u));top:calc(222*var(--u));display:flex;gap:calc(6*var(--u))}
.mpc div{flex:1;height:calc(56*var(--u));display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #d5d7da;background:#fff;border-radius:calc(6*var(--u));font-size:calc(14*var(--u));font-weight:700;transition:background .2s,border-color .2s}
.mpc small{font-size:calc(12*var(--u));font-weight:400;color:#4b5563;margin-top:calc(3*var(--u))}
.mcs{position:absolute;left:calc(21*var(--u));right:calc(28*var(--u));top:calc(313*var(--u));height:calc(34*var(--u));border:1px solid #d5d7da;border-radius:calc(6*var(--u));display:flex;align-items:center;justify-content:center;font-size:calc(14*var(--u));font-weight:700;background:#fff}
.mop{position:absolute;left:calc(21*var(--u));right:calc(28*var(--u));top:calc(373*var(--u));height:calc(47*var(--u));border-radius:calc(8*var(--u));background:#f4f4f5;display:flex;align-items:center;justify-content:space-between;padding:0 calc(14*var(--u));font-size:calc(13*var(--u));color:#374151}
.mop svg{width:calc(13*var(--u));height:calc(13*var(--u))}
.msm{position:absolute;left:calc(19*var(--u));right:calc(28*var(--u));border:1px solid #e5e7eb;border-radius:calc(8*var(--u));background:#fafafa;padding:calc(16*var(--u)) calc(17*var(--u)) calc(14*var(--u))}
.msm h4{margin:0 0 calc(4*var(--u));font-size:calc(16*var(--u));font-weight:700;line-height:calc(28*var(--u))}
.msm .r{display:flex;justify-content:space-between;align-items:center;height:calc(33*var(--u));font-size:calc(14*var(--u));color:#374151}
.msm .r.t{border-top:1px solid #e1e3e7;margin-top:calc(8*var(--u));padding-top:calc(8*var(--u));height:calc(44*var(--u));font-weight:700;color:#0f172a}
.mfd{position:absolute;left:calc(19*var(--u));right:calc(28*var(--u));height:calc(42*var(--u));border:1px solid #d5d7da;border-radius:calc(6*var(--u));background:#fff;display:flex;align-items:center;padding:0 calc(12*var(--u));font-size:calc(14*var(--u));transition:border-color .2s,box-shadow .2s}
.mfd.focus{border-color:#1a9be0;box-shadow:0 0 0 calc(3*var(--u)) rgba(26,155,224,.22)}
.rtype:empty::before{content:attr(data-ph);color:#9ca3af}
.rtype.cur::after{content:"|";color:#1a9be0;margin-left:1px}
.mdone{position:absolute;left:0;right:0;top:calc(104*var(--u));text-align:center}
.mdone svg{width:calc(76*var(--u));height:calc(76*var(--u));display:block;margin:0 auto calc(16*var(--u))}
.mdone b{display:block;font-size:calc(24*var(--u));line-height:calc(32*var(--u));font-weight:700}
.mdone p{margin:calc(8*var(--u)) calc(34*var(--u)) 0;font-size:calc(14*var(--u));line-height:calc(21*var(--u));color:#4b5563}
.sel{background:#e6f4fd!important;border-color:#1a9be0!important}