/*
   General Styles for Main Site Pages
*/

/*
General Rules

Put styles in general-css-2025 when possible

Build CSS for mobile first, then add tablet and desktop media query styles

The breakpoints are
375px to 767px for mobile (content stretches but does not reshape itself)
   default CSS  (preferred)
   @media (max-width: 767px) {
 768px to 1247px for tablet (content stretches but does not reshape itself)
   @media (min-width: 768px) { (preferred)
   @media (min-width: 768px) and (max-width: 1247px) { (for tablet only)
1248px and up for desktop (content is a fixed width)
   @media (min-width: 1248px) { (preferred)
-- use MIN-WIDTH instead of MAX-WIDTH if possible


- Use variables for colors, fonts, etc.
- Use variables for the container widths, side margins, border radii, etc.
- Use variables for the font sizes, line heights, letter spacings, etc.
- Use variables for the padding, margin, border, etc.
- Use variables for the width, height, etc.
- Use flex when possible.
- Use variables for the gap, spacing, etc.

*/

/* TODO switch all max-width to min-width */
/* TODO make sure all mobile margins are 30 not 40 */
/* TODO fix the link arrow so that it does not wrap to the next line


/* General styles to reset CSS before we begin. */

img, table, tr, td, div, a, form { border: 0; padding: 0; margin: 0; }
a { text-decoration: none; color: black; }


/*
   General Styles for Main Site Pages
*/

/* Some Variables. */

:root {
    --Desktop-Container-Width: 1248px;
    --Tablet-Container-Width: 600px;

    --Desktop-Side-Margin: 40px;
    --Tablet-Side-Margin: 30px;
    --Mobile-Side-Margin: 30px;

    --Container-Gap-Wide: 60px;
    --Container-Gap-Narrow: 32px;

    --Desktop-Border-Radius: 24px;
    --Tablet-Border-Radius: 24px;
    --Mobile-Border-Radius: 16px;

    --Color-Dark-Gray: #4B4B4B;
    --Color-White: #FFFFFF;

    --card-image-zoom: 1.1;

	--color-usc-cardinal: rgba(153,0,0,1);
	--color-usc-gold: rgba(255,204,0,1);
	--color-white: rgba(255,255,255,1);
	--color-black: rgba(0,0,0,1);
	--color-black-30-k: rgba(204,204,204,1);
	--color-black-70-k: rgba(118,118,118,1);
	--color-peach: rgba(242,198,167,1);
	--color-pink: rgba(242,97,120,1);
	--color-blue: rgba(43,85,151,1);
	--color-olive: rgba(144,140,19,1);
	--color-yellow: rgba(253,224,33,1);
	--color-lime: rgba(218,227,67,1);
	--color-orange: rgba(255,144,21,1);
	--color-red: rgba(228,61,48,1);
	--color-dark-gray: rgba(60,60,60,1);
	--color-light-gray: rgba(178,178,178,1);
	--color-lighter-gray: rgba(224,224,224,1);
	--color-usc-gold-20-tint: rgba(255,245,204,1);
	--color-usc-gold-40-tint: rgba(255,235,153,1);
	--color-black-80: rgba(51,51,51,1);

	--color-about-us-bg: var(--color-orange);
	--color-about-us-fg: var(--color-usc-cardinal);

	--color-education-bg: var(--color-usc-cardinal);
	--color-education-fg: var(--color-usc-gold);

	--color-people-bg: var(--color-yellow);
	--color-people-fg: var(--color-black);

	--color-research-bg: var(--color-red);
	--color-research-fg: var(--color-black);

	--color-patient-care-bg: var(--color-peach);
	--color-patient-care-fg: var(--color-usc-cardinal);

	--color-community-bg: var(--color-lime);
	--color-community-fg: var(--color-black);

	--color-news-and-events-bg: var(--color-black-80);
	--color-news-and-events-fg: var(--color-usc-gold);

    --megamenu-gap: 24px;


}

/* National 2 Regular */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* National 2 Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-regular-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* National 2 Medium */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* National 2 Medium Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* National 2 Bold */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* National 2 Bold Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* National 2 ExtraBold */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* National 2 ExtraBold Italic */
@font-face {
  font-family: "National 2";
  src: url("/fonts/national-2-extrabold-italic.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Body, main page container, and page (which splits into sidebar and content). */

body
   { font-family: 'Source Sans', helvetica, arial, sans-serif;
     margin: 0; background-color: white; }

#container { margin: 0; }

#chan-identity-desktop { display: none; }
#chan-identity-mobile { display: block; }
@media (min-width: 768px) {
    #chan-identity-desktop { display: block; }
    #chan-identity-mobile { display: none; }
}

#page { display: flex; flex-direction: row; align-items: flex-start; margin: 0; }


/* Main Menu Colors */

.active, #main-nav-wrapper {
  max-width: var(--Desktop-Container-Width);
  margin: 0 auto;
}
/*
#main-menu li#aboutus { background-color: var(--color-about-us-bg); }
#main-menu li#aboutus > a { color: var(--color-white); }

#main-menu li#community { background-color: var(--color-community-bg); }
#main-menu li#community a { color: var(--color-white); }

#main-menu li#education { background-color: var(--color-education-bg); }
#main-menu li#education > a { color: var(--color-white); }

#main-menu li#newsandevents { background-color: var(--color-news-and-events-bg); }
#main-menu li#newsandevents a { color: var(--color-white); }

#main-menu li#patient-care { background-color: var(--color-patient-care-bg); }
#main-menu li#patient-care a { color: var(--color-white); }

#main-menu li#people { background-color: var(--color-people-bg); }
#main-menu li#people a { color: var(--color-white); }

#main-menu li#research { background-color: var(--color-research-bg); }
#main-menu li#research a { color: var(--color-white); } */


.sm-mint #newsandevents a span.sub-arrow:before
{ content: "";
  display: block;
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11' fill='none'><path d='M15.1421 1.6699L8.07107 8.74096L1 1.6699' stroke='black' stroke-width='2'/></svg>"); /* up */
  background-repeat: no-repeat;
  background-size: contain;
}

.sm-mint #newsandevents a.highlighted span.sub-arrow:before,
.sm-mint #newsandevents a.current span.sub-arrow:before,
.sm-mint #newsandevents a:hover span.sub-arrow:before,
.sm-mint #newsandevents a:focus span.sub-arrow:before,
.sm-mint #newsandevents a:active span.sub-arrow:before
{ content: "";
  display: block;
  width: 16px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M0.999954 9.03564L8.07102 1.96458L15.1421 9.03564' stroke='white' stroke-width='2'/></svg>"); /* down */
  background-repeat: no-repeat;
  background-size: contain;
}
#main-menu li#newsandevents .sm-nowrap a {
    color: var(--color-black);
}

/* Section banner (except section-specific colours). */

#colour-banner { display: none; }
#section-banner-mobile { display: block; margin-top: 10px; }
#section-banner-mobile img { display: block; width: 100%; height: auto; }
#section-banner-desktop { display: none; }

@media (min-width: 768px) {
   #colour-banner { display: block; height: 0.75vw; }
   #section-banner-desktop { display: block; }
   #section-banner-desktop img { display: block; width: 100%; height: auto; }
   #section-banner-mobile { display: none; }
}



/* Quick Links */


.arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-usc-cardinal);
  color: var(--color-usc-gold);
  white-space: nowrap;
  margin-left: .15em;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  text-indent: 1px;
  overflow: hidden;        /* clip anything outside */
  background-image: url('/assets/chan/icons/arrows/gold-arrow-13.svg');
  background-repeat: no-repeat;
  background-position: center;

  /* TODO fix the link arrow so that it does not wrap to the next line */

  /* Alignment tweak */
  position: relative;
  top: -1px;

  /* Hide ⟩ text behind the SVG */
  color: transparent;
  vertical-align: middle;
}



/* Underline effect */
#content .links a,
#content .animate a {
  position: relative;
  display: inline-block;  /* ⬅ important! */
  text-decoration: none;  /* avoid default underline */
}

#content .links a::after,
#content .animate a::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 3px;
  width: 0;
  background-color: #FDE021; /* Customize color */
  transition: width 300ms ease-out;
  z-index: 1;
}

/* Hover/focus/active expand underline */
#content .links a:hover::after,
#content .animate a:hover::after,
#content .links a:focus::after,
#content .animate a:focus::after,
#content .links a:active::after,
#content .animate a:active::after {
  width: 100%;
}


/* Navigation breadcrumbs (except section-specific colours). */

#content .crumbs-section {
    background-color: var(--color-usc-gold-20-tint);
    width: 100%;
    position: relative;
    overflow-x: clip; /* Prevent unwanted horizontal scroll */
  }
  /* Needs to be opaque for sticky positioning. */
/*
#crumbs { background-color: rgb(245, 245, 241); }
@media (min-width: 768px) { #crumbs { background-color: rgb(158, 156, 112, 0.1); } }
*/

#crumbs
   { font-family: "National 2"; position: sticky; top: 5px;
     margin: 0; border: 5px solid var(--color-usc-gold-20-tint); border-radius: 0;
     color: var(--color-black);
     padding: 0 var(--Desktop-Side-Margin) 0 var(--Desktop-Side-Margin);
}
#crumbs .crumb { font-size: 100%; line-height: 120%; }
#crumbs .crumb a
   { color: var(--color-black); background-color: transparent; font-weight: 300;
     padding: 0; border-radius: 0; }
#crumbs .crumb a:hover { color: #202020; border-bottom: 1px solid #202020; }
#crumbs .crumb-divider { padding: 0 7px; }

@media (min-width: 768px)
   { #crumbs {
        max-width: var(--Desktop-Container-Width);
        position: static;
        margin: 0 auto;
        padding: 0 var(--Desktop-Side-Margin) 5px var(--Desktop-Side-Margin);
        border: 0;
     }
     #crumbs .crumb {
        font-family: "National 2";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }
     #crumbs .crumb-divider { font-size: 20px; }
     #crumbs .crumb-divider { padding: 6px 6px 6px 8px; } /* slight kerning */
    }


/* Sidebar. */

#sidebar { display: none; }
@media (min-width: 768px) {
   #sidebar { display: block; flex-basis: 28%; width: 100%; position: sticky; top: 15px;
              margin-bottom: 50px; margin-top: 15px; font-size: 1.3vw; }
   #sidebar .active { background-color: #eeeeee; }
}


/* Side-menu (except section-specific colours). */

.side-menu
   { font-family: 'Source Sans'; font-weight: 300; margin-bottom: 1em; position: sticky; }
.side-menu p.side-menu-header
   { font-weight: 500; margin: 0; padding: 5px; font-size: 120%; line-height: 120%; }
