:root {
  --default-width: 960px;
  --banner-height: 275px;
  --color-hayes-white: #ffffff;
  --color-harriman-blue: #002f56;
  --color-ub-blue: #005bbb;
  --color-baird-point: #e4e4e4;
  --color-bronze-buffalo: #ad841f;
  --color-capen-brick: #990000;
  --color-solar-strand: #ffc72c;
  --color-olmsted-green: #6da04b;
  --color-victor-e-blue: #2f9fd0;
  --color-greiner-green: #e1e000;
  --color-letchworth-autumn: #e56a54;
  --color-lake-lasalle: #00a69c;
  --color-niagara-whirlpool: #006570;
  --color-nav-orange: #da3c28;
  --color-nav-green: #427d10;
  --color-townsend-gray: #666666;

  --grad-color-stop1: black;
  --grad-color-stop2: white;

  --color-eng-banner: var(--color-letchworth-autumn);
  /*--color-eng-banner-overlay: rgba(229, 106, 84, .75);*/
  --color-eng-text-icons: var(--color-ub-blue);
  --color-eng-lines: var(--color-solar-strand);

  --color-cas-social-banner: var(--color-lake-lasalle);
  /*--color-cas-social-banner-overlay: rgba(0, 62, 81, 1.0);*/
  --color-cas-social-text-icons: var(--color-harriman-blue);
  --color-cas-social-lines: var(--color-victor-e-blue);

  --color-cas-natural-banner: var(--color-lake-lasalle);
  --color-cas-natural-text-icons: var(--color-niagara-whirlpool);
  --color-cas-natural-lines: var(--color-letchworth-autumn);

  --color-cas-arts-banner: var(--color-lake-lasalle);
  --color-cas-arts-text-icons: var(--color-niagara-whirlpool);
  --color-cas-arts-lines: var(--color-greiner-green);

  --color-law-banner: var(--color-bronze-buffalo);
  /*--color-law-banner-overlay: rgba(173, 132, 31, 1.0);*/
  --color-law-text-icons: var(--color-harriman-blue);
  --color-law-lines: var(--color-townsend-gray);

  --color-ap-banner: var(--color-harriman-blue);
  /*--color-ap-banner-overlay: rgba(0, 199, 177, .45);*/
  --color-ap-text-icons: var(--color-ub-blue);
  --color-ap-lines: var(--color-greiner-green);

  --color-som-banner: var(--color-victor-e-blue);
  /*--color-som-banner-overlay: rgba(65, 182, 230, .75);*/
  --color-som-text-icons: var(--color-harriman-blue);
  --color-som-lines: var(--color-greiner-green);

  --color-nurse-banner: var(--color-capen-brick);
  /*--color-nurse-banner-overlay: rgba(153, 0, 0, 1.0);*/
  --color-nurse-text-icons: var(--color-harriman-blue);
  --color-nurse-lines: var(--color-townsend-gray);

  --color-pharm-banner: var(--color-olmsted-green);
  --color-pharm-text-icons: var(--color-niagara-whirlpool);
  --color-pharm-lines: var(--color-victor-e-blue);

  --color-health-banner: var(--color-niagara-whirlpool);
  --color-health-text-icons: var(--color-ub-blue);
  --color-health-lines: var(--color-victor-e-blue);

  --color-jsmbs-banner: var(--color-harriman-blue);
  --color-jsmbs-text-icons: var(--color-niagara-whirlpool);
  --color-jsmbs-lines: var(--color-lake-lasalle);
}

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

/* Pages *********************************************************************/

/*
.cas, .cas-arts, .cas-social, .cas-natural, .jsmbs, .ap, .law, .som, .nurse, .pharm, .health, .eng {

}
*/

/* Formstack Fixes ***********************************************************/

#ugap-formstack {
  background-color: var(--color-baird-point);
  padding: 2em 0;
}

#ugap-formstack .formstack,
#ugap-formstack .introtext {
  max-width: var(--default-width);
  margin: 0 auto;
}

/* CMS Fixes *****************************************************************/

