/* ==========================================================================
    CHS GLOBAL CSS FOR A COMPASS SITE
========================================================================== */
/* ==========================================================================
    LINKS
========================================================================== */
/* Give external links a visual clue to help users know they will be going to a new site */
/*a[href^="http"]:not(a[href*="history.vcu.edu"]):after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d";
    margin-left: .25rem;
    color: #d43900;
}*/
/* Give Word documents a visual clue to help users discern the file type */
a[href$="doc"]:after,
a[href$="docx"]:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1c2";
    margin-left: .25rem;
    color: #d43900;
}
/* Give Excel documents a visual clue to help users discern the file type */
a[href$="xls"]:after,
a[href$="xlsx"]:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1c3";
    margin-left: .25rem;
    color: #d43900;
}
/* Give Powerpoint documents a visual clue to help users discern the file type */
a[href$="ppt"]:after,
a[href$="pptx"]:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1c4";
    margin-left: .25rem;
    color: #d43900;
}
/* ==========================================================================
    NAVIGATION
========================================================================== */
/* Header Quicklinks */
@media (min-width: 768px) {
    .cwf-header__nav a.cwf-header__link {
        font-weight: 600;
        font-size: 1rem;
        text-decoration: none!important;
        padding: 0 .25rem;
        margin: 0 .75rem;
    }
    .cwf-header__nav a.cwf-header__link:hover {
        text-decoration: underline!important;
    }
    .cwf-header__nav a.cwf-header__link:focus {
        color: #f8b300;
        background: #252525;
    }
}
.cwf-header__nav a.cwf-header__link[href*="support.vcu.edu/give"]:before {
    font-family: "Font Awesome 6 Free";
    content:"\f004";
    margin-right: .25rem;
    color: #980000;
}
.cwf-header__label {/* Flexbox adjustment to quicklinks so the search box doesn't grow along with content */
    right: 9.5rem;
    left: initial!important;
}
.cwf-header__search {/* Flexbox adjustment to quicklinks so the search box doesn't grow along with content */
    flex: 0!important;
    flex-direction: row-reverse;
}
.cwf-header__input {/* Flexbox adjustment to quicklinks so the search box doesn't grow along with content */
    flex: 0!important;
    flex-direction: row-reverse;
}
/* ==========================================================================
    PLUGIN OVERRIDES
========================================================================== */
/* Accordion */
.plugin-accordion__body p.t4_text-info, 
.plugin-accordion__body p.t4_text-success, 
.plugin-accordion__body p.t4_text-warning {
    padding-bottom: .8em!important;
}
/* Cards */
.plugin-card__wysiwyg ul {
    list-style: square;
}
.plugin-card__background {
    filter: blur(1rem);
}
.plugin-card.img-r-50, 
.plugin-card.img-l-50,
.plugin-card.img-r-33,
.plugin-card.img-l-33,
.plugin-card.img-r-25,
.plugin-card.img-l-25 {
    text-align: initial;
}

