/* Body */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=PT+Serif&display=swap');

/* Core Styles */
body { margin: 0; font-family: 'Montserrat', sans-serif; background: #FFF; line-height: 180% }
h1, h2 { line-height: normal; }
.content { margin-top: 80px; }
a, a:visited { color: #AE040C; text-decoration: underline; }
a:hover, a:active { color: #AE040C; text-decoration: none; }
.clear { clear: both; }
a.button { background: #AE040C; display: inline-block; padding: 6px 16px; border-radius: 5px; color: #FFF; text-decoration: none; }
a.button:hover { background: #87040A; transition:.5s; }
a.button:focus-visible { background: #FFF; color: #AE040C; outline-color: #AE040C; }
/* Prevent anchor links from being hidden by header when navigated to via URL(#) */
a[id], a[name] { scroll-margin-top: 100px; }

/* Header */
#fixedHeader { position: fixed !important; top: 0; }
.container.header { background: #EEE; width: 100%; z-index: 100; box-shadow: 0 5px 15px 0 rgba(0,0,0,.1); position: relative; border-top: 3px solid #AE040C; }
.sticky { position: fixed !important; top: 0; }
#header { height: 80px; color: #AE040C; }
#districtLogo { float: left; }
#districtLogo img { width: auto; max-height: 60px; margin: 10px 0; float: left; }
#navigation { float: right; height: 45px; }
#quickLinks { text-align: right; width: 500px; height: 35px; line-height: 35px; font-size: 13px; float: right; }
.primaryQL a { color: #2D3039; text-decoration: none; margin: 0 10px 0 5px; }
.primaryQL a i { margin-right: 5px; }

/* Header - Alert */
.alert { background: #B12825; color: #FFF; padding: 10px 10px; text-align: center; font-size: 18px; font-weight: 700; border-bottom: 1px solid #D53834; }
.alert a, .alert a:hover, .deptAlert a, .deptAlert a:hover { color: #FFF; }
.alert a, .alert a:hover { text-decoration: none; }
.alertButton { background: rgba(255,255,255,.2); padding: 0 10px; margin-left: 10px; display: inline-block; }
.deptAlert { background: #B12825; color: #FFF; padding: 1px 0; }
.deptAlertContent { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; }
.deptAlertContent h3 { margin: 0; }

/* Navigation */
#navigation ul { list-style: none; position: relative; margin: 0; padding: 0; }
#navigation ul li { position: relative; float: left; line-height: 25px; text-align: center;  color: #AE040C; }
#navigation ul li:hover a { color: #2D3039; }
#navigation ul a, #navigation ul span { display: inline-block; text-decoration: none; font-size: 16px; font-weight: 700; padding: 10px 5px 10px 10px; }
#navigation ul ul { display:none; position:absolute; top:100%; left:0; background: #EEE; padding:0; z-index: 1000; }
#navigation ul ul li { width: 100%; background: none; }
#navigation ul ul li:hover { background: none; }
#navigation ul ul a { width: 180px; text-transform: none; height: auto; line-height: 18px;  text-align: left; padding: 7.5px 10px; font-size: 13px; font-weight: 400; }
#navigation ul ul a:hover { background: #2D3039; color: #FFF; transition: color 0.1s linear, background-color 0.1s linear; -moz-transition: color 0.1s linear, background-color 0.1s linear; -webkit-transition: color 0.1s linear, background-color 0.1s linear; }
#navigation ul li:hover > ul, #navigation ul li.has-submenu.open ul, #navigation ul li a:focus + ul { display:block; }
.slicknav_menu, .navQuickLinks { display: none; }
#navigation ul ul.rightNav { left: -126px; }
#navigation ul li button { display: inline; padding: 0; width: 15px; border: 0; }
#navigation ul li button span { padding: 10px 0 10px 5px; color: #AE040C; }
#socialLinks { display: none; }
.alumni { background: #AE040C; color: #FFF; margin-left: 5px; }

.js-hamburger-menu { display: none; }

/* Page Headers */
.pageHeader { background: #AE040C; }
#pageHeader { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; padding: 50px 0; }
#pageHeader h1 { color: #FFF; margin: 0; }
#pageHeader a { display: inline-block; background: #FFF; color: #AE040C; text-decoration: none; font-size: 14px; line-height: 18px; font-weight: 700; padding: 1px 4px; }

/* Content Page Alerts */
.contentAlert { background: #000000; width: 100%; padding: 20px 0; color: #FFFFFF; font-size: 18px; line-height: 28px; }
.contentAlertContent { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; }
.contentAlertContent h2:first-child, .contentAlertContent h3:first-child, .contentAlertContent p:first-child { margin-top: 0; }
.contentAlertContent p:last-child { margin-bottom: 0; }

/* Content */
.pageContent { width: calc(100% - 40px); padding: 20px; max-width: 1440px; margin: 0 auto; }
.pageContent img, .pageContent figure { max-width: 100%; height: auto !important; }
.pageIntro { font-size: 20px; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #EEE; }
.pageContent p:first-child, .pageContent h2:first-child, .pageContent.alumniPage h3:first-child, .pageContent.alumniPage h3:nth-child(2) { margin-top: 0; }
.pageContent p:last-child { margin-bottom: 0; }

@media screen and (max-width: 600px) { 
  .pageContent img { display: block; margin: 0 auto 10px; float: none !important; }
}

/* Homepage */
#rotator.rotator { position: relative; padding: 0; width: 100%; height: 45vh; max-width: 100%; overflow: hidden; }
#rotator.rotator > .rotator__video { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; }
#rotator.rotator > .rotator__video-overlay { position: relative; width: 100%; height: 100%; z-index: 2; background: rgba(255,255,255,0.1); color: #FFF; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 24px; text-shadow: 0 0 5px #000; letter-spacing: 3px; }
#rotator.rotator > .rotator__video-overlay h1 { margin: 10px 0 0; letter-spacing: 2px; line-height: 1em; }
#rotator.rotator > .rotator__video-overlay > .rotator__video-text { position: absolute; bottom: 30px; left: 0; text-align: center; width: 100%; }
#rotator.rotator > .rotator__video-overlay > .rotator__video-label { position: absolute; bottom: 30px; right: 30px; text-align: right; text-transform: capitalize; letter-spacing: 0; font-weight: 400; font-size: 18px; }

.trending { display: flex; flex-wrap: wrap; width: 100%; max-width: 1480px; margin: 20px auto; }
.trendingIcon { width: 16.666%; text-align: center; font-weight: 700; font-size: 15px; line-height: 23px; }
.trendingIcon a { text-decoration: none; display: block; padding: 25px 5px; }
.trendingIcon a i { font-size: 60px; line-height: 70px; }
.trendingIcon:hover { background: #EEE; transition: 1s; }
.trendingIcon:hover a { color: #2D3039; transition: 1s; }

.columnContentContainer { width: 100%; background-color: #EEE; background-image: linear-gradient(to right, #EEE, #EEE, #EEE, #E6E6E6, #E6E6E6, #E6E6E6); }
.columnContent { width: 100%; display: flex; max-width: 1480px; margin: 0 auto; flex-wrap: wrap; }
.columnLeft { width: calc(50% - 40px); padding: 20px; background: #EEE; }
.columnLeft h3, .columnRight h3, .columnLeft h2, .columnRight h2 { margin: 0 0 1em; text-transform: uppercase; font-size: 20px; line-height: 30px; }
.columnRight h3, .columnLeft h2 { margin: 0; }
.columnRight img { margin: 10px 0; }
.columnRight { width: calc(50% - 40px); padding: 20px; background: #E6E6E6; }

.contentColumns { display: flex; flex-wrap: wrap; }
.leftContent { width: calc(100% - 350px); }
.rightContent { width: 310px; padding: 20px; margin: -20px 0; background: #F6F6F6; }
.rightContent h3:first-child, .rightContent h2:first-child { margin-top: 0; }
@media screen and (max-width: 800px) {
  .leftContent { width: 100%; }
  .rightContent { width: calc(100% + 40px); margin: 0 -20px -20px; }
}

.columnLeftNews { margin-bottom: 15px; }
.columnLeftNews a.newsLink { display: inline-block; font-weight: 700; font-size: 16px; }
.columnLeftNews .newsDate { font-size: 15px; line-height: 23px; }
.columnLeft a.moreLink { background: #AE040C; color: #FFF; display: inline-block; text-decoration: none; padding: 1px 6px; border-radius: 5px; font-weight: 700; margin-top: 10px; }

.columnRight a.alumniHeadline { font-family: 'PT Serif', serif; font-weight: 700; display: block; font-size: 18px; line-height: 30px; }

.homeCalendar { width: calc(100% - 40px); max-width: 1440px; margin: 50px auto; display: flex; flex-wrap: wrap; }
.homeCalendar h2 { width: 100%; margin: 0 0 20px; text-align: center; text-transform: uppercase; font-size: 20px; line-height: 30px; }
.homeDate { width: calc(25% - 15px); margin: 0 20px 0 0; background: #F6F6F6; }
.homeDate.last { margin: 0; }
.calendarDate { padding: 2px 10px; background: #AE040C; color: #FFF; font-weight: 700; }
.calendarEvent { padding: 10px 10px 0; font-size: 14px; line-height: 24px; }
.calendarLinks { width: 100%; text-align: center; margin: 20px 0 0; }
.calendarLinks a.moreLink { background: #AE040C; color: #FFF; display: inline-block; text-decoration: none; padding: 1px 6px; border-radius: 5px; font-weight: 700; }

.fastFactsContainer { margin: 20px 0 0; background: #F6F6F6; width: 100%; }
.fastFactsContainer h3, .fastFactsContainer h2 { text-align: center; padding: 30px 0; margin: 0; text-transform: uppercase; font-size: 20px; line-height: 30px; width: 100%; }
.fastFacts { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; padding: 0 0 20px; display: flex; flex-wrap: wrap; }
.fastFact { width: calc(25% - 20px); text-align: center; padding: 10px; }
.fastFact img { width: 100%; height: auto; }

/* Modules - Alumni Profiles and Classes */
.pageContent.alumniClass h2 { margin-top: 0; }
.alumniList { width: calc(60% - 20px); float: left; }
img.alumniPhoto { width: 50%; float: right; margin: 0 0 10px 10px; }
input[type="text"].searchGraduates { width: calc(100% - 30px); }
.graduate { border-bottom: 1px solid #EEE; padding: 4px 0; }
a.classPhoto { text-align: center; display: block; }
.alumniButton { display: inline-block; background: #AE040C; color: #FFF; text-decoration: none; font-weight: 700; padding: 0 5px; border-radius: 5px; margin: 5px 0 0; }

/* Modules - Calendar */
.widgetEventBox { width: calc((100% - 170px) / 5); padding: 10px 12px 10px; margin: 0 10px 0 0; background: #FFF; color: #000; float: left; font-size: 12px; line-height: 19px; border-radius: 5px; border: 1px solid #DDD; }
.widgetEventBox.boxNo5 { margin: 0; }
.widgetEventBox:hover { background: #F6F6F6; }
h3.widgetEventHeader a { display: block; text-decoration: none; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; padding: 0 0 5px; border-bottom: 1px solid #22336B; }
.widgetDate { display: block; font-weight: 700; font-size: 14px; text-align: center; }
.widgetEvent { display: block; margin: 12px 0 0; color: #666; }
.widgetEvent a { color: #AE040C; text-decoration: none; font-weight: 700; }
.widgetEvent a.mapLink { color: #AE040C; margin-left: 2px; }
.calEventBox { width: calc(1420px / 7); padding: 5px; background: #FFF; font-size: 12px; line-height: 19px; }
.calEventBox.box0 { margin-left: 0; }
.calEventBox:hover { background: #F6F6F6; padding: 4px; border: 1px solid #AE040C; }
.calDate { display: block; border-bottom: 1px dotted #BBB; font-weight: 700; }
.calEvent { display: block; margin: 15px 0 0; }
.calEvents { min-height: 100px; }
.calDivider { clear: both; height: 20px; }
.headerBox, .headerBox:hover { background: #AE040C; color: #FFF; font-weight: 700; padding: 5px; border: 0; }
.emptyBox, .emptyBox:hover { background: #EEE; padding: 5px; border: 0; }
.calRow { display:flex; border-spacing: 1px; }
#calendarHeader h2 { float: left; }
.nextMonth { float: right; line-height: 31px; margin: 17px 0 0; width: 300px; text-align: right; }
.nextMonth a, #calendarFooter a { text-decoration: none; }

#calendarFooter { width: 100%; margin: 17px 0; padding: 17px 0 0; border-top: 1px solid #EEE; }
#calendarFooter .nextMonth { margin: 0; line-height: 22px; }
#calendarFooter { width: 100%; display: flex; flex-wrap: wrap; }
#calendarFooter .leftMonth { width: 33.3%; text-align: left; }
#calendarFooter .centerMonth { width: 33.3%; text-align: center; }
#calendarFooter .rightMonth { width: 33.3%; text-align: right; }

/* Modules - Columns */
.pageColumn { display: flex; flex-wrap: wrap; margin: -20px 0; }
.pageColumnLeft { width: calc(100% - 520px); margin-right: 20px; padding-top: 20px; }
.pageColumnLeft h3:first-child { margin-top: 0; }
.pageColumnRight { width: 460px; padding: 20px; background: #EEE; }
.pageColumnRight h3:first-child { margin-top: 0; }

/* Modules - Directory */
.directorySearch { margin: 0 0 1em; }
.directoryMin { min-height: 500px; }
.directorySearch input { font-family: 'Montserrat'; padding: 4px 6px; border: 1px solid #2D3039; width: calc(100% - 14px); font-size: 16px; }
.grid:after { content: ''; display: block; clear: both; }
.grid-item, .grid-sizer { width: calc(25% - 20px); }
.districtDirectory .grid-item { width: calc(100% / 2) !important; }
.grid-item b { font-size: 16px; line-height: 28px; }
.grid-item { float: left; height: 420px; font-size: 14px; line-height: 22px;  }
.grid-item--header { width: calc(100% - 20px); font-size: 20px; font-family: 'Roboto Slab', serif; height: 50px; line-height: 50px; border-bottom: 1px solid #CCC; margin-bottom: 10px; }
.grid-staff { text-align: center; }
.staff-photo { width: 240px; height: 240px; text-align: center; margin: 5px auto; display: block; background: #EEE; color: rgba(225, 55, 56, 0.2); font-size: 100px; line-height: 240px; border-radius: 5px; overflow: hidden; }
.staff-photo img { width: 240px; height: auto; margin: -20px 0 0 0; }
.staff-photo .fa { line-height: 240px; }
.staff-icons { display: block; margin: 10px auto 0; padding-top: 10px; border-top: 1px dotted #CCC; width: 225px; }
.staff-icons a:hover { color: #222; }
.staff-icons i { margin: 0 5px; }
.grid-email { font-size: 13px; }
.dirDivider h2 { color: #AE040C; margin: 2em 0 1em !important; font-size: 22px; }
.dirListItem { padding: 5px 9px; background: #F4F5F7; }
.dirSecondary { background: #FFF; }
.dirDetail { float: left; width: 25%; }
.dirEmail { width: 35%; text-align: center; }
.dirPhone { width: 15%; text-align: right; }
.listHidden { display: none; }

/* Modules - Jobs */
a.jobButton { display: inline-block; padding: 3px 7px; margin: 15px 0 0; background: #AE040C; color: #FFF; font-weight: 700; }
a.jobButton i { margin-left: 7px; text-decoration: none; }

/* Modules - News */
p.date { font-size: 14px; line-height: 22px; }
#newsPhoto.full img { margin: 0 auto; display: block; width: 600px; }
#newsPhoto.right { float: right; margin: 0 0 10px 10px; width: 300px; }

/* Modules - Videos */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Footer */
.container.subFooter { background: #2D3039; }
.container.mission { background: linear-gradient(rgba(174, 4, 14, 0.85), rgba(174, 4, 14, 0.75)), url(/images/2020/elementary_school.jpg); background-size: cover; background-position: center center; }
#mission { text-align: center; padding: 80px 20px; margin: 0 auto; width: 840px; font-weight: 700; font-size: 24px; color: #FFF; line-height: 38px; }
#testimonial { text-align: center; padding: 40px 20px; margin: 0 auto; width: calc(100% - 40px); max-width: 1400px; font-weight: 700; font-size: 20px; color: #FFF; line-height: 34px; }
.testimonialQuote { margin: 0 0 20px; font-size: 40px; line-height: 54px; }
.testimonialInfo { margin: 20px 0 0; font-size: 16px; line-height: 30px; }

#credit { background: #DDD; color: #000; font-size: 12px; line-height: 30px; padding: 5px 10px; width: calc(100% - 20px); text-align: center; }
#credit .container { width: 100%; max-width: 1440px; margin: 0 auto; }
#credit .copyright { width: calc(100% - 200px); float: left; text-align: left; }
#credit .poweredBy { width: 200px; float: right; text-align: right; }
#credit .poweredBy a { color: #000; text-decoration: none; }
#credit img { height: 30px; width: auto; margin: 0 0 0 10px; vertical-align: middle; border: none; }

/* Hall of Fame */

.hallOfFame { width: calc(100% + 20px); margin: 0 -10px; display: flex; flex-wrap: wrap; }
.hallOfFame h2 { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
.hallMember { width: 100%; display: flex; margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid #AE040C; }
.hallMember h3 { margin: 0 0 5px; }
.hallMember .hallImage { width: 300px; margin: 10px; }
.hallMember .hallImage img { width: 100%; }
.hallInfo { width: calc(100% - 340px); margin: 10px; }

@media screen and (max-width: 800px) { 
  .hallMember { flex-wrap: wrap; }
  .hallInfo { width: calc(100% - 20px); margin: 10px; }
}

/*

-----

Screen Sizes

-----

*/

@media screen and (max-width: 1120px) {
.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; }
.grid-item, .grid-sizer { width: calc((100% / 3) - 20px); }
.pageColumnLeft { width: calc(100% - 420px); }
.pageColumnRight { width: 360px; }
}

@media screen and (max-width: 1320px) {
  li.homeLink { display: none; }
}

@media screen and (max-width: 1230px) {
  #navigation { display: none; }
  #quickLinks { width: 100%; height: 21px; }
  #quickLinks a { margin: 0; }
  .primaryQL { display: none; }
  #districtLogo { position: absolute; }
  #mission { width: calc(100% - 100px); }
  #socialLinks { display: block; position: absolute; width: 40px; line-height: 80px; text-align: center; font-size: 24px; right: 140px; }
  #socialLinks a { color: #2D3039; }
  #socialLinks a:hover { color: #AE040C; }
  #socialLinks i { margin: 0 5px; }
  .trending { max-width: 900px; }
  .trendingIcon { width: 33.333%; }
  .grid-item, .grid-sizer { width: calc((100% / 2) - 20px); }
  .columnLeft, .columnRight { width: calc(100% - 40px); }
  .homeDate { width: calc(50% - 10px); margin-bottom: 20px; }
  .homeDate.even { margin: 0; }
  /* Modules - Alumni Profiles */
  img.alumniPhoto { width: 100%; float: none; margin: 0; }
  .js-hamburger-menu { display: block; float: right; }

  .hamButton {
    border: 2px solid;
    background-color: transparent;
    align-items: center;
    border-radius: 5px; 
    padding: 6px 10px;
    display: flex;
    gap: 10px;
    color: white;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
  }

  .hamButton--transparent {
    border-color: #AE040C;
    background-color: transparent;
    color: #AE040C;
  }

  .hamButton--red {
    border-color: #AE040C;
    background-color: #AE040C;
  }

  .hamButton--red:hover,
  .hamButton--red:focus {
    background-color: #2D3039;
    border-color: #2D3039;
  }

  .hamButton--transparent:hover,
  .hamButton--transparent:focus {
    border-color: #AE040C;
    background-color: #AE040C;
    color: white;
  }

  .hamButton__icon {
    height: 17px;
  }

  .hamButton__text {
    font-size: 1rem;
    font-weight: 700;
  }

  .hamburger-dropdown {
    position: absolute;
    z-index: 4;
    top: 80px;
    left: 0;
    right: 0;
    background-color: #AE040C;
    overflow-y: scroll;
    height: calc(100vh - 80px);
  }

  .hamburger-dropdown[aria-hidden="true"] {
    display: none;
  }

  .hamburger-dropdown a {
    text-decoration: none;
    font-size: 1.5rem;
  }

  .hamburger-dropdown a:hover {
    text-decoration: underline;
  }

  .hamburger-dropdown a:focus-visible, 
  .hamburger-dropdown button:focus-visible {
    outline: 2px solid #fff;
  }

  .hamburger-dropdown__toggle {
    background-color: transparent;
    margin-left: 10px;
    transition: transform 150ms;
    border: none;
    cursor: pointer;
  }

  .hamburger-dropdown__toggle[aria-expanded="true"] {
    transform: scaleY(-1);
  }

  .hamburger-dropdown__list {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .hamburger-dropdown__list-item {
    list-style-type: none;
    text-align: center;
    color: white;
  }

  .hamburger-dropdown__list-item > a {
    color: white;
    font-weight: 700;
  }

  .hamburger-dropdown__submenu {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .hamburger-dropdown__submenu[aria-hidden="true"] {
    display: none;
  }

  .hamburger-dropdown__submenu > li {
    list-style-type: none;
    text-align: center;
    color: white;
  }

  .hamburger-dropdown__submenu a {
    color: white;
  }

}

@media screen and (max-width: 870px) {
  .pageColumnLeft { width: 100%; margin-right: 0; }
  .pageColumnRight { width: calc(100% - 40px); }
}

@media screen and (max-width: 700px) {
  .widgetEventBoxes { width: 100%; margin: 0; }
  .widgetEventBox { width: calc(100% - 26px); margin: 0 0 10px 0; }
  #calendarFooter .leftMonth, #calendarFooter .rightMonth { width: 50%; }
  #calendarFooter .centerMonth { display: none; }
  .fastFact { width: calc(50% - 20px); }
}

@media screen and (max-width: 640px) {
  .grid-item, .grid-sizer { width: 100%; }
  .trending { max-width: 600px; }
  .trendingIcon { width: 50%; }
  .trendingIcon a { padding: 15px 0; }
}

@media screen and (max-width: 520px) {
  #socialLinks { display: none; }
  .homeDate, .homeDate.last, .homeDate.even { width: 100%; margin: 0 0 20px; }
  img.topWorkplaces { display: none; }
}

@media screen and (max-width: 440px) {
  #quickLinks { height: 11px; }
  #header { width: calc(100% - 20px); height: 60px; }
  .content { margin-top: 60px; }
  #districtLogo img { max-height: 50px !important; margin: 5px 0; }
  .slicknav_btn { margin: 9.5px 0 9.5px 0 !important; }
  .fastFact { width: 100%; }

  .hamburger-dropdown { top: 60px; height: calc(100vh - 60px); }
}

/* Accessibility */
.no-display, .visuallyhidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }

a.skip-to-content-link { background: #AE040C; height: 30px; left: 10px; padding: 4px; position: absolute; transform: translateY(-123px); transition: transform 0.3s; z-index: 1000; color: #FFF; }

a.skip-to-content-link:focus { transform: translateY(-77px); }