.side-submenu.expanded { background-color: #f0f0f0; border-top: 1px solid #c0c0c0; }
.side-submenu.expanded .side-submenu.expanded
   { background-color: #d8d8d8; border-top: 1px solid #a8a8a8; }
.side-menu a, .side-menu span
   { display: block; padding: 3px 5px; border-top: 1px solid #f0f0f0; }
.side-menu .side-submenu.expanded a, .side-menu .side-submenu.expanded span
   { border-top: 1px solid transparent; }

.side-menu a:hover { background-color: #f4f4f4; }
.side-menu .side-submenu.expanded a:hover { background-color: #e4e4e4; }
.side-menu .side-submenu.expanded .side-submenu.expanded a:hover { background-color: #cccccc; }

.side-menu a.bestmatch,
.side-menu .side-submenu.expanded a.bestmatch,
.side-menu .side-submenu.expanded .side-submenu.expanded a.bestmatch
   { background-color: grey; color: white; border-right: 5px solid black; }

.side-menu .side-submenu a.side-submenu-header { position: relative; padding-right: 25px; }
.side-menu .side-submenu a.side-submenu-header::after
   { content: "⟩";  position: absolute; top: 0; right: 10px; transform: rotate(90deg) scale(2.0, 1.0);
     font-size: 120%; font-weight: 400; color: #c0c0c0; }
.side-menu .side-submenu.expanded > a.side-submenu-header,
.side-menu .side-submenu.expanded > span.side-submenu-header { font-weight: 400; }
.side-menu .side-submenu.expanded > a.side-submenu-header::after
   { transform: rotate(-90deg) scale(2.0, 1.0); top: -1px; right: 12px;
     font-weight: 700; color: black; }


/* Content. */

#content { margin: 0 10px; }
@media (min-width: 768px)   {
     #content { flex-basis: 72%; margin: 0 10% 0 30px; font-size: 1.3vw; }
}

/* Items that get hidden on mobile */
.mobile-hide { display: none; }
@media (min-width: 768px)   {
    .mobile-hide { display: initial; }
}
.desktop-hide { display: initial; }
@media (min-width: 768px)   {
    .desktop-hide { display: none; }
}

/* Headers. */

#content h1
   { font-size: 225%; font-weight: 800; color: #990000;
     margin-top: 0.75em; margin-bottom: 0.75em; line-height: 120%; }
#content h2
   { font-size: 200%; font-weight: 800; color: black;
     margin-top: 0; margin-bottom: 0; line-height: 120%; }
#content h3
   { font-size: 160%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }
#content h4
   { font-size: 130%; font-weight: 800; color: black;
     margin-top: 1.5em; margin-bottom: 0.75em; line-height: 130%; }

@media (max-width: 768px)   {
    #content h2  { font-size: 250%; }
}

#content h3.subtitle
   { font-size: 140%; font-weight: 400; margin-top: 0; line-height: 120%;
     color: #505050; }

#content h1 a, #content h2 a, #content h3 a, #content h4 a
   { font-weight: 800; color: black; background-color: white; padding: 0; border-radius: 0; }
#content h1 a:hover, #content h2 a:hover, #content h3 a:hover, #content h4 a:hover
   { background-color: white; text-decoration-line: underline; text-decoration-thickness: 1px; }

/* The use of !important here is a hack, which might be reworked later, but I think
   we can get away with it. The point is that these styles, which are fine layout
   tweaks, should always have priority. */

#content h1.flat, #content h2.flat, #content h3.flat, #content h4.flat
   { margin-top: 0 !important; margin-bottom: 0 !important; }
#content h1.thin, #content h2.thin, #content h3.thin, #content h4.thin
   { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content h1.flattop, #content h2.flattop, #content h3.flattop, #content h4.flattop
   { margin-top: 0 !important; }
#content h1.thintop, #content h2.thintop, #content h3.thintop, #content h4.thintop
   { margin-top: 0.25em !important; }
#content h1.flatbase, #content h2.flatbase, #content h3.flatbase, #content h4.flatbase
   { margin-bottom: 0 !important; }
#content h1.thinbase, #content h2.thinbase, #content h3.thinbase, #content h4.thinbase
   { margin-bottom: 0.25em !important; }


/* Paragraphs, lists, hyperlinks (except section-specific colours). */

#content p.flat, #content li.flat { margin-top: 0 !important; margin-bottom: 0 !important; }
#content p.thin, #content li.thin { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
#content p.flattop, #content li.flattop { margin-top: 0 !important; }
#content p.thintop, #content li.thintop { margin-top: 0.25em !important; }
#content p.flatbase, #content li.flatbase { margin-bottom: 0 !important; }
#content p.thinbase, #content li.thinbase { margin-bottom: 0.25em !important; }
#content div.bigger p, #content div.bigger li
   { font-size: 130%; margin-top: 0.5em; margin-bottom: 0.5em; }

#content ul, #content ol { margin: 0 0 1em 0; }
#content li { margin-top: 0.5em; margin-bottom: 0.5em; }
#content li p, #content li li, #content li li li, #content blockquote { font-size: 100%; }
#content ul.compact li, #content ol.compact li { margin-top: 0.2em; margin-bottom: 0.2em; }
#content ul > li::marker { font-size: 150%; color: rgb(1, 1, 1, 0.1); }
#content ul ul li::marker { color: rgb(1, 1, 1, 0.3); }
#content ol ul li::marker { color: rgb(1, 1, 1, 0.7); }
#content ul.checkmarks { list-style-type: '\2713 '; }
#content ul.checkmarks li::marker { font-size: 120%; color: black; }

#content a.underlined, #content a.underlined:hover
   { padding: 0; border: 0; margin: 0; border-radius: 0;
     color: black; background-color: transparent; }
#content a.underlined:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content a { word-wrap: break-word; }
#content a.formanchor { visibility: hidden; }
#content .pronouns
   { display: block; font-weight: 300; font-size: 60%; margin-top: -0.3em; }


/* Styles for APA/publication list. */

#content p.apa, #content p.hanging
   { padding-left: 0.25in; text-indent: -0.25in; }
@media (min-width: 768px)
   { #content p.apa, #content p.hanging
     { padding-left: 0.5in; text-indent: -0.5in; } }
#content div.abstract { padding: 0.5em 1em; background-color: #f0f0f0; }
#content div.abstract p { padding: 0.5em 0; margin: 0; }


/* Special styles for tables. */

#content .datatable
   { width: 100%; margin-bottom: 1em; text-align: center;
     border-collapse: collapse; border-spacing: 0;
     border-left: 1px solid #999999; border-top: 1px solid #999999; }
#content .datatable.left { text-align: left; }
@media (min-width: 768px) { #content .datatable { font-size: 100%; } }
#content .datatable td, #content .datatable th
   { font-size: 110%; line-height: 120%; padding: 5px;
     border-right: 1px solid #999999; border-bottom: 1px solid #999999; }
#content .datatable.big td, #content .datatable.big th { font-size: 120%; }
#content .datatable th { font-weight: 500; background-color: #eeeeee; vertical-align: bottom; }
#content .datatable td { font-weight: 300; vertical-align: top; }

#content .plaintable { font-size: 120%; }
#content .plaintable .right { text-align: right; }
#content .plaintable td { vertical-align: top; font-weight: 300; line-height: 150%; padding: 2px; }


/* Special-case styles attaching icons to file-types, etc. */

#content a[href $='.pdf'], .newstext a[href $='.pdf']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/pdf.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.doc'], #content a[href $='.docx'], #content a[href $='.dotx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/word.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.xls'], #content a[href $='.xlsx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/excel.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a[href $='.ppt'], #content a[href $='.pptx'], #content a[href $='.potx']
{ padding-left: 30px; background-image: url(/assets/chan/icons/filetypes/powerpoint.png);
  background-position: center left; background-size: 25px 25px; background-repeat: no-repeat; }

#content a.underlined[href $='.pdf'], #content a.underlined[href $='.doc'],
#content a.underlined[href $='.docx'], #content a.underlined[href $='.dotx'],
#content a.underlined[href $='.xls'], #content a.underlined[href $='.xlsx'],
#content a.underlined[href $='.ppt'], #content a.underlined[href $='.pptx'],
#content a.underlined[href $='.potx']
	{ padding-left: 30px; }

/*
#content a[href ^='mailto:']
{ padding-left: 28px; background-image: url(/assets/chan/icons/mail-black.png);
  background-position: center left 4px; background-size: 18px 18px; background-repeat: no-repeat; }

#content #social-media a[href ^='mailto:']
{ padding-left: 0; background-image: none; }
*/

#content span.map-pin
{ padding-left: 24px; background-image: url(/assets/chan/icons/map-pin-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }

#content span.phone
{ padding-left: 24px; background-image: url(/assets/chan/icons/phone-black.png);
  background-position: center left; background-size: 20px 20px; background-repeat: no-repeat; }


/* Pagination styles. */

.paginationcontrols { font-size: 130%; }
.paginationcontrols a, .paginationcontrols strong { margin-left: 0.5em; }


/* Styles for blog/news posts. */

#content .blogpost { margin-top: 2em; margin-bottom: 1em; clear: right; }
#content .blogpost img { max-width: 100%; height: auto; }

#content .blogpost #social-media { margin: 1em 0 0 0; }
#content .blogpost #social-media a
   { background-color: white; padding: 0; margin: 0; }
#content .blogpost #social-media img
   { height: 30px; width: 30px; padding: 0; opacity: 0.25; filter: alpha(opacity=25); }
#content .blogpost #social-media img:hover
   { opacity: 1.0; filter: alpha(opacity=100); }
@media (min-width: 768px)
   { #content .blogpost #social-media img { width: 3.5%; height: auto; margin-right: 5px; } }


/* Styles for content images/photos. */

#content .contentimage { width: 100%; margin: 1.5em 0; }
#content .contentimage img { width: 100%; height: auto; display: block; }
#content .contentimage.shadow { box-shadow: 0 3px 6px #999999; }
#content img { max-width: 100%; height: auto; }  /* Just in case. */

#content .contentimage.centered { width: 75%; margin: 1.5em auto; }
#content .contentimage.centered60 { width: 60%; margin: 1.5em auto; }
#content .contentimage.centered50 { width: 50%; margin: 1.5em auto; }
#content .contentimage.centered.fullwidthmobile,
#content .contentimage.centered60.fullwidthmobile,
#content .contentimage.centered50.fullwidthmobile { width: 100%; }

#content .contentimage.floatright40 { float: right; width: 40%; margin: 0 0 10px 10px; }
#content .contentimage.floatright30 { float: right; width: 30%; margin: 0 0 10px 10px; }
#content .contentimage.floatright25 { float: right; width: 25%; margin: 0 0 10px 10px; }
#content .contentimage.floatleft40 { float: left; width: 40%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft30 { float: left; width: 30%; margin: 0 10px 10px 0; }
#content .contentimage.floatleft25 { float: left; width: 25%; margin: 0 10px 10px 0; }

@media (min-width: 768px)
{ #content .contentimage.centered.fullwidthmobile { width: 75%; }
  #content .contentimage.centered60.fullwidthmobile { width: 60%; }
  #content .contentimage.centered50.fullwidthmobile { width: 50%; }

  #content .contentimage.floatright { float: right; width: 50%; margin: 0 0 20px 20px; }
  #content .contentimage.floatleft { float: left; width: 50%; margin: 0 20px 20px 0; }
  #content .contentimage.floatright40,
  #content .contentimage.floatright30,
  #content .contentimage.floatright25 { margin: 0 0 20px 20px; }
  #content .contentimage.floatleft40,
  #content .contentimage.floatleft30,
  #content .contentimage.floatleft25 { margin: 0 20px 20px 0; } }

#content .contentimage a
   { margin: 0; padding: 0; border: 0; color: white; background-color: white; }
#content .contentimage a img:hover { opacity: 0.75; filter: alpha(opacity=75); }

#content .contentimage p { margin: 0; }
#content .contentimage p.caption
   { padding: 0.5em; font-weight: 300; font-size: 110%;
     line-height: 150%; background-color: #f8f8f8; }
#content .contentimage p.caption.clear { background-color: inherit; }
#content .contentimage p.caption a
   { font-weight: 400; padding: 0; color: black; background-color: transparent; }
#content .contentimage p.caption a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content li .contentimage p.caption { font-size: 87%; }

#content .contentimage.righttext { text-align: right; }
#content .contentimage.centertext { text-align: center; }


/* Styles for generic form. */

.chanform input[type="text"], .chanform input[type="password"], .chanform textarea
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300;
     width: 95%; border: 1px solid #cccccc; padding: 3px; -appearance: none; }
.chanform input[type="radio"], .chanform input[type="checkbox"], .chanform input[type="submit"], .chanform input[type="reset"], .chanform input[type="button"], .chanform select
   { font-family: 'Source Sans'; font-size: 100%; font-weight: 300; }
.chanform input[type="radio"], .chanform input[type="checkbox"]
   {   /* Double-sized Checkboxes */
      -ms-transform: scale(1.4); /* IE */
      -moz-transform: scale(1.4); /* FF */
      -webkit-transform: scale(1.4); /* Safari and Chrome */
      -o-transform: scale(1.4); /* Opera */
      transform: scale(1.4); }
.chanform input[type="text"].additional { width: auto; }
.chanform input:focus, .chanform textarea:focus { background-color: #ffff99; }

.chanform > table, .chanform > div > table, .chanform > div > div > table
   { width: 100%; font-size: 120%; line-height: 125%; }
.chanform td { vertical-align: top; }
.chanform td.label
   { width: 35%; text-align: right; padding: 5px; }
#content .chanform td.label p
   { margin: 0; font-weight: 300; font-size: 90%; line-height: 120%; }
.chanform td.value
   { font-size: 90%; font-weight: 300; width: 65%; text-align: left; padding: 5px; }

.chanform #Your_URL { display: none; }
.chanform .shaded { background-color: #eeeeee; padding: 0.5em; }
.chanform .list-of-checkboxes { margin-left: 2em; }
.chanform .list-of-checkboxes p { margin: 0.25em 0; }
.chanform fieldset { border: 0; padding: 0; margin: 0; }


/* Styles for protected content login form. */

.loginform input[type="text"], .loginform input[type="password"], .loginform input[type="submit"]
   { font-family: 'Source Sans'; font-size: 140%; font-weight: 300; width: 95%;
     border: 1px solid #cccccc; padding: 3px; -appearance: none; }
.loginform input[type="text"], .loginform input[type="password"] { width: 60%; }
.loginform input[type="submit"] { width: auto; color: black; background-color: #f0f0f0; }
.loginform input[type="submit"]:hover { background-color: #e0e0e0; }


/* Some basic use of CSS flex to allow simple responsive rows/columns. */

#content div.flexbox
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0; }
#content div.flexbox.fixed { flex-direction: row; }
#content div.flexbox.fixed.reverse { flex-direction: row-reverse; }
#content div.flexbox div { flex-basis: 48%; width: auto; }
@media (min-width: 768px)
   { #content div.flexbox { flex-direction: row; }
     #content div.flexbox.reverse { flex-direction: row-reverse; }
     #content div.flexbox.three div { flex-basis: 31%; }
     #content div.flexbox.four div { flex-basis: 24%; } }


/* Styles for video and other embed containers. */

video { width: 100%; height: auto; margin-bottom: 2em; }

.video-container
   { position: relative; padding-bottom: 56.25%; padding-top: 30px;
     height: 0; overflow: hidden; margin-bottom: 2em; clear: both; }
.video-container iframe, .video-container object, .video-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-container-portrait
   { display: block; text-align: center; }

.map-container
   { position: relative; padding-bottom: 100%; padding-top: 30px; height: 0; overflow: hidden; }
.map-container iframe, .map-container object, .map-container embed
   { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Styles for standard section divider. */

#content .section-divider
   { text-align: center; margin-top: -25px; margin-bottom: -30px;
     font-size: 500%; line-height: 100%; color: rgba(0, 0, 0, 0.1); }


/* Styles for next links. */

#content .nextlinks { text-align: right; margin-top: 1.5em; }
#content .nextlinks p { margin: 0; padding: 0; }


/* Simple alert box. */

#content div.alertbox, #content p.alertbox
   { background-color: #f0f0f0; border-radius: 3px; }
#content div.alertbox { padding: 0.5em 1em; margin-bottom: 1em; }
#content div.alertbox.alignright { text-align: right; }
#content p.alertbox { padding: 1em; }
#content div.alertbox p, #content div.alertbox h3, #content div.alertbox h4
   { padding: 0.5em 0; margin: 0; }
#content div.alertbox a, #content p.alertbox a { background-color: #e0e0e0; }
#content div.alertbox a:hover, #content p.alertbox a:hover
   { background-color: #d8d8d8; }


/* Quotation box. */

#content div.quotation
   { position: relative; border: 0px solid #d0d0d0; border-radius: 40px;
     padding: 0.5em 3em; margin: 0 0 1em 0; background-color: rgba(0.97,0.97,0.97,0.03); }
#content div.quotation p, #content div.quotation h3, #content div.quotation h4
   { padding: 0.5em 0; margin: 0; font-size: 110%; color: rgba(1,1,1,0.6); }
#content div.quotation::before
   { content: "“";  position: absolute; top: -5px; left: 10px;
     font-size: 400%; font-weight: 700; color: rgba(0.95,0.95,0.95,0.1); }
#content div.quotation::after
   { content: "”";  position: absolute; bottom: -30px; right: 10px;
     font-size: 400%; font-weight: 700; color: rgba(0.95,0.95,0.95,0.1); }
@media (min-width: 768px)
   { #content div.quotation { padding: 0.5em 4.25em; }
     #content div.quotation::before { font-size: 500%; top: -5px; left: 10px; }
     #content div.quotation::after { font-size: 500%; bottom: -40px; right: 10px; } }


/* Drop-downs. */

#content a.dropdown, #content a.dropdownsub
   { display: block; padding: 0.5em 70px 0.5em 0.5em !important; position: relative;
     color: black; font-weight: 300; line-height: 125%; clear: right; }
#content a.dropdown::after, #content a.dropdownsub::after
   { content: "⟩"; position: absolute; top: 10px; right: 25px; transform: rotate(90deg) scale(2.0, 1.0);
     font-family: 'Source Sans'; font-size: 140%; font-weight: 400; color: #b0b0b0; }
#content a.dropdownsub::after
   { color: #909090; }
#content a.dropdown.dropped::after, #content a.dropdownsub.dropped::after
   { top: 10px; right: 25px; transform: rotate(-90deg) scale(2.0, 1.0); }
#content a.dropdown { background-color: #f0f0f0; }
#content a.dropdown:hover { background-color: #e0e0e0; }
#content a.dropdownsub { background-color: #d0d0d0; }
#content a.dropdownsub:hover { background-color: #c0c0c0; }
#content div.indent { margin-left: 2em; }

#content a.dropdown.big { padding: 0.5em; font-size: 125%; margin: 0 0 1em 0; }
#content a.dropdown.nocontrol { padding-right: 0.5em !important; }
#content a.dropdown.nocontrol::after { content: ""; }


/* Content tags. */

#content span.tag, #content a.tag
   { padding: 0 8px; color: #404040; border: 1px solid #cccccc; border-radius: 6px;
     margin-right: 5px; white-space: nowrap; font-size: 90%; }
#content a.tag { background-color: white; font-weight: 300; }
#content a.tag:hover, #content a.tag.selected
   { color: black; border-color: black; background-color: #f8f8f8; }


/* Tags for news items. */

#content span.news-tag, #content a.news-tag,
#content span.student-blog-tag, #content a.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 .4em; color: rgba(0,0,0,0.6);
     border: 1px solid #cccccc; border-radius: 6px; margin-right: 3px; white-space: nowrap; }

#content a.news-tag, #content a.student-blog-tag { background-color: white; }
#content a.news-tag:hover, #content a.news-tag.selected, #content span.news-tag.selected,
#content a.student-blog-tag:hover, #content a.student-blog-tag.selected, #content span.student-blog-tag.selected
   { color: rgba(0,0,0,1); border-color: black; background-color: #f8f8f8; }


/* Tags for student blog. */

/*
#content a.student-blog-tag, #content span.student-blog-tag
   { font-weight: 300; font-size: 90%; padding: 0 3px; border: 1px solid white;
     border-radius: 6px; margin-right: 3px; white-space: nowrap; color: white; opacity: 0.5; }
*/

/* #content a.student-blog-tag.all,
#content span.student-blog-tag.all
   { background-color: rgba(128,128,128); } /* Grey */
/* #content a.student-blog-tag.admissions,
#content span.student-blog-tag.admissions
   { background-color: rgba(212,48,154); } /* Purple */
/* #content a.student-blog-tag.beginnings-and-endings,
#content span.student-blog-tag.beginnings-and-endings
   { background-color: rgba(212,48,154); } /* Purple */
/* #content a.student-blog-tag.balance,
#content span.student-blog-tag.balance
   { background-color: rgba(66,85,27); } /* Dark green */
/* #content a.student-blog-tag.classes,
#content span.student-blog-tag.classes
   { background-color: rgba(203,42,29); } /* Red */
/* #content a.student-blog-tag.community,
#content span.student-blog-tag.community
   { background-color: rgba(102,21,15); } /* Dark red */
/* #content a.student-blog-tag.diversity,
#content span.student-blog-tag.diversity
   { background-color: rgba(203,112,41); } /* Orange */
/* #content a.student-blog-tag.externships,
#content span.student-blog-tag.externships
   { background-color: rgba(208,155,53); } /* Gold */
/* #content a.student-blog-tag.fieldwork,
#content span.student-blog-tag.fieldwork
   { background-color: rgba(153,153,0); } /* Dark yellow */
/* #content a.student-blog-tag.first-gen,
#content span.student-blog-tag.first-gen
   { background-color: rgba(27,61,99); } /* Dark blue */
/* #content a.student-blog-tag.getting-involved,
#content span.student-blog-tag.getting-involved
   { background-color: rgba(132,170,53); } /* Green */
/* #content a.student-blog-tag.housing-and-transportation,
#content span.student-blog-tag.housing-and-transportation
   { background-color: rgba(78,173,167); } /* Aqua */
/* #content a.student-blog-tag.international,
#content span.student-blog-tag.international
   { background-color: rgba(54,122,197); } /* Blue */
/* #content a.student-blog-tag.life-hacks,
#content span.student-blog-tag.life-hacks
   { background-color: rgba(74,28,195); } /* Purple */
/* #content a.student-blog-tag.living-in-la,
#content span.student-blog-tag.living-in-la
   { background-color: rgba(163,42,196); } /* Magenta */
/* #content a.student-blog-tag.videos,
#content span.student-blog-tag.videos
   { background-color: rgba(147,42,56); } /* Cardinal */
/* #content a.student-blog-tag.what-are-osot,
#content span.student-blog-tag.what-are-osot
   { background-color: rgba(205,133,63); } /* Light brown */

/* #content span.student-blog-tag.selected,
#content a.student-blog-tag:hover
   { opacity: 0.8; border: 1px solid black; } */


/* Related links. */

#content .relatedlinks
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; margin: 0.5em 0; }
#content .relatedlinks p { flex-basis: 100%; margin: 0; padding: 0; }
#content .relatedlinks p.half { flex-basis: 48%; }

#content .relatedlinks p>br { display: none; }
#content .relatedlinks a
   { display: block; margin: 4px 0; padding: 0.5em 40px 0.5em 0.5em !important; position: relative;
     color: rgba(1,1,1,0.7); font-weight: 300; line-height: 125%; border-radius: 12px; }
#content .relatedlinks a.forward { text-align: right; }
#content .relatedlinks a.back
   { padding: 0.5em 0.5em 0.5em 40px !important; position: relative; }
@media (min-width: 768px) { #content .relatedlinks a { padding: 0.5em 60px 0.5em 0.5em; }
                            #content .relatedlinks a.back { padding: 0.5em 0.5em 0.5em 60px; } }
#content .relatedlinks a::after
   { content: "⟩"; position: absolute; top: 9px; right: 15px;
     font-size: 120%; font-weight: 400; }
#content .relatedlinks a.back::after
   { content: "⟨"; left: 15px; }


/* Image blocks. Rows of image + title/text. */

#content .imageblocks
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: flex-start; flex-wrap: wrap; }
#content .imageblocks.center
   { align-items: center; }
#content .imageblocks.twofixed,
#content .imageblocks.threefixed,
#content .imageblocks.fourfixed
   { flex-direction: row; }
#content .imageblocks div
   { flex-basis: 48%; width: 100%; margin-bottom: 1.5em; }
#content .imageblocks.compact div { margin-bottom: 0.5em; }
#content .imageblocks.twofixed div { flex-basis: 48%; }
#content .imageblocks.threefixed div { flex-basis: 31%; }
#content .imageblocks.fourfixed div { flex-basis: 24%; }
#content .imageblocks img { width: 100%; height: auto; }
#content .imageblocks a
   { border: 0; padding: 0; margin: 0; color: white; background-color: white; }
#content .imageblocks a:hover { background-color: white; }
#content .imageblocks a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imageblocks p
   { margin: 0.2em 0; text-align: left;
     font-size: 110%; line-height: 125%; color: #404040; }
#content .imageblocks p.imagetitle
   { margin: 0.25em 0; font-size: 130%; color: black; font-weight: 600; }
#content .imageblocks p a { color: black; }
#content .imageblocks p a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }
#content .imageblocks p.imagetitle a { font-weight: 600; }

@media (min-width: 768px)
   { #content .imageblocks { flex-direction: row; }
     #content .imageblocks.three div { flex-basis: 31%; }
     #content .imageblocks.four div { flex-basis: 24%; } }


/* Image summary. Two-column: image + title and descriptive text. */

#content .imagesummary
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; margin-bottom: 1.5em; }
#content .imagesummary .image { flex-basis: 25%; }
#content .imagesummary .image p { margin: 0; }
#content .imagesummary .image img { width: 100%; }
#content .imagesummary .image a { display: block; margin: 0; padding: 0; background-color: white; }
#content .imagesummary .image a img:hover { opacity: 0.75; filter: alpha(opacity=75); }
#content .imagesummary.shadow img { box-shadow: 0 3px 6px #999999; }
#content .imagesummary .imageinfo { flex-basis: 70%; }
#content .imagesummary .imageinfo p
   { font-size: 110%; line-height: 150%; margin: 0.2em 0; color: #404040; }
#content .imagesummary .imageinfo p.imagetitle
   { font-size: 150%; font-weight: 400; line-height: 130%; margin: 0.1em 0 0.25em 0; }
#content .imagesummary .imageinfo p.imagetitle a
   { font-weight: 400; padding: 0; color: black; background-color: white; }
#content .imagesummary .imageinfo p.imagetitle a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

@media (min-width: 768px)
   { #content .imagesummary .image { flex-basis: 28%; }
     #content .imagesummary .imageinfo { flex-basis: 68%; } }


/* Info-block. A very simple style, which collapses headers and paragraphs into a
   single block. Fine-tuning of layout might then be applied using the thin and flat
   CSS tweaks. */

#content .infoblock { margin-bottom: 2em; }
#content .infoblock h2, #content .infoblock h3, #content .infoblock h4, #content .infoblock p
   { margin: 0; }


/* Some useful global styles. */

.headergrey { color: #a0a0a0; }
.subheader { font-weight: 300; color: #606060; }
.uppercase { text-transform: uppercase; }
.cardinal { color: #990000; }
.center { text-align: center; }

/*
200: ExtraLight
300: Light
400: Regular
500: Medium
600: SemiBold
700: Bold
800: ExtraBold
900: Black
*/





#content { margin: 0 10px; }
@media (min-width: 768px) {
    #content {
      max-width: 100%;
      flex-basis: 100%;
      margin: 0 auto;
      padding: 0 var(--Desktop-Side-Margin);
    }
}


#content .h1,
#content .h2,
#content .h3,
#content .h4,
#content .h5 {
	font-family: "National 2", sans-serif;
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
	text-transform: none;
}

#content .h1 {
	font-size: 125px;
	font-weight: 900;
	line-height: 100px;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
#content .h2 {
	font-size: 40px;
	line-height: 114%;
	letter-spacing: -0.04em;
}
#content .h3 {
	font-size: 40px;
	line-height: 42px;
	letter-spacing: -0.04em;
}
#content .h4 {
	font-size: 32px;
	line-height: 36px;
}
#content .h5 {
	font-size: 24px;
	line-height: 26px;
}
@media (min-width: 768px) {
    #content .h1 {
        font-size: 125px;
        line-height: 100px;
        letter-spacing: -0.04em;
        text-transform: uppercase;
    }
    #content .h2 {
        font-size: 60px;
        letter-spacing: -0.04em;
    }
    #content .h3 {
        font-size: 40px;
        line-height: 42px;
        letter-spacing: -0.04em;
    }
    #content .h4 {
        font-size: 32px;
        line-height: 36px;
    }
    #content .h5 {
        font-size: 24px;
        line-height: 26px;
    }
}
/* General styles. */

body { font-family: 'Source Sans', helvetica, arial, sans-serif; margin: 0; background-color: #fafafa; }
img, table, tr, td, div, a, form { margin: 0; border: 0; padding: 0; }
a { text-decoration: none; color: black; }

/* Color themes — tweak to match your vars */
.div-red { background-color: var(--color-red); }
.div-usc-cardinal { background-color: var(--color-usc-cardinal); color: --color-white; }
.div-orange { background-color: var(--color-orange); }
.div-pink { background-color: var(--color-pink); }
.div-lime { background-color: var(--color-lime); }
.div-yellow { background-color: var(--color-yellow); }
.div-peach { background-color: var(--color-peach); }
.div-usc-gold { background-color: var(--color-usc-gold); }



/* Content (just an empty container, to allow for styling of content). */

#content { padding: 0; border: 0; margin: 0; }



/* Landing page headers. */

#content div.landing-header
   { display: flex; flex-direction: row; justify-content: space-between;
     align-items: flex-start; }
#content div.landing-header p
   { flex-basis: 48%; width: auto; margin-bottom: 0;
     font-size: 180%; font-weight: 300; line-height: 130%;  }
#content div.landing-header p.all { text-align: right; }
#content div.landing-header p.all a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }


/* Landing page rows. */

#content .landing-row
   { display: flex; flex-direction: column; justify-content: space-between;
     align-items: stretch; flex-wrap: wrap; margin: 0; }
#content .landing-row div { flex-basis: 48%; }
@media (min-width: 768px)
   { #content .landing-row { flex-direction: row; margin: 20px 0; }
     #content .landing-row div,
     #content .landing-row.one div { flex-basis: 100%; }
     #content .landing-row.two div { flex-basis: 49%; }
     #content .landing-row.three div { flex-basis: 32%; }
     #content .landing-row.three div.two-thirds { flex-basis: 66%; }
     #content .landing-row.four div { flex-basis: 24%; }
     #content .landing-row.four div.half { flex-basis: 49.33%; }
     #content .landing-row.four div.three-quarters { flex-basis: 74.66%; } }


/* Landing page cells. */

/* #content .landing-row .landing-cell
   { background-color: white; border: 1px solid #e0e0e0; } */
#content .landing-row .landing-cell.container
   { display: flex; flex-direction: column; gap: 20px; align-items: stretch;
     justify-content: space-between; background-color: inherit;
}

#content .landing-row .landing-cell div
   { flex-basis: 50%; flex-grow: 1; }
#content .landing-row .landing-cell div.one-quarter
   { flex-basis: 25%; }
#content .landing-row .landing-cell div.one-third
   { flex-basis: 33.3%; }
#content .landing-row .landing-cell div.two-thirds
   { flex-basis: 66.7%; }
#content .landing-row .landing-cell div.three-quarters
   { flex-basis: 75%; }


/* Landing page images. */

#content .landing-row .landing-cell img
   { display: block; width: 100%; height: 100%; object-fit: cover; }

#content .landing-row .landing-cell.image-top .landing-image
   { width: 100%; height: auto; }
#content .landing-row .landing-cell.image-top .landing-image.h100
   { height: 100px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h150
   { height: 150px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h200
   { height: 200px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h300
   { height: 300px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h400
   { height: 400px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h500
   { height: 500px; overflow: hidden; }
#content .landing-row .landing-cell.image-top .landing-image.h600
   { height: 600px; overflow: hidden; }

#content .landing-row .landing-cell.image-left
   { display: flex; align-items: center; }
#content .landing-row .landing-cell.image-left .landing-image
   { width: 100%; height: 100%; }
#content .landing-row .landing-cell.image-right
   { display: flex; flex-direction: row-reverse; align-items: center; }
#content .landing-row .landing-cell.image-right .landing-image
   { width: 100%; height: 100%; }

#content .landing-row .landing-cell.image-overlay
   { position: relative; }
#content .landing-row .landing-cell.image-overlay .landing-image
   { width: 100%; height: 100%; }
#content .landing-row .landing-cell.image-overlay .landing-text
   { width: 50%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w25
   { width: 25%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w33
   { width: 33.3%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w66
   { width: 66.6%; }
#content .landing-row .landing-cell.image-overlay .landing-text.w75
   { width: 75%; }

#content .landing-row .landing-cell.image-overlay .landing-text
   { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.top-left
   { top: 0; left: 0; transform: none; }
#content .landing-row .landing-cell.image-overlay .landing-text.top-center
   { top: 0; left: 50%; transform: translate(-50%, 0); }
#content .landing-row .landing-cell.image-overlay .landing-text.top-right
   { top: 0; right: 0; transform: none; }
#content .landing-row .landing-cell.image-overlay .landing-text.center-left
   { top: 50%; left: 0; transform: translate(0, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.center-right
   { top: 50%; right: 0; transform: translate(0, -50%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-left
   { top: 100%; left: 0; transform: translate(0, -100%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-center
   { top: 100%; left: 50%; transform: translate(-50%, -100%); }
#content .landing-row .landing-cell.image-overlay .landing-text.bottom-right
   { top: 100%; right: 0; transform: translate(0, -100%); }


/* Landing page text. */

#content .landing-row .landing-cell .landing-text.big
   { font-size: 120%; }
#content .landing-row .landing-cell .landing-text.huge
   { font-size: 150%; }
#scontent .landing-row .landing-cell h4
   { font-size: 140%; font-weight: 300; line-height: 130%; margin: 0.5em 0.75em; }
#content .landing-row .landing-cell p
   { font-size: 85%; font-weight: 300; line-height: 135%; margin: 0.25em 0 0 0; }
#content .landing-row .landing-cell p.tags
   { line-height: 175%; }
#content .landing-row .landing-cell h4 a:hover
   { background-color: white; text-decoration-line: underline; text-decoration-thickness: 1px; }
#content .landing-row .landing-cell p a
   { text-decoration: none; font-weight: 500; }
#content .landing-row .landing-cell p a:hover
   { text-decoration-line: underline; text-decoration-thickness: 1px; }

#content .landing-row .landing-cell.image-overlay .landing-text p,
#content .landing-row .landing-cell.image-overlay .landing-text h4
   { color: white; text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; }


/* Landing page tags. */

#content .landing-row .landing-cell p.tags a.news-tag, span.news-tag
   { font-weight: 300; font-size: 90%; padding: 0 3px; color: rgba(0,0,0,0.6);
     border: 1px solid #cccccc; border-radius: 6px; margin-right: 3px; white-space: nowrap; }
#content .landing-row .landing-cell p.tags a.news-tag:hover
   { color: rgba(0,0,0,1); border-color: black; background-color: #f8f8f8; text-decoration: none; }


/* Landing page special cases. */

#content .landing-row .landing-cell p span.date { font-weight: 400; color: #990000; }



/* General hero section  */

/* Hero section */
#content .hero-section {
    width: 100%;
    position: relative;
    overflow-x: clip; /* Prevent unwanted horizontal scroll */
  }

  /* Hero wrapper */
  #content .hero-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 24px var(--Desktop-Side-Margin) 0px var(--Desktop-Side-Margin);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    height: 638px;
  }

  /* Hero header */
  #content .hero-header {
    flex: 1;
    z-index: 2; /* stays above image */
  }
  #content .hero-header h1 {
      margin-top: 0.5em;

      /* Desktop - H1 */
      font-family: "National 2";
      font-size: 125px;
      font-style: normal;
      font-weight: 800;
      line-height: 100px; /* 80% */
      letter-spacing: -5px;
      text-transform: uppercase;
  }


  #content .hero-header2 {
      display: flex;
      padding: 24px 0px;
      flex-direction: column;
      align-items: flex-start;
      gap: 60px;
      flex: 1 0 0;
      align-self: stretch;
  }


  /* Hero image */
  #content .hero-image {
    position: absolute;
    right: -200px; /* Push outside container */
    bottom: 0;
    width: 880px;
    height: 670px;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none; /* optional */
  }

  /* Hero section action button - page-specific styles */
  /* #content .hero-section .wrapper-action {
    width: 554px;
  } */

  #content .hero-section .wrapper-action a {
    background: var(--color-usc-cardinal);
    color: var(--color-usc-gold);
  }



  /* Hero section caption */
  #content .hero-section .hero-caption {
    position: absolute;
    bottom: 24px; /* distance from bottom of .hero-wrapper */
    left: 40px;
    max-width: 554px;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    color: var(--color-black);
    font-family: "National 2";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.64px;
  }


/* Mobile hero caption toggle functionality */
.hero-caption-toggle {
    display: none; /* Hide the checkbox */
    }

@media (max-width: 768px) {
    #page {
        display: block;
    }
     #content .hero-wrapper {
        max-width: 100%;
        padding: 24px var(--Mobile-Side-Margin) 0px var(--Mobile-Side-Margin);
        min-height: 511px;
        height: max(511px, 60%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Push content to bottom */
      }
      #content .hero-header h1 {
        font-size: 50px;
        line-height: 42px; /* 86.957% */
        letter-spacing: -1.84px;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }
      #content .hero-section .hero-header h2 {
        margin: .25em 0 .35em 0;
        font-size: clamp(20px, 4vw, 32px);
        font-style: normal;
        font-weight: 500;
        line-height: 1.6;
        letter-spacing: -1.6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    /* Mobile hero image positioning */
    #content .hero-image {
        position: absolute;           /* Keep absolute positioning for overlay effect */
        right: 0;                    /* Align to right edge of container (not -200px) */
        bottom: 0;                   /* Keep anchored to bottom */
        width: 100%;                 /* Take full width of container */
        height: 68%;                /* Take full height of hero-wrapper */
        background-size: contain;      /* Cover the entire area */
        background-position: bottom center; /* Center the image horizontally */
        z-index: 1;                  /* Keep above other content */
        pointer-events: none;        /* Keep non-interactive */
    }

    #content .hero-caption-toggle-label {
      position: absolute;
      bottom: 30px;
      right: 20px;
      width: 37px;
      height: 36px;
      cursor: pointer;
      z-index: 3;
      display: block; /* Show the info icon on mobile */
      transition: bottom 1.3s ease-in-out;
    }

    #content .hero-caption-toggle-label::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 37px;
      height: 36px;
      background-image: url('/assets/chan/icons/info-icon.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Mobile hero caption toggle - position at bottom right */
      #content .hero-section .hero-wrapper .hero-caption-toggle-label {
        position: absolute;
        bottom: 30px;
        right: 20px;
        width: 37px;
        height: 36px;
        cursor: pointer;
        z-index: 3;
        display: block;
        transition: transform 0.3s ease-in-out;
      }

      /* Mobile hero caption - full width at bottom */
      #content .hero-section .hero-wrapper .hero-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 8px 8px 0 0;
        padding: 0 16px;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
        font-size: 14px;
        z-index: 2;
      }

      /* Show caption when checkbox is checked */
      #content .hero-section .hero-wrapper .hero-caption-toggle:checked ~ .hero-caption {
        max-height: 200px;
        padding-top: 16px;
        padding-bottom: 16px;
      }

      /* Move icon up when caption expands */
      #content .hero-section .hero-wrapper .hero-caption-toggle:checked ~ .hero-caption-toggle-label {
        transform: translateY(-50px);
      }
  }


/* Quick Links */

#content .landing-text h3 {
    font-family: "National 2";
    font-size: 40px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: -1.6px;
    color: var(--color-black);
    margin-top: 0;
    margin-bottom: 16px;
  }

  #content .landing-text h4 {
    font-family: "National 2";
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: -0.96px;
    color: var(--color-usc-cardinal);
    margin-top: 0;
    margin-bottom: 0;
  }

  #content .landing-text p {
    font-family: "National 2";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-black);
    margin-bottom: 16px;
  }
  #content .landing-cell .landing-text .no-top-margin {
    margin-top: 0;
    margin-bottom: 16px;
  }

  #content .landing-text ul.links {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
    font-family: "National 2";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.8px;
  }
  @media (min-width: 768px) {
    #content .landing-text ul.links {
      font-size: 20px;
    }
  }

  .landing-text ul.links li {
     margin-bottom: 12px;
     display: flex;
     align-items: center;
   }

  .button-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
  }

  .button-row .wrapper-action {
    flex: 1;
  }

  #content .button-row .wrapper-action a {
    width: 100%;
    display: block;
    text-align: center;
  }
@media (min-width: 768px) {
    .button-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    }

    .button-row .wrapper-action {
        flex: 1;
    }
}



/* Common wrapper-action styles */

#content .wrapper-action {
  display: flex;
  /* width: 554px; */
  justify-content: left;
  color: #000;
  font-family: "National 2";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 125% */
  letter-spacing: -0.64px;
}

#content .wrapper-action a {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 20px;
  height: fit-content;
  /* min-height: 38px; */

  border-radius: 8px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  cursor: pointer;

  font-family: "National 2", sans-serif;
  font-size: 22px;
  font-weight: 700;
  font-style: normal;
  line-height: 22px;
  letter-spacing: -0.88px;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#content .wrapper-action a:hover {
  transform: none;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.35);
}

#content .wrapper-action a:active {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}

#content .wrapper-action a::after {
  content: '';
  display: inline-block;
  margin-left: 0;
  opacity: 0;
  transform: translateX(0);
  transition:
    opacity 0.2s ease 0.01s,   /* fade in after delay */
    transform 0.2s ease 0.01s,
    margin-left 0.2s ease 0.01s;
  font-weight: 700;
  font-size: 22px;
  line-height: 22px;
  letter-spacing: -0.88px;
  color: inherit;
}

#content .wrapper-action a:hover::after {
  content: ' ⟩';
  opacity: 1;
  margin-left: 8px;
  transform: translateX(2px);
}



/* Clickable Image Hover Effect */

.rounded-corners {
   border-radius: var(--Desktop-Border-Radius, 24px);
}

a .enlarge-image { /* put on the surrounding div */
   position: relative;
   overflow: hidden;
 }

 a .enlarge-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease;
   will-change: transform;
 }

a .enlarge-image:hover img {
   transform: scale(var(--card-image-zoom));
 }





/* Quote section */
#content .quote-section {
   width: 100%;
   background-color: var(--color-usc-gold-20-tint);
   padding: 60px 0;
   background-image: url('/assets/chan/icons/quote-icon.svg');
   background-repeat: no-repeat;
   background-position: center 50px;
   background-size: 50px;
 }

 #content .quote-wrapper {
   max-width: var(--Desktop-Container-Width);
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 0 var(--Desktop-Side-Margin);
   }

 #content .quote-text {
   display: flex;
   max-width: 1000px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 32px;
   align-self: stretch;
   color: var(--color-black);
   text-align: center;
   font-family: "National 2";
   font-size: 30px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   margin: 0 auto;
 }
@media (min-width: 768px) {
  #content .quote-text {
    font-size: 44px;
  }
}
 #content .quote-text p {
  margin-bottom: 0;
 }
 #content .quote-cite {
   color: var(--color-usc-cardinal);
   text-align: center;
   font-family: "National 2";
   font-size: 24px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
 #content .quote-cite a {
    color: var(--color-usc-cardinal);
 }
 #content .quote-location {
   margin-bottom: 1em;
 }

 #content .quote-program {
   margin-bottom: 1em;
 }

 #content .quote-class {
   margin-bottom: 1em;
 }



/* General Quad Section code */

#content .quad-section {
    width: 100%;
    padding: 60px 0;
    /* specify your background color here -- background-color: var(--color-lime); */
}

  #content .quad-wrapper {
    max-width: var(--Desktop-Container-Width);
    margin: 0 auto;
    padding: 0 40px;
  }

  #content .quad-heading {
    /* specify your heading color here */
    color: var(--color-black);
    font-family: "National 2", sans-serif;
    font-size: 40px;
    font-weight: 700;
    /* line-height: 68px; */
    letter-spacing: -2.4px;
    margin-top: 0;
    margin-bottom: 24px;
  }