@media (max-width: 1023px) {
  .plugin-card .t4_button {/* When a button is in a card, align it center if screen width less than 1024px */
    text-align: center;
  }
}
.t4-content-area--sidebar .t4_button {/* When a button is in a sidebar, align it center */
    text-align: center;
}
@media (min-width: 768px) and (max-width: 1399px) {
    .plugin-card__body img, 
    .plugin-card__body figure {
        display: block;
        margin: 0 auto;
    }
}
.plugin-card {/* Default Card Style */
  box-shadow: 4px 4px 0px #cdcdcd;
}
.plugin-card.plugin-card--accent,
.plugin-card.plugin-card--gray {
  box-shadow: none;
}
/* Hero */
.plugin-hero {
    margin-bottom: 2rem;
}
.plugin-hero__caption {
    text-align: center;
}
/* ==========================================================================
    WYSIWYG
========================================================================== */
/* Figures */
figcaption {
    font-size: .8rem;
  	line-height: 1.3;
}
/* Image Classes */
.img-r-50,
.img-l-50, 
.img-r-33,
.img-l-33,
.img-r-25,
.img-l-25 {
    text-align: center;
}
@media (min-width: 768px) {
    /* Float an image to the right of the page when the viewport is >=768 pixels and restrict width to 50% of the container */
    .img-r-50 {
        margin: 0 0 1rem 1rem;
        max-width: 50%;
        float: right;
    }
    /* Float an image to the left of the page when the viewport is >=768 pixels and restrict width to 50% of the container */
    .img-l-50 {
        margin: 0 1rem 1rem 0;
        max-width: 50%;
        float: left;
    }    
    /* Float an image to the right of the page when the viewport is >=768 pixels and restrict width to 33% of the container */
    .img-r-33 {
        margin: 0 0 1rem 1rem;
        max-width: 33%;
        float: right;
    }
    /* Float an image to the left of the page when the viewport is >=768 pixels and restrict width to 33% of the container */
    .img-l-33 {
        margin: 0 1rem 1rem 0;
        max-width: 33%;
        float: left;
    }    
    /* Float an image to the right of the page when the viewport is >=768 pixels and restrict width to 25% of the container */
    .img-r-25 {
        margin: 0rem 0 1rem 2rem;
        max-width: 25%;
        float: right;
    }
    /* Float an image to the left of the page when the viewport is >=768 pixels and restrict width to 25% of the container */
    .img-l-25 {
        margin: 0rem 2rem 1rem 0;
        max-width: 25%;
        float: left;
    }
}
/* Blockquotes */
blockquote {
  line-height: 1.5;
}
blockquote.img-r-50, 
blockquote.img-l-50,
blockquote.img-r-33, 
blockquote.img-l-33,
blockquote.img-r-25, 
blockquote.img-l-25 {
    text-align: initial;
}
/* Lists */
@media (min-width: 768px) {
  	/* For lists with the "columnar2" class, split into two columns when the viewport is >=768 pixels */
  	ul.columnar2, ol.columnar2 {
    	column-count: 2;
	}
}
@media (min-width: 768px) {
  	/* For lists with the "columnar3" class, split into three columns when the viewport is >=768 pixels */
  	ul.columnar3, ol.columnar3 {
    	column-count: 3;
	}
}
/* List style with orange checkmarks instead of bullets */
.checklist {
  list-style: none;
}
.checklist > li:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f14a";
    color: #d43900;
	margin-right: .25rem;
}
.checklist > li:first-of-type {
    margin-top: 0;
}
.checklist > li {
    margin: 1rem auto;
}
/* Headings */
.plugin-general-content h2 {
    /* Heading level 2 in general content plugins */
    border-left: 8px solid #f8b300;
    padding-left: .5rem;
    margin: 2rem auto;
    padding-top: 0;
}
/* Subheadings */
.subhed {
  font-size: 1.8rem;
  font-weight: 300;
  color: #d43900;
  line-height: 1.5;
}
/* T4 format classes */
.t4_text-info {
    color: #000;
    margin: 1rem auto;
    background: #dfefff;
    padding: .8rem;
    border: 1px solid #006894;
    display: inline-block;
    font-weight: 500;
}
.t4_text-success {
    color: #000;
    padding: .8rem;
    background: #ddfddc;
    border: 1px solid #97c597;
    margin: 1rem auto;
    display: inline-block;
    font-weight: 500;
}
.t4_text-warning {
    color: #000;
    padding: .8rem;
    background: lightyellow;
    border: 1px solid #ffc107;
    margin: 1rem auto;
    display: inline-block;
    font-weight: 500;
}
/* Video embeds that can't use the responsive embed plugin */
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin: 1.5rem auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* ==========================================================================
    COMPASS GRID OVERRIDES
