@import url("/_resources/css/webfont.css");

/*

/_resources/js/script_25comm.js 
/_resources/js/topnav.js

/_resources/css/default.css
/_resources/css/stylesheet_25comm.css 
/_resources/css/topnav.css



*/

:root {
  /* district colors */
  --district-color: rgb(52, 169, 224);
  --district-light-color: rgb(160, 212, 238);
  --district-sec-orange: rgb(244, 124, 42);
  --district-sec-green: rgb(154, 203, 69);
  --district-grey: rgb(203, 204, 206);

  /* college colors */
  --city-color: rgb(190, 30, 45);
  --mesa-color: rgb(0, 84, 164);
  --miramar-color: rgb(30, 144, 151);
  --contEd-color: rgb(95, 54, 136);

  --default-animation: 0.25s all;
}

/*
 * General
 */

body {
  width: 100% !important;
}

main {
  display: block;
}

h1 {
  font-weight: 600;
}

h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  font-weight: 600;
}

a {
  color: #000;
  font-weight: 500;
}

a:not([class]),
dt > a {
  /* text-decoration: underline; */
  border-bottom: var(--district-color) 2px solid;
  font-size: 1.1rem;
  text-decoration: none;
}

a:not([class]):has(img) {
  border-bottom: none;
}

figcaption p {
  margin: 0;
}

table {
  width: 100%;
  border: #000 1px solid;
  border-collapse: collapse;
}

table a:not([class]) {
  text-decoration: underline;
  border-bottom: none;
}

table tr {
  display: table-row;
}

table td {
  min-width: auto;
  padding: 0.5rem 0.5rem;
  display: flex;
  border: #000 1px solid;
}

table thead tr:first-child td {
  display: table-cell;
}

table tbody td {
  display: table-cell;
}

strong,
b {
  font-weight: 600;
}

iframe {
  max-width: 100%;
}

i.nf {
  color: #000;
}

.blockContent {
  display: block;
}

.sr-only.hiddenHead {
  position: static;
}

.bg-district {
  background-color: var(--district-color);
}

.bg-district-light {
  background-color: var(--district-light-color);
}

.bg-district-green {
  background-color: var(--district-sec-green);
}

.bg-district-green {
  background-color: var(--district-sec-orange);
}

.bg-black {
  background-color: #000;
}

.bg-grey {
  background-color: var(--district-grey);
}

.border-district {
  border-color: var(--district-color);
}

.border-district-light {
  border-color: var(--district-light-color);
}

.border-district-green {
  border-color: var(--district-sec-green);
}

.border-district-orange {
  border-color: var(--district-sec-orange);
}

.bottom-accent-border {
  border-bottom-width: 15px;
  border-bottom-style: solid;
}

.top-accent-border {
  border-top-width: 15px;
  border-top-style: solid;
}

.right-accent-border {
  width: fit-content;
  display: block;
  float: right;
  margin-left: 1rem;
}

.left-accent-border {
  width: fit-content;
  display: block;
  float: left;
  margin-right: 1rem;
}

.right-accent-border img,
.left-accent-border img {
  width: revert-layer;
  object-fit: cover;
  transform: rotateZ(360deg);
}

.right-accent-border img {
  border-right-width: 15px;
  border-right-style: solid;
}

.left-accent-border img {
  border-left-width: 15px;
  border-left-style: solid;
}

.imgContent.border-district img {
  border-color: var(--district-color);
}

.imgContent.border-district-light img {
  border-color: var(--district-light-color);
}

.imgContent.border-district-green img {
  border-color: var(--district-sec-green);
}

.imgContent.border-district-orange img {
  border-color: var(--district-sec-orange);
}

.right-accent-border.float-left,
.left-accent-border.float-left {
  float: left;
  margin-right: 1rem;
}

.right-accent-border.float-right,
.left-accent-border.float-right {
  float: right;
  margin-left: 1rem;
}

.city-border-full {
  border-color: var(--city-color);
  border-style: solid;
}

.mesa-border-full {
  border-color: var(--mesa-color);
  border-style: solid;
}

.miramar-border-full {
  border-color: var(--miramar-color);
  border-style: solid;
}

.district-border-full {
  border-color: var(--district-color);
  border-style: solid;
}

.contEd-border-full {
  border-color: var(--contEd-color);
  border-style: solid;
}

.md-border {
  border-width: 7.5px;
}

a.button:not(.city, .mesa, .miramar, .contEd) {
  background: #000;
  color: #fff;
  border: #000 3px solid;
  transition: var(--default-animation);
  text-transform: uppercase;
  max-width: max-content;
  padding: 1rem;
}

a.button:not(.city, .mesa, .miramar, .contEd):hover {
  background: #fff;
  color: #000;
  border: #000 3px solid;
  transition: var(--default-animation);
}

a.button.primary {
  background: #000;
  color: #fff;
  border: #000 3px solid;
  transition: var(--default-animation);
  text-transform: uppercase;
  max-width: max-content;
}

a.button.primary:hover {
  background: #fff;
  color: #000;
  border: #000 3px solid;
  transition: var(--default-animation);
}

a.button.secondary {
  background: #fff;
  color: #000;
  border: #000 3px solid;
  transition: var(--default-animation);
  text-transform: uppercase;
  max-width: max-content;
}

a.button.secondary:hover {
  background: var(--district-light-color);
  color: #000;
  border: #000 3px solid;
  transition: var(--default-animation);
}

.positioner .imgcrop {
  position: relative;
  float: right;
  max-width: 50%;
  border: 8px solid #008a98;
  border-radius: 50%;
  overflow: hidden;
  width: 325px;
  margin-left: 1em;
  aspect-ratio: 1;
}

.positioner .imgcrop img {
  aspect-ratio: 1;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center center;
}

.positioner .imgcrop a img {
  aspect-ratio: 1;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center center;
}

a.arrow-link {
  color: #000;
  /* text-decoration: underline; */
  font-size: 1.1rem;
  border-bottom: none;
  max-width: max-content;
  transition: 0s;
  font-weight: normal;
}

a.arrow-link:hover {
  color: #000;
  font-weight: 600;
  transition: 0s;
}

a.arrow-link:after {
  color: #000;
  content: "\f0da";
  font-size: 1.2rem;
  margin: 0;
  margin-left: 3px;
}

a.arrow-link.alt {
  color: #000;
  /* text-decoration: underline; */
  font-size: 1.1rem;
  border-bottom: none;
  max-width: max-content;
  transition: 0s;
}

a.arrow-link.alt:hover {
  color: #000;
  font-weight: 600;
  transition: 0s;
}

a.arrow-link.alt:after {
  color: #000;
  content: "\f0142";
  font-size: 1rem;
  margin: 0;
  margin-left: 5px;
}

a.button.sm.primary.city {
  border: none;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
  display: flex;
  max-width: max-content;
  border-bottom: var(--city-color) 10px solid;
  background: #fff;
  color: #000;
  transition: var(--default-animation);
  box-shadow: rgb(240, 240, 240) 0px 0px 15px 7.5px;
}

a.button.sm.primary.city:hover {
  background: var(--city-color);
  color: #fff;
}

a.button.sm.primary.mesa {
  border: none;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
  display: flex;
  max-width: max-content;
  border-bottom: var(--mesa-color) 10px solid;
  background: #fff;
  color: #000;
  transition: var(--default-animation);
  box-shadow: rgb(240, 240, 240) 0px 0px 15px 7.5px;
}

a.button.sm.primary.mesa:hover {
  background: var(--mesa-color);
  color: #fff;
}

a.button.sm.primary.miramar {
  border: none;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
  display: flex;
  max-width: max-content;
  border-bottom: var(--miramar-color) 10px solid;
  background: #fff;
  color: #000;
  transition: var(--default-animation);
  box-shadow: rgb(240, 240, 240) 0px 0px 15px 7.5px;
}

a.button.sm.primary.miramar:hover {
  background: var(--miramar-color);
  color: #fff;
}

.twoButton {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

a.button.sm.primary.contEd {
  border: none;
  padding: 1.5rem 2rem;
  flex-wrap: wrap;
  display: flex;
  max-width: max-content;
  border-bottom: var(--contEd-color) 10px solid;
  background: #fff;
  color: #000;
  transition: var(--default-animation);
  box-shadow: rgb(240, 240, 240) 0px 0px 15px 7.5px;
}

a.button.sm.primary.contEd:hover {
  background: var(--contEd-color);
  color: #fff;
}

.box-shadow-full {
  -webkit-box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);
  -moz-box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);
  box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);
}

.skip-link {
  background: var(--district-color);
  color: #000;
  font-weight: 500;
  left: 0%;
  padding: 1rem;
  position: absolute;
  transform: translateY(-100%);
  z-index: 1000;
}

h2 > a {
  font-size: inherit !important;
}

figure.float-left {
  float: left;
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-right: 30px;
  display: table;
  padding: 10px 0px 20px 0px;
}

figure.float-right {
  float: right;
  margin: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 30px;
  display: table;
  padding: 10px 0px 20px 0px;
}

figure.float-right figcaption,
figure.float-left figcaption {
  font-size: 16px;
  font-style: italic;
  display: table-caption;
  caption-side: bottom;
}

div.float-right {
  max-width: max-content;
  float: right;
}

div.float-left {
  max-width: max-content;
  float: left;
}

.skip-link:focus {
  transform: translateY(0%);
}

.grid {
  justify-items: center;
}

.grid + .grid {
  margin-top: 6rem;
}

.grid .contactcard {
  height: 100%;
}

/*
.grid .card, .grid .contactcard{
	width:100%;
	max-width: 100%;
	
}
*/

.container {
  max-width: 93.75rem;
  margin: 0 auto;
  padding-left: 7rem;
  padding-right: 7rem;
}