@media (min-width: 768px) {
    #content .quad-heading {
        font-size: 60px;
    }
}

  #content .quad-subhead {
    /* specify your subhead color here */
    color: var(--color-black);
    font-family: "National 2";
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 133.333% */
    letter-spacing: -1.2px;
  }
  @media (min-width: 768px) {
    #content .quad-subhead {
        font-size: 30px;
        line-height: 40px; /* 133.333% */
    }
}

  #content .quad-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    gap: 40px 60px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
  }

  #content .quad-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 0 transparent;
    flex: 1 1 calc(50% - 30px); /* two columns with gap */
    min-width: 300px;
    max-width: 590px;
  }

  #content .quad-card-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--Desktop-Border-Radius, 24px);
    aspect-ratio: 590 / 398; /* rounded */
  }

  #content .quad-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    will-change: transform;
  }

  #content .quad-card:hover .quad-card-image img {
    transform: scale(var(--card-image-zoom));
  }

  #content .quad-card h2 {
    /* specify your h2 color here */
    color: var(--color-black);
    font-family: "National 2", sans-serif;
    font-size: 33px;
    font-weight: 700;
    margin: 16px 0 4px;
  }

  #content .quad-card h3 {
    /* specify your h3 color here */
    color: var(--color-black);
    font-family: "National 2", sans-serif;
    font-size: 33px;
    font-weight: 700;
    margin: 16px 0 4px;
  }

  #content .quad-card p {
    /* specify your p color here */
    color: var(--color-black);
    font-family: "National 2", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    margin: 0 0 16px;
  }

  /* Also target ul.links li in other contexts (like quad-card) */
  .quad-card ul {
    margin: 0 0 16px !important;
    padding-inline-start: 0;
  }


  .quad-card ul.links li {
    /* Override browser defaults to remove list appearance */
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 0 8px 0 !important;
    display: block !important;
    font-size: 17px;
    font-weight: 700;
  }
  @media (min-width: 768px) {
    #content .quad-card h3 {
      margin: 16px 16px 4px;
    }
    #content .quad-card p {
      margin: 0 16px 16px;
    }
    .quad-card ul {
        margin: 0 16px 16px !important;
    }
  }