/* @group About
------------------------------------ */
.page-about .large-header { background: rgba(0,100,163,1); margin-bottom: 6.4rem; }
.page-about .large-header h1 { color: rgba(241,201,119,1); font-weight: 300; }
.page-about .large-header h1 em { color: rgba(255,255,255,1); }
.about-main { margin: 0 0 2.6rem; }
.about-main h2 { color: rgba(26,46,87,1); font-size: 3.6em; font-weight: 800; line-height: 1.5em; margin: 0 0 2rem; }
.about-main p { color: rgba(0,100,163,1); font-size: 1.6em; letter-spacing: 0.77px; line-height: 2.5em; max-width: 80rem; margin: 0 auto 2.5em; }
.about-main p:last-child { margin: 0 auto; }
/* Hold & Drag
----------------------*/
.drag-slider { background: linear-gradient(to bottom, rgba(255,255,255,1) 33rem, rgba(237,248,251,1) calc(100% - 33rem));  padding-top: 14.1rem; margin: 0 0 10.9rem; }
.drag-slider .control { margin-bottom: 8rem; }
.page-about .drag-slider .instructions { top: 23rem; }
/* Banner Image
----------------------*/
.banner-with-background { margin: 0 0 7.6rem; position: relative; }
.banner-with-background .img-box { height: 68.8rem; }
.banner-with-background .box { background-color: rgba(255,255,255,1); box-shadow: 0 2px 11px 0 rgba(176,176,176,0.5); padding: 9.5rem 4.5rem; }
.banner-with-background .box h2 { color: rgba(26,46,87,1); font-size: 3.6em; font-weight: 800; margin: 1.5em; margin: 0 0 2rem; }
.banner-with-background .box p { color: rgba(0,100,163,1); font-size: 1.6em; letter-spacing: 0.021em; line-height: 2.575em; margin: 0 0 4rem; }
/* Improvement District
----------------------*/
.improvement-district { margin: 0 0 11.6rem; }
.improvement-district .img-box { height: 46.2rem; }
.improvement-district h2 { color: rgba(22,45,90,1); font-size: 3.6em; font-weight: 800; line-height: 1em; margin: 0 0 1em; }
.improvement-district p,
.improvement-district li { color: rgba(0,100,163,1); font-size: 1.6em; letter-spacing: 0.77px; line-height: 2.575em; }
.improvement-district li a,
.improvement-district p a { color: rgba(0,100,163,1); }

