.pageHeaderContainer { background-size: cover; background-position: center center; }
#sectionHeader { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; padding: 16% 0 20px; }
@media screen and (max-width: 1250px) { 
  #sectionHeader { padding-top: 200px; }
}

.sectionParent a { color: #7ED1E1; text-transform: uppercase; font-weight: 700; font-size: 22px; text-decoration: none; position: relative; }
.sectionParent a::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -2px; left: 0; background-color: #7ED1E1; transform-origin: bottom right; transition: transform 0.5s ease-out; }
.sectionParent a:hover::after { transform: scaleX(1); transform-origin: bottom left; }
#sectionHeader h1 { margin: 5px 0 0; color: #FFF; }
#sectionHeader h1 a { color: #FFF; }

.pageAlertContainer { background: #70302D; color: #FFFFFF; padding: 20px 0; font-size: 18px; }
.pageAlert { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; }
.pageAlert .alertHeader { font-size: 22px; font-weight: 700; }
.pageAlert a { color: #FFFFFF; }
.pageAlert p:first-child { margin-top: 0; } 
.pageAlert p:last-child { margin-bottom: 0; } 

/* Content Pages - with No Navigation */
#standardPage { width: calc(100% - 40px); max-width: 1440px; margin: 20px auto 0; }
#standardPage img, #servicePage img, .departmentContent img { max-width: 100%; height: auto; }
#standardPage figure, #servicePage figure, figure { max-width: 100%; margin: 10px 0 10px 10px; height: auto;  }
figure img { margin: 0 !important; }
figcaption { font-size: 15px; line-height: 24px; }

.pageIntro, .standardPageIntro { font-size: 22px; line-height: 36px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ECF7FA; }

/* Content Pages - with Left Navigation */
#standardPageNav { display: flex; flex-wrap: wrap; width: 100%; max-width: 1440px; margin: 0 auto; }
.standardPageFull { width: calc(100% - 40px); padding: 40px 20px 20px; }
.standardPageNav { width: 320px; background: #ECF7FA; padding: 20px 0 0; }
.standardPageNav h3 { margin: 20px; color: #0B0407; font-size: 22px; }
.standardPageNav h3:first-child { margin-top: 0; }
.standardPageNav a { display: block; padding: 8px 20px; text-decoration: none !important; font-size: 17px; cursor: pointer; color: #0B0407; }
.standardPageNav a i { text-decoration: none; margin-right: 8px; }
.standardPageDetail { width: calc(100% - 360px); padding: 20px; }
.standardPageNav a.activebtn { background: #7ED1E1 !important; font-weight: 700; color: #0B0407; }
.standardPageNav a:hover { background: #7ED1E1; }

/* Content Pages - with Two Columns */
.contentColumns { display: flex; flex-wrap: wrap; margin: -20px; }
.contentLeft { width: calc(100% - 380px); margin-right: 20px; padding: 30px 0 20px 20px; }
.contentLeft h2:first-child, .contentLeft h3:first-child { margin-top: 0; }
.contentLeft img { margin: 1em 0 0; }
.contentRight { width: 300px; background: #ECF7FA; padding: 20px; font-size: 16px; line-height: 27px; }
.contentRight h2:first-child, .contentRight h3:first-child, .contentRight p:first-child { margin-top: 0; }
.contentRight ul, .contentRight ol { padding-inline-start: 30px; }

/* Forms */
#contactForm i { font-style: normal; color: #70302D; font-weight: 700; }
#contactForm ol { margin: 0; list-style-type: none; padding: 0; }
#contactForm ol label { display: block; font-size: 15px; line-height: 24px; font-weight: 700; }
#contactForm ol li .checkboxGroup { margin-bottom: 0.5em; }
#contactForm ol input[type="text"], #contactForm ol input[type="text"], #contactForm ol input[type="email"], #contactForm ol input.form-input, #contactForm ol input[type="date"] { font-family: 'Lato', sans-serif; font-size: 16px; width: 100%; padding: 5px; border: 1px solid #0F1910; margin-bottom: 1em; box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
#contactForm ol input[type="date"] { padding: 4px 5px; }
#contactForm ol select { font-family: 'Lato', sans-serif; font-size: 16px; width: 100%; padding: 5px; border: 1px solid #0F1910; margin-bottom: 1em; }
#contactForm ol textarea { font-family: 'Lato', sans-serif; font-size: 16px; width: 100%; padding: 5px; border: 1px solid #0F1910; margin-bottom: 1em; }
#contactForm input[type="submit"] { font-family: 'Lato', sans-serif; font-size: 16px; color: #0F1910; border: 0; background: #7ED1E1; padding: 7px 12px; margin: 1em 0 0; cursor: pointer; display: inline-block; font-weight: 700; border-radius: 5px; }

#contactForm li.width50 { width: 49%; float: left; margin-right: 1%; }
#contactForm li.width40 { width: 39%; float: left; margin-right: 1%; }
#contactForm li.width33 { width: 32.3%; float: left; margin-right: 1%; }
#contactForm li.width30 { width: 29%; float: left; margin-right: 1%; }
#contactForm li.width25 { width: 24%; float: left; margin-right: 1%; }
#contactForm li.width20 { width: 19%; float: left; margin-right: 1%; }
#contactForm li.width50.right { width: 50%; margin-right: 0%; }
#contactForm li.width40.right { width: 40%; margin-right: 0%; }
#contactForm li.width33.right { width: 33.3%; margin-right: 0%; }
#contactForm li.width30.right { width: 30%; margin-right: 0%; }
#contactForm li.width25.right { width: 25%; margin-right: 0%; }
#contactForm li.width20.right { width: 20%; margin-right: 0%; }
#contactForm hr { margin-block-start: 10px; }

@media screen and (max-width: 720px) { 
  .contentLeft { width: calc(100% - 40px); margin: 0; padding: 20px 20px; }
  .contentRight { width: calc(100% - 40px); margin: 0; padding: 20px 20px 60px; }
}

@media screen and (max-width: 600px) {
  #contactForm li.width50, #contactForm li.width40, #contactForm li.width33, #contactForm li.width30, #contactForm li.width25, #contactForm li.width20, #contactForm li.width40.right, #contactForm li.width33.right, #contactForm li.width30.right, #contactForm li.width25.right, #contactForm li.width20.right {
    width: 100% !important;
    margin: 0 !important;
    float: none;
  }
}

/* Calendar */
.widgetEvent { display: block; margin: 12px 0 0; color: #666; }
.widgetEvent a { color: #0F1910; text-decoration: none; font-weight: 700; }
.widgetEvent a.mapLink { color: #0F1910; margin-left: 2px; }
.calEventBoxes { width: 100%; }
.calEventBox { width: calc(100% / 7); padding: 5px; background: #FFF; display: table-cell; font-size: 12px; line-height: 19px; }
.calEventBox.box0 { margin-left: 0; }
.calEventBox:hover, .calEventBox.calToday { background: #ECF7FA; padding: 4px; border: 1px solid #C4DD95; }
.calDate { display: block; border-bottom: 1px dotted #BBB; font-weight: 700; }
.calEvent { display: block; margin: 15px 0 0; }
.calEvents { min-height: 100px; }
.headerBox, .headerBox:hover { background: #C4DD95; color: #063C50; font-weight: 700; padding: 5px; border: 0; }
.emptyBox, .emptyBox:hover { background: #ECF7FA; padding: 5px; border: 0; }
.calRow { display:table; border-spacing: 1px; width: 100%; }
#calendarHeader { width: 100%; margin: 1em auto; }
#calendarHeader h2 { float: left; width: auto; margin: 0; }
.nextMonth { float: right; line-height: 31px; margin: 5px 0 0; width: 300px; text-align: right; }
.nextMonth a, #calendarFooter a { text-decoration: none; }
.lastMonth { float: left; line-height: 22px; margin: 0; width: 150px; }
#calendarFooter { width: 100%; margin: 17px 0 34px; padding: 17px 0 0; border-top: 1px solid #ECF7FA; }
#calendarFooter .nextMonth { margin: 0; line-height: 22px; }
.event-overlay { width: 600px; max-width: 100%; }


/* Cities Page */

#communities { display: flex; flex-wrap: wrap; margin: -10px; width: calc(100% + 20px); }
.city { width: calc(33.3% - 20px); margin: 10px 10px 30px; }
.cityImage { width: 100%; background: #ECF7FA; background-position: center center !important; background-size: cover !important; }
.cityImage.noLink { width: 100%; padding-bottom: 50% }
.cityImage a { width: 100%; display: block; padding-bottom: 50%; }
.cityImage.withPhoto a { padding-bottom: calc(50% - 3px); border-bottom: 3px solid #063C50; }
.cityDetail { padding: 10px; font-size: 15px; line-height: 22px; min-height: 125px; }
.cityDetail.schoolDistrict { min-height: auto; }
.cityDetail h3 { margin: 0 0 5px; font-size: 24px; line-height: 30px; }
.cityLink { width: 25%; float: left; text-align: center; font-size: 14px; line-height: 22px; font-weight: 700; }
.cityLink3x { width: 33.3%; }
.cityLink2x { width: 50%; }
.cityLink1x { width: 100%; }
.cityLink a { text-decoration: none; display: block; padding: 13px 0 5px; }
.cityLink a:hover { background: #063C50; color: #FFF; }
.cityLink a i { display: block; margin: 0 0 2px; font-size: 20px; }

@media screen and (max-width: 1000px) {
  .city { width: calc(50% - 20px); }
}
@media screen and (max-width: 700px) { 
  .city { width: 400px; margin: 0 auto 30px; }
  .cityDetail { min-height: auto; }
}

@media screen and (max-width: 900px) { 
  .calRow { display: block; width: 100%; border-spacing: 0; }
  .calEventBox { width: calc(100% - 10px); display: block; margin-bottom: 10px; }
  .calEvents { min-height: 0; }
  .headerBox, .emptyBox { display: none !important; }
  /* Events Widget */
  .widgetEventBox { width: calc((100% - 134px) / 4); }
  .widgetEventBox.boxNo4 { margin: 0; }
  .boxNo5 { display: none; }
}

@media screen and (max-width: 840px) { 
  .standardPageNav.navCollapse, #myBtnContainer { display: none; }
  #myBtnContainer.filterContainer { display: block; }
  .standardPageDetail.navCollapse, .officialDetails { width: 100%; }
}

/* Bid Notices */

.bidNotice h2 { font-size: 24px; line-height: 32px; }

/* Job Listings */

.jobListing h2 { font-size: 24px; line-height: 32px; }
.jobListing { margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid #ECF7FA; }
.jobListing.last { border-bottom: 0; margin-bottom: 0; }
p.jobListingIntro { text-align: center; }
.jobListingDetail { font-family: 'Lato', sans-serif !important; max-width: 600px; margin: 0 auto; display: block; width: calc(100% - 20px); padding: 10px; box-shadow: 0 0 10px rgba(15, 25, 16, .4); font-size: 16px !important; line-height: 24px !important; }
.jobListingDetail p:first-child { margin-top: 0 !important; }
.jobListingDetail p:last-child { margin-bottom: 0 !important; }
.jobListingDetail p span, .jobListingDetail p span span, .jobListingDetail p span span span, .jobListingDetail table tbody tr td span { font-family: 'Lato', sans-serif !important; font-size: 16px !important; line-height: 24px !important; }
.jobListingDetail table tbody tr td { padding: 5px 0 0 !important; }

/* Contact Page */

.contactInfo { margin: 0 0 30px; }
.contactHeader { padding: 5px 10px; margin: 1em 0 0; border-bottom: 2px solid #063C50; }
.contactHeader h2 { margin: 0; line-height: 1.5em; }
.contactHeader h2 a { color: #063C50; text-decoration: none; display: block; }

.staffGrid, .contactDetails { font-size: 14px; line-height: 22px; }
.contactDetails { padding: 10px; }

.staffGrid { width: 100%; display: flex; flex-wrap: wrap; }
.staffEntry { width: calc(25% - 20px); margin: 5px 5px 15px; padding: 5px; background: #ECF7FA; position: relative; }
.staffEntry::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -2px; left: 0; background-color: #063C50; transform-origin: bottom right; transition: transform 0.5s ease-out; }
.staffEntry:hover { background: #7ED1E1; transition: 0.5s; }
.staffEntry:hover::after { transform: scaleX(1); transform-origin: bottom left; }

@media screen and (max-width: 1200px) {
  .staffEntry { width: calc(33.3% - 20px); }
}
@media screen and (max-width: 900px) {
  .staffEntry { width: calc(50% - 20px); }
}
@media screen and (max-width: 600px) {
  .staffEntry { width: calc(100% - 20px); margin: 5px; border: 0; }
}