========================================================================== */
.cwf-grid__column--page-layout>:last-child {
    margin-bottom: 2rem!important;
}
/* Break sidebar at 1280px instead of 1400px */
@media (min-width: 1280px) {
  .cwf-grid--page-layout {
    --cwf-grid--grid-template-columns: fit-content(320px) minmax(0, 1fr)
      fit-content(320px);
    grid-template-areas: "subnav main sidebar";
  }
}
/* ==========================================================================
    MISC
========================================================================== */
/* Search box */
input#searchInput {
    border: 1px solid #efefef;
    padding: .5rem;
    margin: 0 auto 1rem;
}
/* Code */
code, 
.codeGuide {
    background: #efefef;
    padding: 0 .2rem;
    border: 1px solid darkgray;
    display: inline-block;
    font-family: monospace;
}
/* Drop cap */
.cwf-paragraph--drop-cap > p:first-of-type::first-letter,
p.cwf-paragraph--drop-cap::first-letter {
    background-color: var(--cwf-accent--background);
    color: var(--cwf-accent--foreground);
    text-align: center;
    margin: 0.1em 0.15em 0.03em 0;
    padding: 0.5rem 0.5rem;
}
/* Footer Call-to-Action Buttons */
.plugin-hero.cta {
    background: var(--cwf-color--gold);
}
.cta a {
    display: block;
    text-align: center;
    color: #000!important;
    background: var(--cwf-color--white)!important;
}
.cta a:hover,
.cta a:focus {
    background-color: #000!important;
    color: var(--cwf-color--gold)!important;
}
.cta h2 {
    color: #000;
}
.cwf-grid.cta {
    margin: 1rem auto 3rem;
    padding: 1rem;
}
@media (min-width: 768px) {
  .cwf-grid.cta {
      max-width: 70%;
  }
}
.cwf-grid.cta p.t4_button {
    padding-top: 0;
}
/* ==========================================================================
    FONTAWESOME
========================================================================== */
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.address-card-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f2bb";
    margin-right: .25rem;
    color: #d43900;
}
.archive-blue::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f187";
    margin-right: .25rem;
    color: #006894;
}
.archive-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f187";
    margin-left: .5rem;
    color: #f8b300;
}
.archive-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f187";
    margin-right: .25rem;
    color: #d43900;
}
.blog-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f781";
    color: #f8b300;
    margin-right: .5rem;
}
.book-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02d";
    color: #f8b300;
}
.bookmark-blue::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02e";
    color: #006894;
    margin-right: .25rem;
}
.bookmark-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02e";
    color: #f8b300;
    margin-right: .25rem;
}
.bookmark-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02e";
    color: #d43900;
    margin-right: .25rem;
}
.bookmark-red::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f02e";
    color: #b50000;
    margin-right: .25rem;
}
.building-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1ad";
    color: #f8b300;
    margin-right: .25rem;
}
.bullhorn::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0a1";
    margin-right: .25rem;
    color: #f8b300;
}
.calculator-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1ec";
    margin-right: .25rem;
    color: #f8b300;
}
.calendar-alt-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f073";
    margin-right: .25rem;
    color: #f8b300;
}
.chalkboard-teacher-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f51c";
    color: #f8b300;
}
.check-square-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content: "\f14a";
    color: #f8b300;
}
.check-square-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f14a";
    color: #d43900;
	margin-right: .25rem;
}
.check-square-red::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f14a";
    color: #b50000;
	margin-right: .25rem;
}
.clock-blue::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content:"\f017";
    margin-right: .25rem;
    color: #006894;
}
.clock-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content:"\f017";
    margin-right: .25rem;
    color: #f8b300;
}
.comment-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    content:"\f075";
    margin-left: .25rem;
    color: #f8b300;
}
.cube-gold::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f1b2";
    margin-right: .25rem;
    color: #f8b300;
    font-weight: 900;
}
.desktop-gold::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f108";
    margin-right: .25rem;
    color: #f8b300;
    font-weight: 900;
}
.earth-americas-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f57d";
    color: #f8b300;
    margin-right: .25rem;
}
.envelope-gold::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f0e0";
    margin-right: .25rem;
    color: #f8b300;
    font-weight: 900;
}
.exclamation-circle-blue::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f06a";
    margin-right: .25rem;
    color: #006894;
    font-weight: 900;
}
.exclamation-circle-gold::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f06a";
    margin-right: .25rem;
    color: #f8b300;
    font-weight: 900;
}
.exclamation-circle-orange::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f06a";
    margin-right: .25rem;
    color: #d43900;
    font-weight: 900;
}
.external-link-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f35d";
    margin-right: .25em;
    color: #f8b300;
}
.facebook-gold::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 900;
    content: "\f09a";
    color: #f8b300;
    margin-right: .25rem;
}
.fax-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f1ac";
    color: #f8b300;
    margin-right: .25rem;
}
.feather-blue::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f56b";
    margin-right: .25em;
    color: #006894;
}
.file-alt-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f15c";
    margin-right: .25em;
    color: #d43900;
}
.film-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f008";
    margin-right: .25em;
    color: #f8b300;
}
.graduation-cap-orange::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f19d";
    margin-right: .25em;
    color: #d43900;
}
.hand-holding-usd-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f4c0";
    margin-right: .25em;
    color: #f8b300;
}
.info-circle::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    color: #f8b300;
    margin-left: .5rem;
    font-weight: 900;
}
.info-circle-blue::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    color: #006894;
    margin-right: .25rem;
    font-weight: 900;
}
.info-circle-gold::before {
    content: "\f05a";
    font-family: "Font Awesome 6 Free";
    color: #f8b300;
    margin-right: .25rem;
    font-weight: 900;
}
.instagram-gold::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 900;
    content: "\f16d";
    color: #f8b300;
    margin-right: .25rem;
}
.map-signs-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f277";
    color: #f8b300;
}
.map-signs-home::before {
    font-family: "Font Awesome 6 Free";
    content: "\f277";
    color: #f8b300;
    margin-left: .5rem;
    font-weight: 900;
}
.pencil-square-o::before {
    font-family: "Font Awesome 6 Free";
    content: "\f14b";
    color: #f8b300;
    margin-left: .5rem;
    font-weight: 900;
}
.phone-gold::before {
    font-family: "Font Awesome 6 Free";
    content: "\f095";
    color: #f8b300;
    margin-right: .25rem;
    font-weight: 900;
}
.question-circle-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content:"\f059";
    margin-right: .25rem;
    color: #f8b300;
}
.quote-left::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content:"\f10d";
    margin-right: .25rem;
    color: #333;
}
.quote-right::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content:"\f10e";
    margin-left: .25rem;
    color: #333;
}
.road-gold::before{
    font-family: "Font Awesome 6 Free"; 
    content: "\f018";
    color: #f8b300;
    font-weight: 900;
}
.search-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f002";
    color: #f8b300;
    margin-right: .25rem;
}
.streetview::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f21d";
    margin-right: .25rem;
    color: #f8b300;
    font-weight: 900;
}
.twitter-gold::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 900;
    content: "\f081";
    color: #f8b300;
    margin-right: .25rem;
}
.user-friends-blue::before {
    font-family: "Font Awesome 6 Free"; 
    content: "\f500";
    margin-right: .25rem;
    color: #006894;
    font-weight: 900;
}
.video-blue::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f03d";
    margin-right: .25rem;
    color: #006894;
}
.video-gold::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f03d";
    margin-right: .25rem;
    color: #f8b300;
}