body.page, li, .text p, .text ul>li {
  font: 18px 'Sofia', Arial, sans-serif;
  line-height: 1.8em ;
}

.text>p b {
  line-height: inherit;
}

li ul {
  margin-left: 1em;
}

/* Stretch to full page width, remove margins and padding causing spacing issues */

.page #columns,
.page #columns.one-column #center {
  width: 100%;
  left: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.page #columns #center::after {
  background: none !important;
}

.page .columns-bg {
  width: 100%;
}

.core-header .inner {
  margin-bottom: 0 !important;
}

.core-header.aem-GridColumn.primary, body:not(.homepage):not(.header-page) div.core-header.aem-GridColumn.specialty {
  padding-bottom: 0 !important;
}

/* Container fixes */

.surround {
  margin: 0;
  padding: 0;
}

.content-block {
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  padding: 2em 0;
}

.content-block h2 {
  align-self: flex-start;
}

.content-block .section {
  width: var(--default-width);
}

.content-block .parsys_column, .content-block .parsys_column .section {
  width: 100%;
  max-width: var(--default-width);
}

/* List Filter Changes */

ul.link-list li:nth-last-child(1 of .active-tag) {
  border-bottom: 3px solid var(--color-capen-brick);
  padding-bottom: .5em;
  margin-bottom: 1em;
}


/* UGAP Styling **************************************************************/

/* Banner -------------------------------------------------------------------*/

#ugap-hero,
#ugap-title-banner {
  position: relative;
  height: var(--banner-height);
  display: flex;
  flex-direction: row;
  place-items: center;
  justify-content: center;
  background-size: cover;
}

#ugap-title-banner .title {
  width: var(--default-width);
  height: 100%;
  margin: auto 0;
  display: flex;
  flex-direction: row;
  place-items: end left;
}

#ugap-title-banner h1#banner-title {
  position: relative;
  max-width: calc((var(--default-width) / 3) * 2);
  font: 56px/1.2 'Sofia', Arial, sans-serif;
  text-align: left;
  margin-bottom: .5em;
}

#ugap-title-banner h1#banner-title {
  color: var(--color-hayes-white);
}

#ugap-hero {
  background-color: var(--color-harriman-blue);
  background-image: url(/content/dam/www/undergrad-programs/home-hero-students.png);
  background-position-y: -90px;
  border-bottom: 15px solid var(--color-solar-strand);
}

.eng #ugap-title-banner {
  background-color: var(--color-eng-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-autumn.png);
}

.ap #ugap-title-banner {
  background-color: var(--color-ap-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-lake-lasalle.png);
}

.som #ugap-title-banner {
  background-color: var(--color-som-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-victor-blue.png);
}

.nurse #ugap-title-banner {
  background-color: var(--color-nurse-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-capen-brick.png);
}

.law #ugap-title-banner {
  background-color: var(--color-law-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-bronze.png);
}

.pharm #ugap-title-banner {
  background-color: var(--color-pharm-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-olmsted-green.png);
}

.health #ugap-title-banner {
  background-color: var(--color-health-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-whirlpool.png);
}

.jsmbs #ugap-title-banner {
  background-color: var(--color-jsmbs-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-victor-blue.png);
}

.cas-social #ugap-title-banner {
  background-color: var(--color-cas-social-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner.png);
}

.cas-natural #ugap-title-banner {
  background-color: var(--color-cas-natural-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner.png);
}

.cas-arts #ugap-title-banner {
  background-color: var(--color-cas-arts-banner);
  background-image: url(/content/dam/www/undergrad-programs/ugap-banner-lake-lasalle.png);
}

/* Home Page ----------------------------------------------------------------*/

#ugap-home-intro .cq-colctrl-4-4-4 .parsys_column {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 6px;
}

#ugap-home-intro .cq-colctrl-4-4-4 .parsys_column p {
  margin: 0 !important;
  padding-bottom: 16px;
}

#ugap-home-intro .cq-colctrl-4-4-4 .parsys_column p b {
  font-size: 3em;
  color: var(--color-solar-strand) !important;
}

#ugap-programs .dynamiclistsearch {
  width: 100%;
}