.container.std-pad {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.container.sm-pad {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container.md-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media only screen and (max-width: 1064px) {
  .container.std-pad,
  .container.md-pad {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media only screen and (min-width: 100rem) {
  .container {
    max-width: 93.75rem !important;
    width: auto !important;
    padding-left: calc((100% - 93.75rem) / 2) !important;
    padding-right: calc((100% - 93.75rem) / 2) !important;
  }
}

@media only screen and (max-width: 1450px) {
  .container {
    padding: 1rem 5rem;
  }
}

@media only screen and (max-width: 480px) {
  .container {
    padding: 2rem 0.75rem;
  }
}

/*
 * Nav Bar 
 */

.navBar img {
  height: auto;
}

.navBar {
  padding-top: 1rem;
  padding-bottom: 1rem;
  gap: 1rem;
  border-bottom: var(--district-light-color) 15px solid;
}

.navBar .navContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navBar .navLogo {
  max-width: 25%;
  width: 25%;
}

.navBar .navLogo .logoLink {
  display: flex;
}

.navBar .navLogo p {
  margin: 0;
}

.navBar .navLinks.desktop a {
  border-bottom: #fff 3px solid;
  color: #000;
  padding-bottom: 3px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
}

.navBar .navLinks.desktop a:hover {
  border-bottom: #000 3px solid;
}

.navBar .navLinks.desktop {
  max-width: 75%;
  width: auto;
}

.navBar .navLinks.desktop ul {
  max-width: 100%;
  width: auto;
  gap: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navBar .navLinks.mobile {
  display: none;
}

.navBar .mobileTrigger {
  display: none;
  background: #fff;
  font-size: 2rem;
  padding: 0.5rem;
  margin: 0;
}

@media only screen and (max-width: 1250px) {
  .navBar .navLinks.desktop {
    gap: 1.5rem;
  }
}

@media only screen and (max-width: 1064px) {
  .navBar .navLinks.desktop ul {
    display: none;
  }

  .navBar .navLinks.mobile {
    display: none;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 3rem;
  }

  .navBar .navLinks.mobile ul {
    flex-direction: column;
    gap: 1rem;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .navBar .navLinks.mobile a {
    padding: 1rem 1.5rem;
    border-radius: 5px;
    -webkit-box-shadow: 10px 10px 5px 5px rgba(240, 240, 240, 1);
    -moz-box-shadow: 10px 10px 5px 5px rgba(240, 240, 240, 1);
    box-shadow: 0px 0px 5px 5px rgba(240, 240, 240, 1);
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    border-bottom: none;
  }

  .navBar .navLinks.mobile a:hover {
    color: #000;
    text-decoration: underline;
  }

  .navBar .navLinks.mobile a:after {
    font-family: "NerdFontsSymbols Nerd Font";
    content: "\f0da";
  }

  .navBar .mobileTrigger {
    display: flex;
  }

  .navBar .navLogo {
    min-width: 250px;
    width: auto;
  }

  .navBar .logoLink img {
    padding: 0.5rem;
  }
}

@media only screen and (max-width: 480px) {
  .navBar .navLogo {
    min-width: 220px;
    width: auto;
  }
}

/*
 *
 * Default Page Heading
 */

.heading {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.heading h1 {
  margin-top: 1rem;
}

.heading .breadcrumbLink a {
  font-weight: normal;
  font-size: 1.1rem;
  text-decoration: underline;
  border-bottom: none;
  transition: 0s;
}

.heading .breadcrumbLink a:hover {
  font-weight: 600;
  transition: 0s;
}

.heading .breadcrumbLink:last-child a {
  font-weight: 600;
}

.heading .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumbs .breadcrumb {
  display: flex;
  list-style: none;
  gap: 1rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs .breadcrumb li:not(.active):after {
  content: "/";
  font-size: 1.3rem;
  padding-left: 0.54em;
}

.heading .breadcrumbSeparator {
  font-size: 1.5rem;
}

/*
 * Page Heading w/ Image
 */

.headerWithImage {
  min-height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
}

.headerWithImage .headerContent {
  max-width: 450px;
  min-height: 450px;
  align-items: center;
  justify-content: center;
}

.headerWithImage .headerContent p {
  line-height: 2;
}

.headerWithImage .headerContent h1 {
  margin-top: 0;
}

.headerWithImage img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
  min-height: 545px;
  max-height: 545px;
  transform: rotateZ(360deg);
}

.headerWithImage .headImg {
  flex: 4;
  height: auto;
min-height: max-content;
  max-height: max-content;
  display: flex;
}

.headerWithImage .headContent {
  flex: 1;
}





@media only screen and (max-width: 1064px) {
  .headerWithImage {
    flex-direction: column;
    background: var(--district-light-color);
  }

 

  .headerWithImage .headerContent {
    max-width: max-content;
    min-height: max-content;
  }
}


/*@media only screen and (max-width: 768px) {
}*/

/*
 * Inner Page
 */
.innerPageBody {
  padding-bottom: 7rem;
}

.innerPageBody.noSidebar {
  display: block;
}

.innerPageBody .sidebarContainer {
  min-width: 20rem;
  max-width: 25rem;
  padding-top: 3rem;
  padding-right: 1rem;
}

.innerPageBody .sidebar {
  padding-bottom: 2rem;
  border-right: var(--primary-color) 2px solid;
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

.innerPageBody .sidebar ul {
  list-style-type: none;
  padding: 0;
  gap: 1rem;
  display: flex;
  margin: 0;
}

.innerPageBody .sidebar a {
  width: 100%;
  padding: 5px 0;
  color: #000;
  font-weight: normal;
  border-bottom: #fff 3px solid;
  text-decoration: none;
}

.innerPageBody .sidebar a:hover {
  border-bottom: #000 3px solid;
}

.innerPageBody .sidebar h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.innerPageBody .sidebar .mobile.sidebarTrigger {
  display: none;
}

.innerPageBody .mainContent {
  padding-left: 3rem;
  padding-top: 2rem;
  display: block;
  width: 100%;
}

.innerPageBody .mainContent .tableOfContents {
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.innerPageBody .mainContent .tableOfContents .tocLinks {
  justify-content: normal;
}

.innerPageBody .mainContent .tableOfContents strong {
  font-size: 1.25rem;
  display: flex;
  min-width: 150px;
}

.innerPageBody .mainContent .tableOfContents a {
  color: #000;
  text-decoration: underline;
  font-weight: normal;
  flex: auto;
  transition: 0s;
  border: none;
}

.innerPageBody .mainContent .tableOfContents a:hover {
  font-weight: 500;
  transition: 0s;
}

.innerPageBody .sidebar .desktopSidebarHead {
  display: flex;
  flex-direction: column;
}

.innerPageBody .sidebar .desktopSidebarHead:after {
  content: "";
  width: 33%;
  height: 3px;
  background: #000;
  margin-top: 5px;
}

@media only screen and (max-width: 1064px) {
  .innerPageBody .sidebar .mobile.sidebarTrigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    margin: 0;
  }

  .innerPageBody .sidebarContainer {
    min-width: 100%;
    max-width: 100%;
  }

  .innerPageBody .sidebar .mobile.sidebarTrigger h2 {
    font-size: 1.5rem;
    margin: 0;
  }

  .innerPageBody .sidebar .mobile.sidebarTrigger i {
    font-size: 1.5rem;
  }

  .innerPageBody .sidebar .desktopSidebarHead {
    display: none;
  }

  .innerPageBody .sidebar ul {
    background: var(--district-color);
    margin: 0;
    padding: 2rem;
    display: none;
  }

  .innerPageBody .sidebar a {
    border: none;
  }

  .innerPageBody .sidebar {
    gap: 0;
  }

  .innerPageBody .sidebar .breadcrumbs {
    padding: 2rem;
    padding-top: 0;
  }

  .innerPageBody {
    flex-direction: column;
  }

  .innerPageBody .mainContent {
    padding-left: 0rem;
  }

  .innerPageBody .sidebar {
    padding-bottom: 2rem;
    border-bottom: var(--primary-color) 2px solid;
    border-right: none;
  }

  .innerPageBody .sidebarContainer {
    padding-right: 0;
  }

  .innerPageBody .mainContent .tableOfContents {
    flex-direction: column;
    gap: 2rem;
  }

  .innerPageBody .mainContent .tableOfContents .tocLinks {
    width: auto;
    padding: 0;
    gap: 1rem;
  }
}

@media only screen and (max-width: 480px) {
  .innerPageBody {
    flex-direction: column;
    padding: 1rem 1rem;
  }

  .innerPageBody .sidebarContainer {
    padding-top: 1rem;
    min-width: auto;
  }
}

/*
 *
 * students page
 */

.studentLanding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.studentLanding h2 {
  width: 100%;
  text-align: center;
  font-size: 2rem;
}

.studentLanding .card {
  background: #fff;
}

/*
 * cards with strong top border
 */
.cardsWithBorder .card {
  background: #fff;
  border-top: #000 15px solid;
}

/*
 * Tabs 
 */

.tabsContainer .tabs {
  padding: 0;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.tabsContainer .tablist {
  margin-bottom: -1px;
  display: flex;
  flex-direction: row;
  margin: 0 0;
  background: #fff;
  flex-wrap: wrap;
}

.tabsContainer .tablist button {
  flex: auto;
  background: #fff;
  margin: 0;
  font-size: 1.2rem;
  transition: var(--default-animation);
}

.tabsContainer .tablist button:hover {
  background: var(--district-color);
  transition: var(--default-animation);
}

.tabsContainer .tablist [aria-selected="true"] {
  background: var(--district-light-color);
}

.tabsContainer .tabContent h2 {
  margin: 0;
}

.tabsContainer .tabPanel {
  padding: 2rem;
  background: #fff;
}

.tabsContainer .tabContent {
  background: var(--district-light-color);
  padding: 4rem 2rem;
  margin: 0;
}

@media only screen and (max-width: 1200px) {
  .tabsContainer .tablist {
    flex-wrap: wrap;
  }
}

/*
 * Contact Cards
 */
.contactcard {
  max-width: max-content;
}

.contactcard h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

.contactcard {
  background: #fff;
  /* border: var(--primary-color) 1px solid; */
  gap: 1.5rem;
}

.contactcard .contactMethod {
  gap: 0.75rem;
  padding-left: 0.75rem;
}

.contactcard .contactMethod i {
  font-size: 1.25rem;
}

.contactcard .contactMethod a {
  text-decoration: underline;
}

.contactcard .contactLink {
  font-weight: normal;
  font-size: 1.1rem;
  /* color: var(--tertiary-color); */
}

/*
 * Image Cards
 */

.imgHeadingCards .imgCard h3,
.imgHeadingCards .imgCard p,
.imgHeadingCards .imgCard a {
  margin: 0;
}

.imgHeadingCards .imgCard {
  gap: 1.5rem;
  display: flex;
}

.imgHeadingCards .imgCard img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/*
 * Accordions 
 */
.accordions {
  padding: 0.75rem 0;
}

.accordions,
.accordions .accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordions h1,
.accordions h2,
.accordions h3,
.accordions h4,
.accordions h5 {
  margin-top: 5px;
}

.accordions .accordion {
  background: var(--district-color);
  /* background: #fff; */
}

.accordions .accordionTitleButton {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 1.25rem;
  margin: 0;
  background: var(--district-light-color);
  background: var(--district-light-color);
  border: var(--district-light-color) 3px solid;
  transition: var(--default-animation);
  /* background: var(--secondary-color); */
}

.accordions .accordionTitleButton:hover {
  background: var(--district-color);
  border: var(--district-color) 3px solid;
  transition: var(--default-animation);
}

.accordions .accordionTitleButton[aria-expanded="true"] {
  background: var(--district-color);
  border: var(--district-color) 3px solid;
  transition: var(--default-animation);
}

.accordions .accordionTitleButton .accordionTitle {
  text-align: left;
}

.accordions .accordionTitleButton .accordionIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.accordions .accordion.closed .accordionContent {
  display: none;
  flex-direction: column;
  margin: 2rem;
  margin-top: 1rem;
  background: #fff;
  padding: 2rem;
}

@media only screen and (max-width: 550px) {
  .accordions .accordion.closed .accordionContent {
    padding: 1rem;
    margin: 0.5rem;
  }

  .accordions .accordionTitleButton {
    padding: 1.5rem;
  }
}

.mediaResources .twoButton {
  justify-content: center;
}

/*
 *
 * Future Students 
 *
 * Alternating img and text sections 
 *
 */

.imgContentSection {
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

.imgContentSection .imgContent {
  max-width: 35rem;
  min-width: 30rem;
  display: flex;
}

.imgContentSection.heading .imgContent {
  min-width: 40%;
}

.imgContentSection .imgContent img {
  max-width: calc(100% - 15px);
  min-width: calc(100% - 15px);
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media only screen and (max-width: 1150px) {
  .imgContentSection.imgRight {
    flex-direction: column-reverse;
  }

  .imgContentSection.imgLeft {
    flex-direction: column;
  }
}

@media only screen and (max-width: 630px) {
  .imgContentSection .imgContent {
    max-width: 100%;
    min-width: 100%;
    margin: 0;
  }
}

/* 
 * college button list
 *
 */

.collegeButtonList {
  display: flex;
}

.collegeButtonList a.button {
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem !important;
  background: #fff;
  padding: 1.5rem 2rem;
}

.collegeButtonList a:after {
  content: "";
}

.collegeButtonList .city {
  border-bottom: var(--city-color) 15px solid;
  transition: 0s;
}

.collegeButtonList .mesa {
  border-bottom: var(--mesa-color) 15px solid;
  transition: 0s;
}

.collegeButtonList .miramar {
  border-bottom: var(--miramar-color) 15px solid;
  transition: 0s;
}

.collegeButtonList .contEd {
  border-bottom: var(--contEd-color) 15px solid;
  transition: 0s;
}

.collegeButtonList .city:hover {
  background: var(--city-color);
  color: #fff;
  transition: var(--default-animation);
}

.collegeButtonList .mesa:hover {
  background: var(--mesa-color);
  color: #fff;
  transition: var(--default-animation);
}

.collegeButtonList .miramar:hover {
  background: var(--miramar-color);
  color: #fff;
  transition: var(--default-animation);
}

.collegeButtonList .contEd:hover {
  background: var(--contEd-color);
  color: #fff;
  transition: var(--default-animation);
}

@media only screen and (max-width: 1000px) {
  .collegeButtonList {
    flex-direction: column;
    background: transparent;
    gap: 1rem;
    padding-top: 2rem;
  }
}

/*
 *
 * Button List 
 *
 */

.buttonList {
  flex-direction: row;
  gap: 0.75rem;
  justify-items: center;
}

.buttonList a.button {
  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
}

@media only screen and (max-width: 1310px) {
  .buttonList {
    flex-wrap: wrap;
  }
}

/*
 *
 * Calendar Embed 
 *
 */

.calendarEmbed {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.calendarEmbed .calendarDate {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.calendarEmbed .calendarDate .dateSquare {
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  color: #000;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.4rem;
}

.calendarEmbed .calendarDate .calendarEventName {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
}

/*
 * need assistance 
 * pre footer 
 */

.preFooter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.preFooter h2 {
  margin: 0;
  font-size: 2rem;
}

.preFooter .preFooterLinks {
  display: flex;
  flex-direction: row;
  max-width: 60%;
  align-items: center;
  flex: auto;
}

.preFooter .preFooterLinks a {
  flex: 1;
  display: flex;
  justify-content: center;
  border-bottom: none;
  text-decoration: none;
}

.preFooter .preFooterLinks a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 1064px) {
  .preFooter {
    flex-direction: column;
    gap: 1rem;
  }

  .preFooter .preFooterLinks {
    max-width: 100%;
    gap: 2rem;
  }
}

@media only screen and (max-width: 1064px) {
  .preFooter {
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .preFooter .preFooterLinks {
    flex-direction: column;
  }
}

/*
 * News Center 
 *
 */

/* 
 * News Center Masthead/Header
 */

.newsCenterHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 3rem;
}

.newsCenterHeader .newsCenterh1 {
  margin: 0;
  margin-bottom: 1rem;
}

.newsCenterHeader .newsCenterh1 .thinHead {
  font-weight: 200;
}

.newsCenterHeader .newsCenterQuicklinks {
  border-top: var(--primary-color) 1px solid;
  border-bottom: var(--primary-color) 1px solid;
  padding: 1rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsCenterHeader .newsCenterQuicklinks a {
  border-right: var(--primary-color) 1px solid;
  padding: 0 1rem;
  border-bottom: none;
  text-decoration: underline;
}

.newsCenterHeader .newsCenterQuicklinks ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
}

.newsCenterHeader .newsCenterQuicklinks li {
  border-right: var(--primary-color) 1px solid;
}

.newsCenterHeader .newsCenterQuicklinks li:last-child {
  border-right: none;
}

.newsCenterHeader .newsCenterQuicklinks a:last-child {
  border-right: none;
}

@media only screen and (max-width: 1064px) {
  .newsCenterHeader .newsCenterQuicklinks ul {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .newsCenterHeader .newsCenterQuicklinks a {
    border-right: none;
  }
}

.spotlightSection.bg-district-light {
  background: linear-gradient(
    0deg,
    rgb(160, 212, 238) 00%,
    rgb(160, 212, 238) 50%,
    rgb(255, 255, 255) 50%
  );
}

.spotlightSection .spotlight {
  align-items: center;
}

.spotlightSection .imgCont {
  min-width: 25rem;
}

@media only screen and (max-width: 1064px) {
  .spotlightSection .spotlight {
    flex-direction: column;
  }

  .spotlightSection .imgCont,
  .spotlightSection .imgCont img {
    min-width: 100%;
    max-height: 300px;
    object-position: center center;
    object-fit: cover;
  }
}

/*
 *
 * Main featured articles 
 */

.featuredNewscenterNews .mainFeature,
.featuredNewscenterNews .singleFeature {
  border: var(--district-grey) 1px solid;
}

.featuredNewscenterNews .mainFeature:hover,
.featuredNewscenterNews .singleFeature:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px 5px;
}

.featuredNewscenterNews .singleFeature {
  flex: 1;
}

.featuredNewscenterNews .singleFeature img {
  min-height: 225px;
  max-height: 225px;
  object-fit: cover;
  object-position: center center;
}

.featuredNewscenterNews .mainFeature img {
  min-width: 50%;
  object-fit: cover;
  object-position: center center;
  max-width: 100%;
}

.featuredNewscenterNews .mainFeature h2 {
  font-size: 3rem;
  margin: 0;
}

.featuredNewscenterNews .mainFeature p {
  margin: 0;
  line-height: 2;
  font-weight: normal;
}

@media only screen and (max-width: 1064px) {
  .featuredNewscenterNews .mainFeature {
    flex-direction: column;
  }
}

@media only screen and (max-width: 1000px) {
  .featuredNewscenterNews .subFeatures {
    flex-direction: column;
  }
}

.featuredVideos .featuredVidTitle {
  justify-content: space-between;
  align-items: center;
}

.featuredVideos .featuredVidGrid .vidCard {
  border: var(--secondary-color) 1px solid;
  flex: 1;
}

.featuredVideos .featuredVidGrid .mainVid {
  min-width: 65%;
  width: 75%;
  border: var(--secondary-color) 1px solid;
}

.featuredVideos .featuredVidGrid .mainVid .vidCont {
  height: 100%;
}

.featuredVideos .featuredVidGrid .mainVid iframe {
  min-width: 100%;
  min-height: 100%;
}

.featuredVideos .featuredVidGrid .secondaryVids {
  min-width: 25%;
  width: 25%;
}

.featuredVideos .featuredVidGrid img {
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.featuredVideos .featuredVidGrid h3 {
  margin: 0;
}

.featuredVideos .featuredVidGrid .secondaryVids h3 {
  font-size: 1.5rem;
}

.featuredVideos .featuredVidGrid .videoControls {
  position: relative;
  display: flex;
  flex-direction: column;
  /* padding-right: 3rem; */
  /* padding-bottom: 2rem; */
  place-items: center;
  gap: 1rem;
}

.featuredVideos .featuredVidGrid .videoControls span {
  color: #fff;
}

.featuredVideos .featuredVidGrid .videoControls button {
  position: absolute;
  top: -85px;
  right: 1rem;
  max-width: 50px;
  min-width: 65px;
  max-height: 65px;
  min-height: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: var(--district-color);
  font-size: 1.25rem;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px 7.5px;
  border: var(--district-color) 2px solid;
  transition: var(--default-animation);
}

.featuredVideos .videoControls button:hover {
  background: #fff;
}

.videoPlayer.overlay {
  position: fixed;
  z-index: 100000;
  background: #fff;
  top: 10vh;
  bottom: 10vh;
  left: 5vh;
  right: 5vh;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 100px 100px;
  display: none;
}

.videoPlayer.overlay button {
  max-width: 50px;
  min-width: 65px;
  max-height: 65px;
  min-height: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  padding: 0;
  background: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  transition: var(--default-animation);
  position: absolute;
  left: -90px;
}

.videoPlayer.overlay .dialogContainer {
  min-height: 100%;
}

.videoPlayer.overlay .dialogContainer .closeButton {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.videoPlayer.overlay .dialogContainer .closeButton .videoControls {
  position: relative;
}

.videoPlayer.overlay .dialogContainer .videoCont {
  padding: 3rem;
  min-height: 100%;
  width: 100%;
}

.videoPlayer.overlay .dialogContainer .videoCont .iframeCont {
  width: 100%;
  height: 100%;
  min-height: max-content;
  min-width: 100%;
}

.videoPlayer.overlay .dialogContainer .videoCont #dialogIframe {
  width: 100%;
  height: 100%;
  min-height: max-content;
  min-width: 100%;
}

@media only screen and (max-width: 1064px) {
  .featuredVideos .featuredVidGrid {
    flex-direction: column;
  }

  .featuredVideos .featuredVidGrid .mainVid {
    min-width: 100%;
  }

  .featuredVideos .featuredVidGrid .secondaryVids {
    min-width: 100%;
  }
}

@media only screen and (max-width: 650px) {
  .videoPlayer.overlay {
    top: 5vh;
    bottom: 5vh;
    left: 1vh;
    right: 1vh;
  }
}

@media only screen and (max-width: 490px) {
  .videoPlayer.overlay .dialogContainer .videoCont {
    padding: 3rem 1rem;
  }
}

.subscribeToNews h2 {
  font-size: 2.5rem;
  margin: 0;
}

.subscribeToNews .subscribe {
  position: relative;
  top: 7.5rem;
}

.subscribeToNews input[type="text"] {
  padding: 1rem;
  min-width: 300px;
  border: var(--tertiary-color) 1px solid;
}

.subscribeToNews input[type="submit"] {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: var(--tertiary-color) 1px solid;
  background: #fff;
}

.subscribeToNews .subscribeForm {
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 1000px) {
  .subscribeToNews .subscribe {
    flex-direction: column;
  }
}

@media only screen and (max-width: 1000px) {
  .subscribeToNews input[type="text"] {
    min-width: 225px;
  }
}

.moreNewsSection {
  gap: 9rem;
  padding-top: 15rem !important;
}

.moreNewsSection .moreNewsHeader {
  align-items: center;
  justify-content: space-between;
}

.moreNewsSection .moreNews {
  max-width: 55%;
  flex: 1.5;
}

.moreNewsSection .moreNewsHeader h2 {
  margin: 0;
}

.moreNewsSection .moreNewsHeader input[type="text"] {
  padding: 0.5rem 1rem;
  min-width: 300px;
  border: var(--tertiary-color) 1px solid;
}

.moreNewsSection .moreNewsHeader input[type="submit"] {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: var(--tertiary-color) 1px solid;
  background: #fff;
}

@media only screen and (max-width: 1500px) {
  .moreNewsSection .moreNewsHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.moreNewsSection .moreNewsCard {
  border: var(--district-grey) 1px solid;
}

.moreNewsSection .moreNewsCard:hover {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px 5px;
}

.moreNewsSection .moreNewsCard img {
  max-width: 100%;
  min-width: 100%;
  max-height: 350px;
  object-fit: cover;
  object-position: center center;
  min-height: 350px;
}

.moreNewsSection .moreNewsCard h3 {
  font-size: 1.5rem;
}

.moreNewsSection .socialIcon {
  font-size: 3rem;
}

.moreNewsSection .socialIcon:hover {
  color: var(--district-color);
}

.moreNewsSection .moreNewsSidebar {
  gap: 5rem;
  flex: 1;
}

.moreNewsSection .sidebarHeader {
  border-top: var(--tertiary-color) 1px solid;
  border-bottom: var(--tertiary-color) 1px solid;
  text-align: center;
  font-size: 2rem;
  padding: 0.5rem;
}

.moreNewsSection .socialIcons {
  justify-content: space-around;
}

.moreNewsSection .featuredEventsList {
  gap: 2rem;
}

.moreNewsSection .featuredEventsList .event .date {
  border: #000 1px solid;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: var(--default-animation);
}

.moreNewsSection .featuredEventsList .event .date .month {
  font-size: 1.5rem;
}

.moreNewsSection .featuredEventsList .event .date .day {
  font-size: 2rem;
}

.moreNewsSection .featuredEventsList .event .eventInfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.moreNewsSection .featuredEventsList .event .eventInfo .eventTitle {
  font-size: 1.5rem;
}

.moreNewsSection .featuredEventsList .event:hover .date {
  background: #000;
  color: #fff;
  transition: var(--default-animation);
}

.moreNewsSection .featuredEventsList .event:hover .eventInfo .eventTitle {
  text-decoration: underline;
}
.moreNewsSection .mediaEntries {
  display: flex;
  flex-direction: column;
}
.moreNewsSection .mediaEntries p {
  margin: 0;
}
.moreNewsSection .mediaEntry {
  margin-top: 1rem;
}
.moreNewsSection .mediaEntry strong {
  font-weight: 600;
}

.moreNewsSection .mediaEntry p {
  font-weight: 400;
}

.moreNewsSection .mediaEntry:hover p {
  text-decoration: underline;
}

@media only screen and (max-width: 1064px) {
  .moreNewsSection {
    flex-direction: column;
  }

  .moreNewsSection .moreNews {
    max-width: 100%;
  }
}

@media only screen and (max-width: 1000px) {
  .moreNewsSection .moreNewsGrid.grid-50-50-enforced {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 768px) {
  .moreNewsSection .moreNewsGrid.grid-50-50-enforced {
    grid-template-columns: 1fr;
  }

  .moreNewsSection .moreNewsHeader input[type="text"] {
    width: 100%;
    min-width: auto;
  }
}

/* 
 *
 * article page 
 */

/*
 *
 * featured header section 
 */
.featuredNewsSection .newsFeaturedHeader {
  align-items: flex-start;
  justify-content: center;
}

.featuredNewsSection .featImg {
  min-width: calc(50% - 3rem);
  margin: 0;
}

.featuredNewsSection .featImg figcaption {
  background: #fff;
  padding: 1rem;
  font-style: italic;
  font-size: 1rem;
  background: var(--district-light-color);
}

.featuredNewsSection .featImg img {
  min-width: 100%;
  object-fit: cover;
  object-position: center center;
  max-width: 100%;
  max-height: 500px;
  height: auto;
}

.featuredNewsSection .featIntro p {
  font-size: 1.55rem;
  line-height: 2.2;
  margin: 0;
  font-style: italic;
  font-weight: 600;
}

@media only screen and (max-width: 1064px) {
  .featuredNewsSection .newsFeaturedHeader {
    flex-direction: column;
  }
}

/*
 *
 * article search 
 *
 */

.newsCenterHeader .articleSearch {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: var(--secondary-color) 1px solid;
}

.newsCenterHeader .articleSearch h2 {
  margin: 0;
}

.newsCenterHeader .articleSearch input[type="text"] {
  padding: 0.5rem 1rem;
  min-width: 300px;
  border: var(--tertiary-color) 1px solid;
}

.newsCenterHeader .articleSearch input[type="submit"] {
  padding: 0.5rem 1rem;
  border-radius: 0;
  border: var(--tertiary-color) 1px solid;
  background: #fff;
}

@media only screen and (max-width: 1064px) {
  .newsCenterHeader .articleSearch {
    flex-direction: column;
  }
}

/*
 *
 * article listin 
 */

.singleArticleListing {
  border-bottom: var(--primary-color) 1px solid;
}

.singleArticleListing:last-child {
  border-bottom: none;
}

.singleArticleListing .newsImg img {
  min-width: 100%;
  object-fit: cover;
  object-position: center center;
  max-width: 100%;
}

.singleArticleListing .newsImg {
  min-width: 30%;
  flex: 1;
}

.singleArticleListing .listingContent {
  gap: 0.5rem;
  flex: 3;
}

.singleArticleListing p {
  font-weight: normal;
}

.singleArticleListing h3 {
  margin: 0;
}

.singleArticleListing:hover h3 {
  text-decoration: underline;
}

@media only screen and (max-width: 1064px) {
  .singleArticleListing {
    flex-direction: column-reverse;
  }
}

/* 
 * Photo Gallery Listing 
 *
 */

.photoGalleryList .photoGallery .imgCont {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

.photoGalleryList .photoGallery h3 {
  margin: 0;
}

.photoGalleryList .photoGallery .imgCont img {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  max-height: 400px;
  min-height: 400px;
}

.photoGalleryList .photoGallery {
  border: var(--secondary-color) 1px solid;
  min-width: 100%;
}

.photoGalleryList .photoGallery:hover h3 {
  text-decoration: underline;
}

/* 
 * Video Gallery Listing 
 *
 */

.videoGalleryList .videoGallery .imgCont {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}

.videoGalleryList .videoGallery h3 {
  margin: 0;
}

.videoGalleryList .videoGallery .imgCont img {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  max-height: 400px;
  min-height: 400px;
}

.videoGalleryList .videoGallery {
  border: var(--secondary-color) 1px solid;
  min-width: 100%;
}

.videoGalleryList a[role="button"]:hover {
  cursor: pointer;
}

.videoGalleryList .videoGallery .videoControls {
  position: relative;
  display: flex;
  flex-direction: column;
  /* padding-right: 3rem; */
  /* padding-bottom: 2rem; */
  place-items: center;
  gap: 1rem;
}

.videoGalleryList .videoGallery .videoControls span {
  color: #fff;
}

.videoGalleryList .videoGallery .videoControls button {
  position: absolute;
  top: -85px;
  right: 1rem;
  max-width: 50px;
  min-width: 65px;
  max-height: 65px;
  min-height: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: var(--district-color);
  font-size: 1.25rem;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px 7.5px;
  border: var(--district-color) 2px solid;
  transition: var(--default-animation);
}

.videoGalleryList .videoControls button:hover {
  background: #fff;
}

/* 
 * Featured Article 
 *
 */

/*
   *
   * featured article intro 
   *
   */

.featuredNewsIntro .content {
  align-items: center;
  justify-content: center;
}

.featuredNewsIntro .content h1 {
  text-align: center;
  margin: 0;
}

.featuredNewsIntro .content .featuredDate,
.featuredNewsIntro .content .category {
  font-weight: 600;
  font-size: 1.3rem;
}

.featuredNewsIntro .content .intro {
  font-size: 1.3rem;
  line-height: 2;
  margin: 0;
}

.featuredNewsIntro .featuredArticleImg {
  margin: 0;
}

.featuredNewsIntro .featuredArticleImg img {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.featuredNewsIntro .featuredArticleImg figcaption {
  background: #fff;
  padding: 1rem;
  font-style: italic;
  font-size: 1rem;
}

.featuredNewsIntro .featuredArticleImg {
  position: relative;
  width: 125%;
}

@media only screen and (max-width: 480px) {
  .featuredNewsIntro .featuredArticleImg {
    width: 100%;
  }
}

/* 
 *
 * Figures for article content 
 *
 */

.multiImgFig.twoColThreeImg figure {
  display: grid;
  grid-template-areas: "main secondary" "main secondarytwo" "caption caption";
  grid-template-columns: 1.5fr 1fr;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
}

.multiImgFig.twoColThreeImg figure figcaption {
  background: #fff;
  padding: 1rem;
  font-style: italic;
  font-size: 1rem;
  grid-area: caption;
}

.multiImgFig.twoColThreeImg figure img {
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.multiImgFig.twoColThreeImg img:first-child {
  grid-area: main;
}

.multiImgFig.twoColThreeImg img:nth-child(2) {
  grid-area: secondary;
}

.multiImgFig.twoColThreeImg img:last-child {
  grid-area: secondarytwo;
}

@media only screen and (max-width: 1064px) {
  .multiImgFig.twoColThreeImg figure {
    grid-template-areas: "main main" "secondary  secondarytwo" "caption caption";
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 1064px) {
  .multiImgFig.twoColThreeImg figure {
    grid-template-areas: "main" "secondary" "secondarytwo" "caption";
    grid-template-columns: 1fr;
  }
}

.multiImgFig.twoCol figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "first second" "caption caption";
  gap: 1rem;
}

.multiImgFig.twoCol figure img {
  min-height: 100%;
  max-height: 100%;
  min-width: 100%;
  max-width: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

.multiImgFig.twoCol figure img:first-child {
  grid-area: first;
}

.multiImgFig.twoCol figure img:last-child {
  grid-area: second;
}

.multiImgFig.twoCol figure figcaption {
  grid-area: caption;
  background: #fff;
  padding: 1rem;
  font-style: italic;
  font-size: 1rem;
}

@media only screen and (max-width: 1064px) {
  .multiImgFig.twoCol figure {
    grid-template-columns: 1fr;
    grid-template-areas: "first" "second" "caption";
  }
}

.container.mainArticleContent.sm-pad {
  display: flex;
}

.container.mainArticleContent.sm-pad .blockSection {
  display: block;
}

/* 
 *
 * description list 
 */

.descList a {
  /* text-decoration: underline; */
  color: #000;
  border-bottom: none;
  text-decoration: underline;
  font-weight: normal;
  transition: 0s;
}

.descList a:hover {
  font-weight: 600;
  text-decoration: none;
  transition: 0s;
}

.descList dl {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  row-gap: 3rem;
  column-gap: 2rem;
  padding-top: 3rem;
}

.descList dl dd {
  margin: 0;
  font-size: 1.1rem;
}

@media only screen and (max-width: 900px) {
  .descList dl {
    display: unset;
    grid-template-columns: 1fr 2.5fr;
    row-gap: 3rem;
    column-gap: 2rem;
    padding-top: 3rem;
  }

  .descList dl dd {
    margin-left: 1rem;
    margin-bottom: 1.5rem;
  }
}

.homepage.md-pad {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homepage.VideoSection {
  position: relative;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.homepage.VideoSection .videoContainer {
  position: relative;
  width: 100%;
}

.homepage.VideoSection .videoContainer video {
  width: 100%;
  object-fit: cover;
  object-position: center center;
  min-height: 40rem;
  max-height: 970px;
  pointer-events: none;
}

.homepage.VideoSection .homepageVideoTextCont {
  position: relative;
  display: flex;
  flex-direction: column;
}

.homepage.VideoSection .homepageVideoTextCont .homepageVideoText h1 {
  font-size: 4.5rem;
  font-weight: 600;
}

.homepage.VideoSection .homepageVideoTextCont .homepageVideoText h2 {
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 1.16;
  margin-bottom: 10px;
}

.homepage.VideoSection .homepageVideoTextCont .homepageVideoText {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: auto;
  padding-left: calc((100% - 45rem) / 2) !important;
  padding-right: calc((100% - 45rem) / 2) !important;
  min-height: 400px;
  justify-content: flex-end;
  background: transparent;
  top: -420px;
  padding-bottom: 1rem;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.85) 00%,
    rgba(255, 255, 255, 0) 100%
  );
}

.homepage.VideoSection .homepageVideoTextCont .homepageVideoText * {
  color: #fff;
  text-align: center;
}

.homepage.VideoSection .videoControlsCont {
  position: relative;
  width: 100%;
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
}

.homepage.VideoSection .videoControlsCont .videoControls {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding-right: 3rem;
  padding-bottom: 2rem;
  place-items: center;
  gap: 1rem;
}

.homepage.VideoSection .videoControlsCont .videoControls span {
  color: #fff;
}

.homepage.VideoSection .videoControlsCont .videoControls button {
  max-width: 50px;
  min-width: 50px;
  max-height: 50px;
  min-height: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
}

@media only screen and (max-width: 1064px) {
  .homepage.VideoSection .homepageVideoTextCont .homepageVideoText {
    top: -525px;
    padding-bottom: 7.5rem;
  }

  .homepage.VideoSection .videoControlsCont .videoControls {
    padding-right: 0;
    padding-bottom: 1rem;
    width: 100%;
  }
}

@media only screen and (max-width: 700px) {
  .homepage.VideoSection .homepageVideoTextCont .homepageVideoText {
    top: -35rem;
    max-height: 459px;
    padding-top: 0;
    padding-bottom: 10.5rem;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.65) 00%,
      rgba(0, 0, 0, 0.65) 50%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

.homepage.studentSuccess {
  padding-bottom: 3rem;
}

.homepage.studentSuccess .successCarouselCont {
  overflow: hidden;
}

.homepage.studentSuccess .flexCont {
  justify-content: flex-start;
  align-items: flex-start;
}

.homepage.studentSuccess .textCont {
  flex: 1;
  padding-top: 5rem;
}

.homepage.studentSuccess .textCont h2 {
  font-size: 3.5rem;
}

.homepage.studentSuccess .carouselCont {
  flex: 3;
}

.homepage.studentSuccess .carousel {
  gap: 2rem;
  display: grid;
  grid-template-areas: "successCarousel successCarousel" "successArrowLeft successArrowRight";
  /* display: flex; */
  /* flex-direction: column; */
}

.homepage.studentSuccess .carousel .carouselArrow {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: #fff;
  border: #000 1px solid;
  margin: 0;
}

.homepage.studentSuccess .carousel .arrowContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

.homepage.studentSuccess .carousel .arrowContainer.left {
  grid-area: successArrowLeft;
  justify-content: flex-end;
}

.homepage.studentSuccess .carousel .arrowContainer.right {
  grid-area: successArrowRight;
  justify-content: flex-start;
  padding-right: 22vw;
}

@media only screen and (max-width: 480px) {
  .homepage.studentSuccess .carousel .arrowContainer.right {
    padding-right: 177vw;
  }
}

.homepage.studentSuccess .carousel .slide {
  min-width: 13vw;
  transform-style: preserve-3d;
  position: relative;
  perspective: 1000px;
  transition: 0.5s all;
  flex: 1;
}

.homepage.studentSuccess .carousel .slide img {
  max-height: 400px;
  min-height: 400px;

  object-fit: cover;
  object-position: center top;
  min-width: 100%;
  max-width: 100%;
  transform: rotateZ(360deg);
}

.homepage.studentSuccess .carousel .carouselText {
  background: var(--district-light-color);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.homepage.studentSuccess .carousel .slidesContainer {
  align-items: center;
  grid-area: successCarousel;
}

.homepage.studentSuccess .carousel .carouselText h3 {
  font-size: 1.25rem;
  margin: 0;
}

.homepage.studentSuccess .carousel .carouselText p {
  margin: 0;
  font-size: 0.9rem;
}

.homepage.studentSuccess .carousel .slide.hidden {
  display: none;
  z-index: 25;
  transform: translateZ(-6rem);
  transition: 0.5s all;
}

.homepage.studentSuccess .carousel .slide.slide1:focus {
  border: yellow 1px solid;
}

.homepage.studentSuccess .carousel .slide.slide1 img:focus {
  border: yellow 1px solid;
}

.homepage.studentSuccess .carousel .slide.slide1 .carouselText,
.homepage.studentSuccess .carousel .slide.slide3 .carouselText,
.homepage.studentSuccess .carousel .slide.slide4 .carouselText {
  display: none;
}

.homepage.studentSuccess .carousel .slide.slide1 {
  transform: translateZ(0);
  -webkit-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  -moz-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  box-shadow: 0px 0px 50px 15px rgba(100, 100, 100, 0.2);
  z-index: 100;
  scale: 1;
}

.homepage.studentSuccess .carousel .slide.slide2 {
  transform: translateZ(3rem) translateX(-50px);
  -webkit-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  -moz-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  box-shadow: 0px 0px 50px 15px rgba(100, 100, 100, 0.2);
  z-index: 200;
  /* scale: 1.1; */
  min-width: 18vw;
}

.homepage.studentSuccess .carousel .slide.slide3 {
  transform: translateZ(0) translateX(-100px);
  -webkit-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  -moz-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  box-shadow: 0px 0px 50px 15px rgba(100, 100, 100, 0.2);
  z-index: 100;
  scale: 1;
}

.homepage.studentSuccess .carousel .slide.slide4 {
  transform: translateZ(-3rem) translateX(-175px);
  -webkit-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  -moz-box-shadow: 10px 10px 5px 5px rgba(100, 100, 100, 0.2);
  box-shadow: 0px 0px 50px 15px rgba(100, 100, 100, 0.2);
  z-index: 50;
  scale: 0.8;
}

@media only screen and (max-width: 1601px) {
  /* .homepage.studentSuccess .successCarouselCont { */
  /*   display: grid; */
  /*   grid-template-columns: auto 58.5rem; */
  /*   overflow: hidden; */
  /* } */

  .homepage.studentSuccess .carousel .slide {
    min-width: 16vw;
  }

  .homepage.studentSuccess .carousel .slide.slide2 {
    min-width: 23vw;
  }
}

@media only screen and (max-width: 1064px) {
  .homepage.studentSuccess .carousel .slide {
    min-width: 22vw;
  }

  .homepage.studentSuccess .carousel .slide.slide2 {
    min-width: 35vw;
  }

  .homepage.studentSuccess .carousel .arrowContainer {
    /* padding-right: 19vw; */
  }

  .homepage.studentSuccess .flexCont {
    grid-template-columns: 1fr;
    flex-direction: column;
    overflow: hidden;
  }

  .homepage.studentSuccess .textCont {
    width: 100%;
    text-align: center;
    padding-top: 2rem;
  }
}

@media only screen and (max-width: 768px) {
  .homepage.studentSuccess .carousel .slide {
    min-width: 24vw;
  }

  .homepage.studentSuccess .carousel .slide.slide2 {
    min-width: 45vw;
  }

  .homepage.studentSuccess .carousel .arrowContainer {
    padding-right: 0vw;
    max-width: 90vw;
  }

  .homepage.studentSuccess .carouselCont {
    flex: 1;
    max-width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .homepage.studentSuccess .carousel .slide.slide2 {
    min-width: 68vw;
  }

  .homepage.studentSuccess .carousel .slide {
    min-width: 68vw;
  }

  .homepage.studentSuccess .carousel .slide.slide3 {
    transform: translateZ(0) translateX(-79vw);
  }

  .homepage.studentSuccess .carousel .slide.slide2 {
    transform: translateZ(3rem) translateX(-56vw);
  }

  .homepage.studentSuccess .carousel .arrowContainer {
  }

  .homepage.studentSuccess .carousel .slide img {
    min-height: 300px;
    max-height: 300px;
  }
}

.homepage.startHere {
  overflow-x: hidden;
  align-items: center;
  justify-content: center;
  padding-bottom: 3rem;
  padding-top: 1rem;
  background: linear-gradient(
    0deg,
    var(--district-color) 00%,
    var(--district-color) 50%,
    rgb(255, 255, 255) 50%
  );
}

.homepage.startHere .startHereCardLink.arrow-link {
  color: #fff;
  width: 100%;
  display: flex;
  min-width: calc(100% - 4rem);
  padding: 1rem 2rem !important;
}

.homepage.startHere .startHereCardLink.arrow-link:after {
  color: #fff;
}

.homepage.startHere .startHereText {
  align-items: center;
  justify-content: center;
}

.homepage.startHere .startHereText * {
  text-align: center;
}

.homepage.startHere .startHereText h2 {
  font-size: 3.5rem;
  margin: 0.5rem 0;
}

.homepage.startHere .startHereText p {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.homepage.startHere .carousel {
  flex-direction: column-reverse;
  gap: 2rem;
}

.homepage.startHere .carousel .carouselArrow {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: #fff;
  border: #000 1px solid;
  margin: 0;
}

.homepage.startHere .carousel .arrowContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* justify-content: center; */
  gap: 2rem;
  padding-top: 1rem;
}

.homepage.startHere .carousel .carouselText {
  background: #fff;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.homepage.startHere .carousel .carouselText * {
  margin: 0;
}

.homepage.startHere .carousel {
  max-width: 100%;
  padding-top: 2rem;
}

.homepage.startHere .carouselTrack {
  transition: 0.25s ease-out;
  transform: translateX(-8vw);
}

.homepage.startHere .slidesContainer {
  position: relative;
}

.homepage.startHere .carousel .slide {
  min-width: 26vw;
  background: #fff;
  margin-right: 4vw;
  transform-style: preserve-3d;
  position: relative;
  perspective: 1000px;
  transition: 0.5s all;
  flex: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 7.5px;
}

.homepage.startHere .carousel .slide img {
  max-height: 300px;
  min-height: 300px;

  object-fit: cover;
  object-position: center center;
  min-width: 100%;
  max-width: 100%;
  transform: rotateZ(360deg);
}

.homepage.startHere .carousel .slide.hidden {
  /* display: none; */
  z-index: 25;
  transform: translateZ(-6rem);
  transition: 0.5s all;
  justify-content: space-between;
}

.homepage.startHere .carousel .slide.slide1,
.homepage.startHere .carousel .slide.slide2,
.homepage.startHere .carousel .slide.slide3,
.homepage.startHere .carousel .slide.slide4 {
  display: flex;
  justify-content: space-between;
}

.homepage.startHere .carousel {
  flex-direction: column-reverse;
  gap: 2rem;
  display: grid;
  grid-template-areas:
    "startHereCarousel startHereCarousel"
    "startHereLeft     startHereRight   ";
}

.startHere .arrowContainer.left {
  grid-area: startHereLeft;
  justify-content: flex-end;
}

.startHere .slidesContainer {
  grid-area: startHereCarousel;
}

.startHere .arrowContainer.right {
  grid-area: startHereRight;
  justify-content: flex-start;
  padding-right: 80vw;
}

/* .homepage.startHere .carousel .slide.slide2 { */
/* } */
/* .homepage.startHere .carousel .slide.slide3 { */
/* } */
/* .homepage.startHere .carousel .slide.slide4 { */
/* } */

@media only screen and (max-width: 1064px) {
  .homepage.startHere .carousel .slide {
    min-width: 36vw;
  }

  .startHere .arrowContainer.right {
    padding-right: 137vw;
  }
}

@media only screen and (max-width: 768px) {
  .homepage.startHere .carousel .slide {
    min-width: 80vw;
  }

  .homepage.startHere .carouselTrack {
    transform: translateX(-74vw);
  }

  .startHere .arrowContainer.right {
    padding-right: 399vw;
  }
}

@media only screen and (max-width: 500px) {
  .homepage.startHere .carousel .carouselText {
    padding: 1rem;
  }

  .homepage.startHere .carousel .slide img {
    min-height: 200px;
    max-height: 200px;
  }
}

.homepage.programsSection {
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--district-color);
  padding-top: 2rem;
}

.homepage.programsSection h2 {
  font-size: 3.5rem;
  margin: 0.5rem 0;
}

.homepage.programsSection .carousel {
  flex-direction: column-reverse;
  max-width: 100%;
}

.homepage.programsSection .carousel .slide {
  flex: 1;
  min-width: 25vw;
  max-width: 30vw;
  transform-style: preserve-3d;
  position: relative;
  perspective: 1000px;
  transition: 0.25s all;
  flex: 1;
}

.homepage.programsSection .carousel .slide img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 600px;
  max-height: 600px;
  transform: rotateZ(360deg);
}

.homepage.programsSection .carousel .slidesContainer {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.homepage.programsSection .carousel .carouselArrow {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: #fff;
  border: #000 1px solid;
  margin: 0;
}

.homepage.programsSection .carousel .carouselTextCont {
  position: relative;
}

.homepage.programsSection .carousel .carouselTextCont .carouselText * {
  color: #fff;
}

.homepage.programsSection .carousel .carouselTextCont .carouselText {
  position: absolute;
  max-height: 15rem;
  min-height: 15rem;
  top: -19rem;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  width: calc(100% - 4rem);
  justify-content: center;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 00%,
    rgba(255, 255, 255, 0) 100%
  );
}

.homepage.programsSection .carousel .arrowContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 0rem;
}

.homepage.programsSection .carousel .carouselTrack {
  transform-style: preserve-3d;
  /* transform: translateZ(-32vw); */
  height: 100%;
  min-height: 700px;
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow: hidden;
  max-width: 140vw;
  right: -20vw;
  position: relative;
  perspective: 120vw;
  -webkit-perspective: 120vw;
  perspective-origin: center;
}

.homepage.programsSection .carousel .slidesContainer {
  max-width: 126vw;
  overflow: hidden;
  position: relative;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  right: 2vw;
}

.homepage.programsSection .carousel .slide.hidden {
  transform: rotateY(-90deg) translateZ(35vw) translateX(200vw);
  transition: 0.025s all;
  visibility: hidden;
}

.homepage.programsSection .carousel .slide.slide1,
.homepage.programsSection .carousel .slide.slide2,
.homepage.programsSection .carousel .slide.slide3,
.homepage.programsSection .carousel .slide.slide4 {
  display: flex;
}

.homepage.programsSection .carousel .slide.slide1 {
  /* transform: rotateY(40deg) translateZ(3vw) translateX(7vw); */
  transform: rotateY(60deg) translateZ(12vw) translateX(3vw);
}

.homepage.programsSection .carousel .slide.slide2 {
  /* transform: rotateY(10deg) translateZ(-11vw) translateX(7vw); */
  transform: rotateY(10deg) translateZ(-11vw) translateX(7vw);
}

.homepage.programsSection .carousel .slide.slide3 {
  /* transform: rotateY(-10deg) translateZ(-12vw) translateX(3vw); */
  transform: rotateY(-10deg) translateZ(-12vw) translateX(3vw);
}

.homepage.programsSection .carousel .slide.slide4 {
  /* transform: rotateY(-40deg) translateZ(0vw) translateX(3vw); */
  transform: rotateY(-40deg) translateZ(0vw) translateX(3vw);
}

.homepage.programsSection + .grid {
  background: linear-gradient(
    177deg,
    var(--district-color) 00%,
    var(--district-color) 70%,
    var(--district-light-color) 70%
  );
  padding-bottom: 15rem;
  grid-template-columns: auto auto auto auto;
  gap: 1rem;
}

.homepage.programsSection .carousel {
  display: grid;
  grid-template-areas: "programCarousel programCarousel" "programLArrow programRArrow";
}

.homepage.programsSection .carousel .arrowContainer.left {
  grid-area: programLArrow;
  justify-content: flex-end;
  margin-right: 2rem;
}

.homepage.programsSection .carousel .arrowContainer.right {
  grid-area: programRArrow;
  justify-content: flex-start;
}

.homepage.programsSection .carousel .slidesContainer {
  grid-area: programCarousel;
}

@media only screen and (max-width: 768px) {
  .homepage.programsSection + .grid {
    grid-template-columns: 1fr;
  }
  .homepage.programsSection + .grid > div {
    align-items: center;
  }

  .homepage.programsSection .carousel .slide.slide1 {
    transform: rotateY(10deg) translateZ(6vw) translateX(19vw);
  }

  .homepage.programsSection .carousel .slide.slide2 {
    transform: rotateY(-10deg) translateZ(0vw) translateX(21vw);
  }

  .homepage.programsSection .carousel .slide.slide3 {
    display: none;
  }

  .homepage.programsSection .carousel .slide.slide4 {
    display: none;
  }

  .homepage.programsSection .carousel .slide {
    min-width: 45vw;
    max-width: 50vw;
  }

  .homepage.programsSection h2 {
    text-align: center;
  }

  .homepage.programsSection {
    gap: 1rem;
  }

  .homepage.programsSection .carousel .carouselTrack {
    right: -27vw;
  }
}

@media only screen and (max-width: 500px) {
  .homepage.programsSection .carousel .slide.slide2 {
    display: none;
  }

  .homepage.programsSection .carousel .slide {
    min-width: 90vw;
    max-width: 90vw;
    right: -65vw;
  }

  .homepage.programsSection .carousel .slide.slide1 {
    transform: none;
  }

  .homepage.programsSection .carousel .arrowContainer {
    padding-top: 1rem;
  }

  .homepage.programsSection .carousel .slidesContainer {
    min-height: 500px;
  }

  .homepage.programsSection .carousel .carouselTrack {
    min-height: 500px;
  }

  .homepage.programsSection .carousel .slide img {
    min-height: 500px;
    max-height: 500px;
  }
}

.homepage.collegeButtons {
  margin-top: -4px;
}

.homepage.collegeButtons .multiButtons a {
  flex: 1;
}

.homepage.collegeButtons a {
  flex: 1;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem !important;
  background: #fff;
  padding: 2rem 1rem;
  text-align: center;
}

.homepage.collegeButtons a:after {
  content: "";
}

.homepage.collegeButtons .city {
  border-bottom: var(--city-color) 15px solid;
  transition: 0s;
}

.homepage.collegeButtons .mesa {
  border-bottom: var(--mesa-color) 15px solid;
  transition: 0s;
}

.homepage.collegeButtons .miramar {
  border-bottom: var(--miramar-color) 15px solid;
  transition: 0s;
}

.homepage.collegeButtons .ce {
  border-bottom: var(--contEd-color) 15px solid;
  transition: 0s;
}

.homepage.collegeButtons .city:hover {
  background: var(--city-color);
  color: #fff;
  transition: var(--default-animation);
}

.homepage.collegeButtons .mesa:hover {
  background: var(--mesa-color);
  color: #fff;
  transition: var(--default-animation);
}

.homepage.collegeButtons .miramar:hover {
  background: var(--miramar-color);
  color: #fff;
  transition: var(--default-animation);
}

.homepage.collegeButtons .ce:hover {
  background: var(--contEd-color);
  color: #fff;
  transition: var(--default-animation);
}

@media only screen and (max-width: 1064px) {
  .homepage.collegeButtons .multiButtons {
    flex-direction: column;
    background: transparent;
    padding-top: 2rem;
  }
}

.container .see-more {
  text-align: right;
}

.homepage.latestNewsSection.md-pad {
  background: var(--district-light-color);
  padding-top: 0;
}

.homepage.latestNewsSection .featuredNews .imgCont {
  flex: 1.25;
}

.homepage.latestNewsSection .featuredNews .imgCont img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 400px;
}

.homepage.latestNewsSection .featuredNews .textCont {
  flex: 1;
}

.homepage.latestNewsSection .secondarySingleNews {
  flex: 1;
}

.homepage.latestNewsSection .secondarySingleNews img {
  object-fit: cover;
  object-position: center center;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 300px;
  min-height: 300px;
}

@media only screen and (max-width: 1064px) {
  .homepage.latestNewsSection .featuredNews {
    flex-direction: column;
  }

  .homepage.latestNewsSection .secondaryNews {
    flex-direction: column;
  }
}

.homepage.eventsAndAnnouncements {
  background: var(--district-light-color);
}

.homepage.eventsAndAnnouncements .eventsAnnouncementsCont div {
}

.homepage.eventsAndAnnouncements .featuredEvent {
  justify-content: flex-end;
  align-items: flex-start;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-width: 45%;
  padding: 0;
}

.homepage.eventsAndAnnouncements .singleEventGradient {
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: #fff;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 00%,
    rgba(255, 255, 255, 0) 90%
  );
  width: 100%;
  justify-content: stretch;
  width: calc(100% - 4rem);
  height: 100%;
}

.homepage.eventsAndAnnouncements h3 {
  margin-top: 0.25rem;
  color: #fff;
  font-size: 1.6rem;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent {
  min-height: 350px;
  gap: 0;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 2rem;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  min-width:50%;
	flex:1;
	 
  padding: 0;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent {
  text-transform: capitalize;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.district {
  background: var(--district-color);
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.city,
.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.city
  * {
  background: var(--city-color);
  color: #fff;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.miramar,
.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.miramar
  * {
  background: var(--miramar-color);
  color: #fff;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.mesa,
.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.mesa
  * {
  background: var(--mesa-color);
  color: #fff;
}

.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.contEd,
.homepage.eventsAndAnnouncements
  .eventsAnnouncementsCont
  .secondaryEvents
  .singleEvent.contEd
  * {
  background: var(--contEd-color);
  color: #fff;
}

.eventsAndAnnouncements .secondaryEvents {
  display: flex;
  flex-wrap: wrap;
	
}

@media only screen and (max-width: 1200px) {
  .homepage.eventsAndAnnouncements .eventsAnnouncementsCont {
    flex-direction: column-reverse;
  }

  .homepage.eventsAndAnnouncements .featuredEvent {
    min-height: 500px;
  }
}

.homepage.socialLinks {
  background: var(--district-light-color);
}

.homepage.socialLinks .socialColumns {
  justify-content: center;
}

.homepage.socialLinks .socialColumns .socialLinkContainer {
  justify-content: center;
  align-items: center;
  flex: 1;
}

.homepage.socialLinks .socialColumns .socialLinkContainer h2 {
  margin: 0;
  font-size: 3rem;
}

.homepage.socialLinks .socialColumns .instaEmbed {
  flex: 1;
}

.homepage.socialLinks .socialColumns .socialLinkContainer span {
  font-size: 1.5rem;
}

.homepage.socialLinks .socialColumns .socialLinkContainer .socialIcon {
  font-size: 3rem;
}

/*
.homepage.socialLinks .socialColumns .socialLinkContainer .socialIcon:hover {
  background-color: var(--district-color);
}
*/

@media only screen and (max-width: 1064px) {
  .homepage.socialLinks .socialColumns {
    padding: 0;
    flex-direction: column;
  }

  .homepage.socialLinks .socialColumns .instaEmbed {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.homepage.bottomCta {
  justify-content: center;
  align-items: center;
  padding-top: 1rem;

  background: var(--district-light-color);
}

.homepage.bottomCta .textCont {
  max-width: 50%;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50px;
}

.homepage.bottomCta .textCont * {
  text-align: center;
}

@media only screen and (max-width: 1064px) {
  .homepage.bottomCta .textCont {
    max-width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .homepage.bottomCta {
    padding-top: 2rem;
  }
}

.homepage.parallaxImg .parallax {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 700px;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: -100;
  overflow: hidden;
}

.homepage.parallaxImg .parallax:before {
  content: "";
  position: absolute;
  top: -5px;
  left: 280px;
  right: 0px;
  background-image: url("/_resources/images/white-upper-triangle-overlay.svg");
  height: 30rem;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -100;
}

.homepage.parallaxImg .parallax:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -60rem;
  right: 0;
  background-image: url("/_resources/images/white-lower-triangle-overlay.svg");
  height: 33rem;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -100;
  width: 150rem;
}

@media only screen and (max-width: 768px) {
  .homepage.parallaxImg .parallax {
    background-attachment: scroll;
  }
}

.programs > h2 {
  margin: 0;
}

.programs .programFilter #programFilterForm {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.5rem 0;
  flex-wrap: wrap;
}

.programs .programFilter h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.programs .programFilter .searchFormContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.programs .programFilter .searchFormContainer label {
  font-weight: 600;
  font-size: 1.1rem;
}

.programs .programFilter .searchFormContainer input[type="text"] {
  min-height: 3rem;
  border: #000 1px solid;
  padding: 0 1rem;
  min-width: 20rem;
  font-size: 1.1rem;
}

/* .programs .programFilter button[type="submit"] { */
/*   border: #000 1px solid; */
/*   border-radius: 0; */
/*   background: #fff; */
/*   display: flex; */
/*   align-items: center; */
/*   padding: 0.25rem 0.75rem; */
/* } */
/**/
/* .programs .programFilter button[type="submit"]:after { */
/*   content: "\f002"; */
/*   font-family: "NerdFontsSymbols Nerd Font"; */
/*   font-size: 1.2rem; */
/*   color: #000; */
/* } */

.programs .programFilter button {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  margin: 0;
  background: #fff;
  border: #000 1px solid;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
  transition: var(--default-animation);
}

.programs .programFilter button[type="submit"] {
  background: var(--district-light-color);
}

.programs .programFilter .collegeOptionCont,
.programs .programFilter .degreeOptionCont {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.programs .programFilter input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.programs .programFilter input[type="checkbox"]:checked {
  background: #000;
}

.programs .programFilter button:hover {
  background: #000;
  color: #fff;
}

.programs .programFilter button:not([type="submit"], [type="reset"]):after {
  content: "\f0d7";
  font-family: "NerdFontsSymbols Nerd Font";
  font-size: 0.8rem;
}

.programs .programFilter .collegeSelectionList,
.programs .programFilter .degreeSelectionList {
  display: none;
}

.programs .programFilter .collegeSelectionList,
.programs .programFilter .degreeSelectionList {
  position: relative;
}

.programs .programFilter .collegeSelectionList fieldset,
.programs .programFilter .degreeSelectionList fieldset {
  position: absolute;
  background: #fff;
  padding: 1rem;
  border: #000 1px solid;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.programs .programFilter .collegeSelectionList fieldset {
  right: -12rem;
  left: -0.25rem;
}

.programs .programFilter .degreeSelectionList fieldset {
  right: -8rem;
  left: -0.25rem;
}

.programs .programFilter .collegeSelectionList fieldset label,
.programs .programFilter .degreeSelectionList fieldset label {
  font-size: 1.1rem;
  font-weight: 500;
}

.programs .programCard h2 {
  font-size: 2rem;
  margin: 0;
}

.programs .programCard h3 {
  font-size: 1.5rem;
  margin: 0;
}

.programs .programCard {
  gap: 1.5rem;
}

.programs .programCard .programTitle,
.programs .programCard .programLinksCont {
  border-bottom: var(--district-grey) 1px solid;
}

.programs .programCard .collegeButtonGrid {
  flex-wrap: wrap;
  padding: 1.5rem 0;
}

.programs .programCard .button.programButton {
  border-style: solid;
  border-width: 2px;
  border-bottom-width: 5px;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 1rem;
  color: #000;
  transition: var(--default-animation);
  /* min-height: 56px; */
}

.programs .programCards {
  display: none;
  justify-items: stretch;
}

.programs .programCard .button.programButton.city {
  border-color: var(--city-color);
}

.programs .programCard .button.programButton.mesa {
  border-color: var(--mesa-color);
}

.programs .programCard .button.programButton.miramar {
  border-color: var(--miramar-color);
}

.programs .programCard .button.programButton.contEd {
  border-color: var(--contEd-color);
}

.programs .programCard .button.programButton.city:hover {
  background-color: var(--city-color);
  color: #fff;
}

.programs .programCard .button.programButton.mesa:hover {
  background-color: var(--mesa-color);
  color: #fff;
}

.programs .programCard .button.programButton.miramar:hover {
  background-color: var(--miramar-color);
  color: #fff;
}

.programs .programCard .button.programButton.contEd:hover {
  background-color: var(--contEd-color);
  color: #fff;
}

.programs .programCard.hidden {
  display: none;
}

.needAssistance .grid {
  align-items: center;
  justify-content: center;
}

.needAssistance .grid h2 {
  text-align: center;
}

/* 
* overrides from old styles 
*/

.three-column-info-boxes .info-box,
.two-column-feature .feature-box {
  /*-webkit-box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);
  -moz-box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);
  box-shadow: 0px 0px 15px 7.5px rgba(240, 240, 240, 1);*/
  gap: 0;
  border-top: #000 15px solid;
  background: #fff;
}

.three-column-info-boxes .info-box .info-content {
  padding: 2rem;
}

.three-column-info-boxes .info-box .info-content h4 {
  margin: 0;
}

.three-column-info-boxes .info-box .imgcrop {
  width: 100%;
  height: auto;
}

.three-column-info-boxes .info-box .imgcrop {
  width: 100%;
  height: auto;
}

.three-column-info-boxes .info-box .imgcrop img {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
  object-position: center center;
}

.two-column-feature .feature-box .imgcrop {
  width: 100%;
  height: auto;
}

.two-column-feature .feature-box .imgcrop a {
  border-bottom: none;
}

.two-column-feature .feature-box .imgcrop img {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 300px;
  max-height: 300px;
  object-fit: cover;
  object-position: center center;
}

.two-column-feature .feature-box h3,
.two-column-feature .feature-box p {
  padding: 0 2rem;
}

/*
* Footer 
*/

footer .logo img {
  height: auto;
}

footer .footerLogoAddress img {
  height: auto;
}

footer {
  background: #121212;
}

footer .socialIcon .nf {
  color: #fff;
}

footer * {
  color: #fff;
  border-bottom: none;
  list-style-type: none;
}

footer ul {
  margin: 0;
  padding: 0;
}

footer a:not([class]) {
  border-bottom: none;
  text-decoration: underline;
}

footer .container .footerTop {
  justify-content: space-between;
  align-items: flex-end;
}

footer .container .footerTop .logo {
  max-width: 220px;
}

footer .container .footerTop .footerNav {
  align-items: flex-end;
  justify-content: flex-end;
}

footer .container .footerTop .footer-nav {
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  max-width: 55%;
}

footer .container .footerBottom {
  justify-content: space-between;
  align-items: flex-start;
}

footer .container .footerBottom .social-nav {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

footer .container .footerBottom .disclaimer {
  text-align: right;
}

@media only screen and (max-width: 1064px) {
  footer .container .footerTop,
  footer .container .footerBottom {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  footer .container .footerTop .footerNav {
    justify-content: center;
    align-items: center;
  }

  footer .container .footerBottom .social-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  footer .container .footerBottom .disclaimer {
    text-align: center;
  }
}

.social-snip .socialIcon {
  font-size: 3rem;
  padding: 0.5rem;
}

.social-snip .socialIcon:hover {
  color: var(--district-color);
  background: #000;
}

footer .social-snip {
  justify-content: flex-end;
}

footer .social-snip .socialIcon {
  font-size: 2rem;
}


.container.masonryCont.md-pad {
  padding-top: 0;
}

.masonryCont .masonryGridItem img {
  max-width: 100%;
  display: block;
  grid-row: 1 / -1;
  grid-column: 1;
  min-width: 100%;
}

.masonryCont .masonryGridCont {
  column-count: 3;
  column-gap: 15px;
}

.masonryCont .masonryGridItem {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 15px;
  break-inside: avoid;
}

.masonryCont .modalTrigger {
  padding: 0;
  margin: 0;
  background: transparent;
  transition: var(--default-animation);
}

.masonryCont .modalTrigger:hover {
  /* GRANT */
  /* box-shadow: rgb(240, 240, 240) 0px 0px 15px 7.5px; */
  /* box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 15px 5px; */
  /* box-shadow: 5px 6.5px 2.5px 0px rgb(200, 200, 200); */
  scale: 1.03;
}

.masonryCont .masonryGridItem iframe {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-width: 10vw !important;
  min-height: 315px !important;
}

@media only screen and (max-width: 1200px) {
  .masonryCont .masonryGridCont {
    column-count: 2;
  }
}

@media only screen and (max-width: 768px) {
  .masonryCont .masonryGridCont {
    column-count: 1;
  }
}

.photoViewer.overlay {
  position: fixed;
  z-index: 100000;
  background: #fff;
  top: 5vh;
  bottom: 5vh;
  left: 5vw;
  right: 5vw;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 100px 100px;
  display: none;
}

.photoViewer.overlay button.closeDialog {
  max-width: 50px;
  min-width: 65px;
  max-height: 65px;
  min-height: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  padding: 0;
  background: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  transition: var(--default-animation);
  position: absolute;
  left: -90px;
}

.photoViewer.overlay .dialogContainer {
  min-height: calc(100% - 6rem);
  width: 100%;
  padding: 3rem;
}

.photoViewer.overlay .dialogContainer .photoCont {
  width: 100%;
}

.photoViewer.overlay .dialogContainer .closeButton {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photoViewer.overlay .videoControls {
  position: relative;
}

.photoViewer.overlay .dialogContainer .closeButton .videoControls {
  position: relative;
}

.photoViewer.overlay .dialogContainer .videoCont {
  padding: 3rem;
  min-height: 100%;
  width: 100%;
}

.photoViewer.overlay .dialogContainer .videoCont .iframeCont {
  width: 100%;
  height: 100%;
  min-height: max-content;
  min-width: 100%;
}

.photoViewer.overlay .dialogContainer .videoCont #dialogIframe {
  width: 100%;
  height: 100%;
  min-height: max-content;
  min-width: 100%;
}

.photoViewer.overlay .photoViewCont {
  justify-content: space-between;
  align-items: center;
  min-height: 50vh;
  gap: 1rem;
  max-height: 74vh;
}

.photoViewer.overlay .photoViewCont .imageCont {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  min-height: 100%;
  justify-content: center;
}

.photoViewer.overlay .photoViewCont .imageCont .viewImg {
  max-width: 100%;
  min-width: 100%;
  max-height: 100%;
  min-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.photoViewer.overlay .photoViewCont .imageCont figure {
  max-width: 100%;
  min-width: 100%;
  max-height: 100%;
  min-height: 100%;
  object-fit: contain;
  object-position: center center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.photoViewer.overlay .photoViewCont .imageCont figcaption {
  font-size: 1.25rem;
  font-weight: strong;
  text-align: center;
}

.photoViewer.overlay .carouselArrow {
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 50%;
  background: #fff;
  border: #000 1px solid;
  margin: 0;
}

@media only screen and (max-width: 950px) {
  .photoViewer.overlay {
    top: 1vh;
    bottom: 1vh;
    left: 1vw;
    right: 1vw;
  }

  .photoViewer.overlay .photoViewCont {
    display: grid;
    grid-template-areas: "img img" "larrow rarrow";
  }

  .photoViewer.overlay .photoViewCont .leftArrowCont {
    grid-area: larrow;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photoViewer.overlay .photoViewCont .imageCont {
    grid-area: img;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .photoViewer.overlay .photoViewCont .rightArrowCont {
    grid-area: rarrow;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media only screen and (max-width: 500px) {
  .photoViewer.overlay .dialogContainer {
    padding: 1rem;
  }

  .photoViewer.overlay .dialogContainer .photoCont {
    justify-content: space-around;
  }
}

.carouselArrow {
  background: transparent !important;
  border-width: 3px !important;
}

.accessibleTable thead th {
  background: var(--district-light-color);
  padding: 1rem 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  min-width: 5rem;
  text-align: center;
}

.accessibleTable thead tr {
  border-bottom: black 2px solid;
}

.accessibleTable tbody tr {
  border-bottom: black 1px solid;
}

.accessibleTable tbody th {
  background: var(--district-light-color);
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  min-width: 5rem;
  text-align: center;
}

.accessibleTable tbody td {
  border: none;
  font-size: 1.1rem;
  min-width: 5rem;
  background: #fff;
  text-align: center;
}

.responsiveTable {
  overflow-x: scroll;
}

.imgCard {
  max-width: 100%;
  min-width: 18rem;
  width: fit-content;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 5px;
	justify-content:space-between;
}

.imgCard .imgCont {
  max-width: 100%;
  min-width: 290px;
  width: 100%;
}

.imgCard .imgCont img {
  object-fit: cover;
  object-position: center;
  min-width: 100%;
}

.imgCard .arrow-link {
  padding: 1rem 1.5rem;
  background: #000;
  color: #fff;
  display: flex;
  max-width: 100%;
}

.imgCard .arrow-link:after {
  color: #fff;
}

.imgCard .arrow-link:hover {
  color: #fff;
  text-decoration: underline;
}

.imgCard .textCont {
  padding: 1rem 2rem;
}

.grid .card.card-sm.pad-1r.bg-white {
  margin: 0;
  width: calc(100% - 4rem);
}

.card.card-sm.pad-1r.bg-white {
  padding: 2rem;
}

a#de {
  text-decoration: none;
  font-weight: normal;
}



@media only screen and (max-width: 1064px) {
	.headerWithImage img {
    	width: 100%;
    	max-width: 100%;
   	 	height: auto;
    	max-height: 400px;
    	min-height: max-content;
  }

  .headerWithImage .headImg {
    flex: 1;
    height: 100%;
    width: 100%;
    min-height: auto;
    max-height: max-content;
  }
	
}


@media only screen and (min-width: 1064px){
	.grid.fullHeight > div > div{
		min-height:100% !important;
	}
}