.improvement-district ol li { list-style: decimal outside none; }
.improvement-district ul li { text-indent: -.7em; padding-right: .7em; }
.improvement-district ul li::before { content: '•'; padding-right: .7em; }
.improvement-district ol,
.improvement-district ul,
.improvement-district p { margin: 0 0 3.6rem; }
.improvement-district ol:last-child,
.improvement-district ul:last-child,
.improvement-district p:last-child { margin: 0; }
@media only screen
and (min-width : 961px) {
  .about-main {
    margin-top: 6.4rem;
  }
  .about-main h2,
  .about-main p { opacity: 0; visibility: hidden; }
  .about-main.animateActive h2,
  .about-main.animateActive p { animation: textUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
  .about-main.animateActive p { animation-delay: .4s; }
  .improvement-district a {margin-top: 2rem;}
  /* Hold & Drag
  ----------------------*/
  .drag-slider aside,
  .drag-slider article { opacity: 0; visibility: hidden; }
  .drag-slider.animateActive aside,
  .drag-slider.animateActive article { animation: sectionUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
  .drag-slider.animateActive article { animation-delay: .4s; }
  .drag-slider.animateActive article:nth-child(2) { animation-delay: .6s; }
  .drag-slider.animateActive article:nth-child(3) { animation-delay: .8s; }
  .drag-slider.animateActive article:nth-child(4) { animation-delay: 1s; }
  .drag-slider.animateActive article:nth-child(5) { animation-delay: 1.2s; }
  .drag-slider.animateActive article:nth-child(6) { animation-delay: 1.4s; }
  /* Banner Image
  ----------------------*/
  .banner-with-background { overflow: hidden; }
  .banner-with-background .box { -webkit-transform: translate3d(0,126%,0); transform: translate3d(0,126%,0); }
  .banner-with-background .box h2,
  .banner-with-background .box p,
  .banner-with-background .box img { opacity: 0; visibility: hidden; }
  .banner-with-background.animateActive .box { animation: fullUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
  .banner-with-background.animateActive .box h2,
  .banner-with-background.animateActive .box p,
  .banner-with-background.animateActive .box img { animation: textUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; animation-delay: .6s; }
  .banner-with-background.animateActive .box p { animation-delay: .8s; }
  .banner-with-background.animateActive .box img { animation-delay: 1.2s; }
  /* Improvement District
  ----------------------*/
  .improvement-district .img-box,
  .improvement-district h2,
  .improvement-district p,
  .improvement-district li,
  .improvement-district .bttn-container { opacity: 0; visibility: hidden; }
  .improvement-district.animateActive .img-box,
  .improvement-district.animateActive h2,
  .improvement-district.animateActive p,
  .improvement-district.animateActive li,
  .improvement-district.animateActive .bttn-container { animation: textUp .5s 1 cubic-bezier(0.4,0.0,0.2,1) forwards; }
  .improvement-district.animateActive h2 { animation-delay: .4s; }
  .improvement-district.animateActive p { animation-delay: .6s; }
  .improvement-district.animateActive li { animation-delay: .8s; }
  .improvement-district.animateActive .bttn-container { animation-delay: 1s; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
  .page-about .large-header { margin-bottom: 9.6rem; }
  .about-main { margin: 9.6rem 0 4.2rem; }
  .about-main article { padding: 0 5.4rem; }
  .about-main h2 { font-size: 5em; letter-spacing: 1.07px; line-height: 1.040em; margin: 0 0 1.4rem; }
  .about-main p { font-size: 2.6em; letter-spacing: 0.56px; line-height: 1.694em; max-width: none; margin: 0 0 1.694em; }
  /* District Map
  ----------------------*/
  .district-map { background: rgba(199,233,243,1); }
  /* Hold & Drag
  ----------------------*/
  .drag-slider { background: linear-gradient(to bottom, rgba(199,233,243,1) 44rem, rgba(255,255,255,1) 44rem ); padding-top: 0; margin: 0 0 10.2rem; }
  /* Banner Image
  ----------------------*/
  .banner-with-background { margin: 0 0 14.1rem; }
  .banner-with-background .img-box { overflow: visible; }
  .banner-with-background .outerAbsolute { position: relative; top: auto; right: auto; bottom: auto; left: auto; margin-top: -14.8rem; }
  .banner-with-background .outerAbsolute div { padding: 0 6.1rem; }
  .banner-with-background .box { padding: 6.3rem 4.7rem 7.7rem; }
  .banner-with-background .box h2 { font-size: 5em; letter-spacing: 1.07px; line-height: 1.040em; margin: 0 0 1.1rem; }
  .banner-with-background .box p { font-size: 2.6em; letter-spacing: 0.56px; line-height: 1.694em; margin: 0 0 4.1rem; }
  /* Improvement District
  ----------------------*/
  .improvement-district { margin: 0 0 15.7rem; }
  .improvement-district .img-box { height: 52.6rem; margin: 0 0 7.8rem; }
  .improvement-district h2 { font-size: 5em; letter-spacing: 1.07px; line-height: 1.040em; margin: 0 0 2em; }
  .improvement-district p,
  .improvement-district li { font-size: 2.6em; letter-spacing: 0.56px; line-height: 1.694em; }

  .improvement-district ol,
  .improvement-district ul,
  .improvement-district p { margin: 0 0 2.8rem; }
  .improvement-district .bttn { padding: 2.6rem 7.4rem 2.5rem; }
}
/* @end */