#ugap-programs .dynamiclistsearch .input-field-wrapper input,
#ugap-programs .dynamiclistsearch .input-group-btn input {
  height: 2.5em;
  font-size: 1.5em;
}

#ugap-programs .text.section {
  width: 100%;
  font-size: .85em;
}

#ugap-programs .text.section p {
  margin: .25em 0 1em 0;
}

#ugap-programs .cq-colctrl-3-9 .parsys_column:first-child {
  width: 250px;
  padding: 0 40px 0 0;
}

#ugap-programs .cq-colctrl-3-9 .parsys_column:last-child {
  width: 670px;
}

.center-content-block {
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  margin-top: 2.5em;
}

.center-content-block > * {
  max-width: var(--default-width);
}


/* Navigation ---------------------------------------------------------------*/

#ugap-school-dept-degree {
  display: flex;
  flex-direction: row;
  place-items: start center;
  justify-content: center;
  padding: 1.5em 0;
  background-color: var(--color-baird-point);
  color: var(--color-ub-blue);
  font-size: 14px;
}

#ugap-school-dept-degree .text p {
  font-size: 14px;
}

.eng #ugap-school-dept-degree {
  border-top: 15px solid var(--color-eng-lines);
  border-bottom: 1px dashed var(--color-eng-lines);
}

.ap #ugap-school-dept-degree {
  border-top: 15px solid var(--color-ap-lines);
  border-bottom: 1px dashed var(--color-ap-lines);
}

.som #ugap-school-dept-degree {
  border-top: 15px solid var(--color-som-lines);
  border-bottom: 1px dashed var(--color-som-lines);
}

.nurse #ugap-school-dept-degree {
  border-top: 15px solid var(--color-nurse-lines);
  border-bottom: 1px dashed var(--color-nurse-lines);
}

.law #ugap-school-dept-degree {
  border-top: 15px solid var(--color-law-lines);
  border-bottom: 1px dashed var(--color-law-lines);
}

.pharm #ugap-school-dept-degree {
  border-top: 15px solid var(--color-pharm-lines);
  border-bottom: 1px dashed var(--color-pharm-lines);
}

.health #ugap-school-dept-degree {
  border-top: 15px solid var(--color-health-lines);
  border-bottom: 1px dashed var(--color-health-lines);
}

.jsmbs #ugap-school-dept-degree {
  border-top: 15px solid var(--color-jsmbs-lines);
  border-bottom: 1px dashed var(--color-jsmbs-lines);
}

.cas-social #ugap-school-dept-degree {
  border-top: 15px solid var(--color-cas-social-lines);
  border-bottom: 1px dashed var(--color-cas-social-lines);
}

.cas-natural #ugap-school-dept-degree {
  border-top: 15px solid var(--color-cas-natural-lines);
  border-bottom: 1px dashed var(--color-cas-natural-lines);
}

.cas-arts #ugap-school-dept-degree {
  border-top: 15px solid var(--color-cas-arts-lines);
  border-bottom: 1px dashed var(--color-cas-arts-lines);
}

/* Columns */

#ugap-school-dept-degree .cq-colctrl-4-4-4, #ugap-school-dept-degree .cq-colctrl-3-3-3-3 {
  max-width: var(--default-width);
  margin: auto 0;
  display: flex;
  flex-direction: row;
  gap: 1em;
}

#ugap-school-dept-degree .cq-colctrl-4-4-4 .parsys_column, #ugap-school-dept-degree .cq-colctrl-3-3-3-3 .parsys_column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

#ugap-school-dept-degree h3 {
  color: var(--color-ub-blue);
}

/* CMS fixes */

#ugap-school-dept-degree .parsys_column .text a {
  border-bottom: 1px solid  var(--color-ub-blue);
  color:  var(--color-ub-blue);
}

#ugap-school-dept-degree .parsys_column .text p {
  margin: 0;
  line-height: 1.75em
}

#ugap-school-dept-degree .parsys_column .text ul > li::before {
  content: '';
  margin: 0;
}

#ugap-school-dept-degree .parsys_column .text ul > li {
  font-size: 1em;
  padding: 0;
  margin-bottom: .75em;
}

#school-dept-degree .parsys_column .text ul > li:last-child {
  margin-bottom: 0;
}

#ugap-school-dept-degree .htmlsnippet > div {
  margin-top: -5px;
}

/* Home Intro ****************************************************************/

#ugap-home-intro {
  margin: 0;
  padding-top: 30px;
  background-color: var(--color-harriman-blue);
}

#ugap-home-intro .title h1,
#ugap-home-intro .text p,
#ugap-home-intro .text a {
  color: white;
}

#ugap-home-intro .text a {
  border-bottom-color: white;
}

#ugap-lets-find-your-program {
  margin-top: 0;
  font-size: 1.75em;
}

/* Anthem Text ***************************************************************/

#ugap-anthem {
  display: flex;
  flex-direction: column;
  place-items: center;
  justify-content: center;
  margin-top: 2.5em;
}

#ugap-anthem .introtext {
  max-width: var(--default-width);
  margin: 0 auto;
}

#ugap-anthem p {
  line-height: 2em !important;
}

#ugap-anthem .introtext b {
  font-size: 1.5em;
}

.eng #ugap-anthem .introtext b {
  color: var(--color-eng-text-icons);
}

.ap #ugap-anthem .introtext b {
  color: var(--color-ap-text-icons);
}

.som #ugap-anthem .introtext b {
  color: var(--color-som-text-icons);
}

.nurse #ugap-anthem .introtext b {
  color: var(--color-nurse-text-icons);
}

.law #ugap-anthem .introtext b {
  color: var(--color-law-text-icons);
}

.pharm #ugap-anthem .introtext b {
  color: var(--color-pharm-text-icons);
}

.health #ugap-anthem .introtext b {
  color: var(--color-health-text-icons);
}

.jsmbs #ugap-anthem .introtext b {
  color: var(--color-jsmbs-text-icons);
}

.cas-social #ugap-anthem .introtext b {
  color: var(--color-cas-social-text-icons);
}

.cas-natural #ugap-anthem .introtext b {
  color: var(--color-cas-natural-text-icons);
}

.cas-arts #ugap-anthem .introtext b {
  color: var(--color-cas-arts-text-icons);
}

/* Page transition "arrow" SVG */

#ugap-anthem > :last-child {
  width: 100vw;
  background-color: var(--color-baird-point);
}

#ugap-anthem #top-triangle, .page-transition-container #top-triangle {
  fill: var(--color-hayes-white);
}

.ugap #top-triangle, .ugap .page-transition-container #top-triangle {
  fill: var(--color-harriman-blue);
}

.ugap #accent-triangle, .ugap .page-transition-container #accent-triangle {
  fill: var(--color-victor-e-blue);
}

.eng #ugap-anthem #accent-triangle, .eng .page-transition-container #accent-triangle {
  fill: var(--color-eng-lines);
}

.ap #ugap-anthem #accent-triangle, .ap .page-transition-container #accent-triangle {
  fill: var(--color-ap-lines);
}

.som #ugap-anthem #accent-triangle, .som .page-transition-container #accent-triangle {
  fill: var(--color-som-lines);
}

.nurse #ugap-anthem #accent-triangle, .nurse .page-transition-container #accent-triangle {
  fill: var(--color-nurse-lines);
}

.law #ugap-anthem #accent-triangle, .law .page-transition-container #accent-triangle {
  fill: var(--color-law-lines);
}

.pharm #ugap-anthem #accent-triangle, .pharm .page-transition-container #accent-triangle {
  fill: var(--color-pharm-lines);
}

.health #ugap-anthem #accent-triangle, .health .page-transition-container #accent-triangle {
  fill: var(--color-health-lines);
}

.jsmbs #ugap-anthem #accent-triangle, .jsmbs .page-transition-container #accent-triangle {
  fill: var(--color-jsmbs-lines);
}

.cas-social #ugap-anthem #accent-triangle, .cas-social .page-transition-container #accent-triangle {
  fill: var(--color-cas-social-lines);
}

.cas-natural #ugap-anthem #accent-triangle, .cas-natural .page-transition-container #accent-triangle {
  fill: var(--color-cas-natural-lines);
}

.cas-arts #ugap-anthem #accent-triangle, .cas-arts .page-transition-container #accent-triangle {
  fill: var(--color-cas-arts-lines);
}

/* Animated transition "arrow" SVG */

/*
.eng {
    --grad-color-stop1: var(--color-eng-lines);
    --grad-color-stop2: var(--color-eng-text-icons);
}

@keyframes top2Bottom {
    0% {
            stop-color: var(--grad-color-stop1);
        }
    50% {
            stop-color: var(--grad-color-stop2);
    }
    100% {
            stop-color: var(--grad-color-stop1);
    }
} 

@keyframes bottom2Top {
    0% {
            stop-color: var(--grad-color-stop2);
        }
    50% {
            stop-color: var(--grad-color-stop1);
    }
    100% {
            stop-color: var(--grad-color-stop2);
    }
}

.eng #ugap-anthem #accent-triangle, .eng .page-transition-container-animated #accent-triangle {
  fill: url(#ugap-pt-gradient);
  filter: drop-shadow(0 0 3px rgb(0 0 0 / 1));
  stroke: black;
  stroke-width: .5;
}

.eng .page-transition-container-animated #top-triangle {
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.7));
}

.page-transition-container-animated svg {
	width: 100%;
    height: 150px;
}

.ugap-grad-stop1 {
	stop-color: var(--grad-color-stop1);
    animation-name: top2Bottom;
    animation-delay: 1.5s;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-fill-mode: backwards;
}

.ugap-grad-stop2 {
	stop-color: var(--grad-color-stop2);
    animation-name: bottom2Top;
  	animation-duration: 5s;
  	animation-iteration-count: infinite;
  	animation-fill-mode: backwards;
}
*/

/* Callouts ******************************************************************/

.eng .callout>div {
  background-image: linear-gradient(to right, var(--color-eng-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.ap .callout>div {
  background-image: linear-gradient(to right, var(--color-ap-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.som .callout>div {
  background-image: linear-gradient(to right, var(--color-som-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.nurse .callout>div {
  background-image: linear-gradient(to right, var(--color-nurse-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.law .callout>div {
  background-image: linear-gradient(to right, var(--color-law-text-icons) 30px, var(--color-baird-point) 30px) !important;
} 

.pharm .callout>div {
  background-image: linear-gradient(to right, var(--color-pharm-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.health .callout>div {
  background-image: linear-gradient(to right, var(--color-health-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.jsmbs .callout>div {
  background-image: linear-gradient(to right, var(--color-jsmbs-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.cas-social .callout>div {
  background-image: linear-gradient(to right, var(--color-cas-social-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.cas-natural .callout>div {
  background-image: linear-gradient(to right, var(--color-cas-natural-text-icons) 30px, var(--color-baird-point) 30px) !important;
}

.cas-arts .callout>div {
  background-image: linear-gradient(to right, var(--color-cas-arts-text-icons) 30px, var(--color-baird-point) 30px) !important;
}


/* Sections ******************************************************************/


#what-can-i-do-out-of-class .ugap-icon .htmlsnippet div {
  display: grid;
  place-items: center;
  border: 0;
}

#what-can-i-do-out-of-class figure {
  display: flex;
  flex-direction: column;
  place-items: center;
}

#what-can-i-do-out-of-class figure figcaption {
  margin-top: 1em;
  font-weight: bold;
  font-size: 1.25em;
}

figcaption {
  text-align: center;
}

#what-can-i-do-out-of-class svg {
  height: 128px;
  width: 128px;
}

.eng #what-can-i-do-out-of-class figure {
  fill: var(--color-eng-text-icons); 
  color: var(--color-eng-text-icons);
}

.ap #what-can-i-do-out-of-class figure {
  fill: var(--color-ap-text-icons);
  color: var(--color-ap-text-icons);
}

.som #what-can-i-do-out-of-class figure {
  fill: var(--color-som-text-icons);
  color: var(--color-som-text-icons);
}

.nurse #what-can-i-do-out-of-class figure {
  fill: var(--color-nurse-text-icons);
  color: var(--color-nurse-text-icons);
}

.law #what-can-i-do-out-of-class figure {
  fill: var(--color-law-text-icons);
  color: var(--color-law-text-icons);
}

.pharm #what-can-i-do-out-of-class figure {
  fill: var(--color-pharm-text-icons);
  color: var(--color-pharm-text-icons);
}

.health #what-can-i-do-out-of-class figure {
  fill: var(--color-health-text-icons);
  color: var(--color-health-text-icons);
}

.jsmbs #what-can-i-do-out-of-class figure {
  fill: var(--color-jsmbs-text-icons);
  color: var(--color-jsmbs-text-icons);
}

.cas-social #what-can-i-do-out-of-class figure {
  fill: var(--color-cas-social-text-icons);
  color: var(--color-cas-social-text-icons);
}

.cas-natural #what-can-i-do-out-of-class figure {
  fill: var(--color-cas-natural-text-icons);
  color: var(--color-cas-natural-text-icons);
}

.cas-arts #what-can-i-do-out-of-class figure {
  fill: var(--color-cas-arts-text-icons);
  color: var(--color-cas-arts-text-icons);
}

/* Footer ********************************************************************/

#ugap-footer-action-buttons {
  position: relative;
  width: 100%;
  min-height: 375px;
  background-image: url(/content/dam/www/undergrad-programs/athletic-flag.png);
  background-size: cover;
  background-position-y: -130px;
}

.cta-button-bar {
  width: 100%;
  left: 0;
}

.cta-button-bar .cta-button-bar-inner .cta-button-container .cta-button p {
  padding: 0;
}

.cta-button-bar .cta-button-bar-inner .cta-button-container .cta-button {
  display: grid;
  place-items: center;
}

/*

#ugap-footer-action-buttons .cq-colctrl-4-4-4 {
  width: var(--default-width);
}

#ugap-footer-action-buttons .cq-colctrl-4-4-4 .parsys_column {
  display: flex;
  justify-content: center;
  align-items: center;
}

#ugap-footer-action-buttons .buttoncomponent a {
  font-size: 1.25em;
  padding: 1.15em;
} */

/* Media Queries *************************************************************/

@media only screen and (max-width: 1370px) {
  #ugap-footer-action-buttons {
    background-position-y: 0px !important;
  }

  #ugap-hero {
    background-position-y: -40px;
  }
}

/* Tablet */

@media only screen and (max-width: 770px) {
  :root {
    --default-width: 770px;
  }

  [role="main"] {
    padding: 0 !important;
  }

  .core-header .main::after {
    display: none;
  }
  
  .content-block .section {
    box-sizing: border-box;
    padding: 0 1.5em;
  }

  .content-block .section.reference {
    padding: 0;
  }

  .parsys_column .text ul {
    margin: 0;
  }

  #center .cta-button-bar .cta-button-bar-inner {
    margin: 0 1em;
  }

  #ugap-hero {
    background-position-y: 0px;
  }
  
  #ugap-title-banner .title {
    padding-left: 1.25em;
  }

  #ugap-programs {
    padding: 0 1.25em;
  }

  #ugap-school-dept-degree {
    padding: 2em;
  }

  #ugap-school-dept-degree .cq-colctrl-4-4-4, #ugap-school-dept-degree .cq-colctrl-3-3-3-3 {
    gap: .25em;
  }
  
  #ugap-anthem {
    margin-top: 1.5em;
    padding: 0 1.25em;
    text-align: justify;
  }

  #ugap-anthem .introtext {
    font-size: 1em;
  }

  #ugap-footer-action-buttons {
    background-position-y: 0;
    background-position-x: 0;
  }

  #ugap-footer-action-buttons .cq-colctrl-4-4-4 {
    width: var(--default-width);
    padding: 0 2em;
  }
  
  #ugap-footer-action-buttons .cq-colctrl-4-4-4 .parsys_column {
    width: calc((var(--default-width) - 50px) / 3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #what-can-i-do-out-of-class .cq-colctrl-4-4-4 .parsys_column {
    width: calc((var(--default-width) - (3 * 24px)) / 3);
  }

  #what-can-i-do-out-of-class .cq-colctrl-3-3-3-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #what-can-i-do-out-of-class .cq-colctrl-3-3-3-3 .parsys_column {
    flex: 0 1 50%;
    padding: 0;
  }

  #what-can-i-do-out-of-class .cq-colctrl-4-4-4 .parsys_column .htmlsnippet.section,
  #what-can-i-do-out-of-class .cq-colctrl-3-3-3-3 .parsys_column .htmlsnippet.section {
	padding-left: 0;
  }

  #ugap-footer-action-buttons {
    background-position-x: -175px;
  }

  .fatfooter .footer-mode-fat, .fatfooter .footer-mode-simple {
    width: var(--default-width);
  }

  .fatfooter .ub-logo-link {
    margin-left: 1.5em;
  }

} /* END: @media only screen and (max-width: 770px) */

/* Phones */

@media only screen and (max-width: 428px) {
  :root {
    --default-width: 398px;
  }

  /* need to stretch to the sides on phones */

  body.page #columns #center, .page #columns.one-column #center {
    padding: 0 !important;
  }

  body .parsys div.parsys_column {
    width: 100% !important;
  }

  .cta-button-bar .cta-button-bar-inner .cta-button-container .cta-button {
    display: flex;
    justify-content: center;
  }

  .content-block .section {
    padding: 0 1.25em;
  }

  .content-block .section.reference {
    padding: 0;
  }

  .content-block h2 {
    text-align: center;
  }

  figure {
    margin: 0;
  }

  #ugap-hero {
    height: 200px;
    background-position-y: 0px;
  }

  #ugap-title-banner {
    height: 200px;
    justify-content: flex-start;
    place-items: end start;
    background-position-x: -675px;
  }

  #ugap-title-banner h1#banner-title {
    font: 32px/1 'Sofia', sans-serif;
    text-align: left;
    padding: 0 9px;
  }

  #ugap-programs .cq-colctrl-3-9 .parsys_column:first-child {
    padding: 0;
  }

  #ugap-school-dept-degree .cq-colctrl-4-4-4,
  #ugap-school-dept-degree .cq-colctrl-3-3-3-3 {
    flex-direction: column;
  }

  #ugap-school-dept-degree .cq-colctrl-4-4-4 .parsys_column,
  #ugap-school-dept-degree .cq-colctrl-3-3-3-3 .parsys_column{
    gap: 0;
  }

  #ugap-school-dept-degree .cq-colctrl-4-4-4 .title h3,
  #ugap-school-dept-degree .cq-colctrl-3-3-3-3 .title h3 {
    margin: .5em 0 .15em 0;
  }

  #ugap-school-dept-degree .cq-colctrl-4-4-4 .parsys_column:first-child .title:first-child h3,
  #ugap-school-dept-degree .cq-colctrl-3-3-3-3 .parsys_column:first-child .title:first-child h3 {
    margin: 0 0 .15em 0;
  }

  #ugap-school-dept-degree .title h3 {
    margin-bottom: 2px;
  }

  #ugap-anthem p {
    line-height: 1.5em !important;
  }

  #ugap-anthem .introtext b {
    font-size: 1.25em;
  }

  #what-can-i-do-out-of-class.content-block .parsys_column .section {
	padding: 0;
  }

  #what-can-i-do-out-of-class .cq-colctrl-4-4-4 .parsys_column {
    width: calc(var(--default-width) / 3) !important;
    display: inline-block;
  }

  #what-can-i-do-out-of-class figure figcaption {
    margin-top: .5em;
    font-weight: bold;
    font-size: .85em;
  }

  #what-can-i-do-out-of-class svg {
    height: 64px;
    width: 64px;
  }

  #ugap-footer-action-buttons {
    background-position-x: -320px;
  }

  .fatfooter .ub-logo-link {
  	margin-left: 0;
  }

} /* END: @media only screen and (max-width: 428px) */