@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400..900;1,400..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,400..900;1,8..144,400..900&family=Roboto+Slab:wght@400..900&family=Roboto:ital,wght@0,400..900;1,400..900&display=swap");

:root {
 /* --blue: #0072ce;#007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #d83b18 ;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #d83b18 ;
  --light: #f8f9fa;
  --dark: #172236;*/
	
	/** 160/90 Colors *
--alert-info:#cff4fc;
  --green: #48b85c; --success: #48b85c;
  --blue: #0072ce; --primary: #0072ce;--info: #0072ce; 
  --dark-blue: #101833; --dark: #101833; 
  --dark-gray: #5c5c5c; --secondary: #5c5c5c;
  --penn-college-blue: #214a9f;
  --blue: #214a9f;
  --medium-gray: #e0dfdf;
  --light-gray: #f7f7f7; --light: #f7f7f7;
  --white: #ffffff;
  --black: #000000;*/
  
  
 /* KEen's colors 
  --red: #e64622;
  --green: #48b85c;
  --dark-blue: #101833;
  --dark: #101833;
  --penn-college-blue: #214a9f;
  --info: #214a9f;
  --medium-blue: #0072ce;
  --blue: #0072ce;
  --light-blue: #e3f2fa;
  --dark-gray: #5c5c5c;
  --medium-gray: #e0dfdf;*/
  /* from https://app.zeplin.io/project/5c9a7fffc54bff583f11caa1/styleguide... :root { */
  --160-red: #d83b18;
  --160-dark-blue: #101833;
  --160-penn-college-blue: #214a9f;
  --160-medium-blue: #0072ce;
  --160-light-blue: #e3f2fa;
  --160-green: #48b85c;
  --dark-gray: #5c5c5c;
  --medium-gray: #e0dfdf;
  --light-gray: #f7f7f7;
  --white: #ffffff;
  --black: #000000;
  /** end 160/90 Colors **/
  --red: hsl(10deg,85%, 45%);
  --dark-blue: #101833;
    --dark-blue: hsl(220deg, 70%, 10%);
  --medium-blue: hsl(220deg, 70%, 40%);
  --penn-college-blue: hsl(205deg, 100%, 40%);

  --light-blue: #e3f2fa;
  --green: hsl(130deg, 60%, 45%);
  --yellow: hsl(45deg, 80%, 55%);
  /* Ken Adjust*/
   /* --penn-college-blue: hsl(205deg, 64.255%, 46.078%);
    --red: hsl(10deg,68.675%, 51.176%);
    --green: hsl(130deg, 53.526%, 45.294%);/* option 3 * /
    --green: hsl(130deg, 60.526%, 44.705%);/* option 1 * /
    --light-blue: hsl(205deg, 74.468%, 90.784%);
    --medium-blue: hsl(220deg, 74.586%, 35.490%);
    --dark-blue: hsl(220deg, 83.133%, 16.274%);
    --yellow: hsl(45deg, 70%, 55%);*/
  /* End Ken Adjust*/
  --warning: var(--yellow);
  --dark: var(--dark-blue);
  --danger: var(--red);
  --primary: var(--penn-college-blue);
  --blue: var(--penn-college-blue);
  --primary: var(--penn-college-blue);
  --blue: var(--penn-college-blue);
  --info: var(--medium-blue);
  
  --bs-btn-padding-x: 1.2rem;
  --bs-btn-padding-y: 0.6rem;
  --bs-body-color: hsl(0 0% 10% / .85); 

  --bs-nav-link-font-weight: 400;
  
	
 
	--red-100: color-mix(in srgb, var(--red) 20%, var(--white));
	--red-200: color-mix(in srgb, var(--red) 40%, var(--white));
	--red-300: color-mix(in srgb, var(--red) 60%, var(--white));
	--red-400: color-mix(in srgb, var(--red) 80%, var(--white));
	--red-500: color-mix(in srgb, var(--red) 100%,var(--white));
	--red-600: color-mix(in srgb, var(--red) 80%, var(--black));
	--red-700: color-mix(in srgb, var(--red) 60%, var(--black));
	--red-800: color-mix(in srgb, var(--red) 40%, var(--black));
	--red-900: color-mix(in srgb, var(--red) 20%, var(--black));
  --danger: var(--red);
  --bs-red: var(--red);
  --bs-danger: var(--red);
  
/*	--blue-100: color-mix(in srgb, var(--info) 0%, var(--light-blue));
	--blue-200: color-mix(in srgb, var(--info) 25%, var(--light-blue));
	--blue-300: color-mix(in srgb, var(--info) 50%, var(--light-blue));
	--blue-400: color-mix(in srgb, var(--info) 75%, var(--light-blue));
	--blue-500: color-mix(in srgb, var(--info) 100%,var(--light-blue));
	--blue-600: color-mix(in srgb, var(--blue) 100%, var(--dark));
	--blue-700: color-mix(in srgb, var(--blue) 66.66%, var(--dark));
	--blue-800: color-mix(in srgb, var(--blue) 33.33%, var(--dark));
	--blue-900: color-mix(in srgb, var(--blue) 0%, var(--dark));	*/
  
  
  --info-100: color-mix(in srgb, var(--info) 0%, var(--light-blue));
	--info-200: color-mix(in srgb, var(--info) 33.33%, var(--light-blue));
	--info-300: color-mix(in srgb, var(--info) 66.66%, var(--light-blue));
	--info-400: color-mix(in srgb, var(--info) 100%, var(--light-blue));
	--info-500: color-mix(in srgb, var(--blue) 100%,var(--light-blue));
	--info-600: color-mix(in srgb, var(--blue) 75%, var(--dark));
	--info-700: color-mix(in srgb, var(--blue) 50%, var(--dark));
	--info-800: color-mix(in srgb, var(--blue) 25%, var(--dark));
	--info-900: color-mix(in srgb, var(--blue) 0%, var(--dark));

  --bs-blue: var(--blue);
  --bs-primary: var(--blue);
  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--blue--600);
  
  --hlb: var(--light-blue);
  --hpb: var(--medium-blue);
  --hmb: var(--penn-college-blue);
  --hdb: var(--dark-blue);
  /* shifted PCB = 500 */
  --shift-blue-100: color-mix(in srgb, var(--hmb) 0%, var(--hlb));
	--shift-blue-200: color-mix(in srgb, var(--hmb) 33.33%, var(--hlb));
	--shift-blue-300: color-mix(in srgb, var(--hmb) 66.66%, var(--hlb));
	--shift-blue-400: color-mix(in srgb, var(--hmb) 100%, var(--hlb));
	--shift-blue-500: color-mix(in srgb, var(--hpb) 100%,var(--hdb));
	--shift-blue-600: color-mix(in srgb, var(--hpb) 75%, var(--hdb));
	--shift-blue-700: color-mix(in srgb, var(--hpb) 50%, var(--hdb));
	--shift-blue-800: color-mix(in srgb, var(--hpb) 25%, var(--hdb));
	--shift-blue-900: color-mix(in srgb, var(--hpb) 00%, var(--hdb));
  /* shifted PCB = 600 */
  --blue-100: color-mix(in srgb, var(--hmb) 10%, var(--white));
	--blue-200: color-mix(in srgb, var(--hmb) 32.5%, var(--white));
	--blue-300: color-mix(in srgb, var(--hmb) 55%, var(--white));
	--blue-400: color-mix(in srgb, var(--hmb) 77.5%, var(--white));
	--blue-500: color-mix(in srgb, var(--hmb) 100%,var(--hmb));
	--blue-600: color-mix(in srgb, var(--hpb) 100%, var(--hpb));
	--blue-700: color-mix(in srgb, var(--hpb) 77.5%, var(--black));
	--blue-800: color-mix(in srgb, var(--hpb) 55%, var(--black));
	--blue-900: color-mix(in srgb, var(--hpb) 32.5%, var(--black));
   /*  Ken Adjust
  --blue-100: color-mix(in srgb, var(--hmb) 0%, var(--hlb));
	--blue-200: color-mix(in srgb, var(--hmb) 25%, var(--hlb));
	--blue-300: color-mix(in srgb, var(--hmb) 50%, var(--hlb));
	--blue-400: color-mix(in srgb, var(--hmb) 75%, var(--hlb));
	--blue-500: color-mix(in srgb, var(--hmb) 100%,var(--hmb));
	--blue-600: color-mix(in srgb, var(--hpb) 100%, var(--hpb));
	--blue-700: color-mix(in srgb, var(--hpb) 66%, var(--hdb));
	--blue-800: color-mix(in srgb, var(--hpb) 33%, var(--hdb));
	--blue-900: color-mix(in srgb, var(--hpb) 0%, var(--hdb));*/
   /* End Ken Adjust*/
  --hue-100: hsl(201deg, 70%, 94%);
	--hue-200: hsl(203deg, 80%, 76%);
	--hue-300: hsl(205deg, 90%, 58%);
	--hue-400: hsl(207deg, 100%, 40%);
	--hue-500: hsl(220deg, 66%, 38%);
	--hue-600: hsl(221.5deg, 62.5%, 30.75%);
	--hue-700: hsl(223deg, 59%, 24.5%);
	--hue-800: hsl(224.5deg, 55.5%, 18.25%);
	--hue-900: hsl(226deg, 52%, 13%);
  
  --hue-blue-100: color-mix(in srgb, var(--hue-100) 100%, var(--hue-100));
  --hue-blue-200: color-mix(in srgb, var(--hue-200) 100%, var(--hue-400));
  --hue-blue-300: color-mix(in srgb, var(--hue-300) 100%, var(--hue-400));
  --hue-blue-400: color-mix(in srgb, var(--hue-400) 100%, var(--hue-400));
  --hue-blue-500: color-mix(in srgb, var(--hue-500) 100%, var(--hue-500));
  --hue-blue-600: color-mix(in srgb, var(--hue-600) 100%, var(--hue-500));
  --hue-blue-700: color-mix(in srgb, var(--hue-700) 100%, var(--hue-500));
  --hue-blue-800: color-mix(in srgb, var(--hue-800) 100%, var(--hue-500));
  --hue-blue-900: color-mix(in srgb, var(--hue-900) 100%, var(--hue-900));

  
 /*   --info-100: color-mix(in srgb, var(--blue) 20%, var(--white));
	--info-200: color-mix(in srgb, var(--blue) 40%, var(--white));
	--info-300: color-mix(in srgb, var(--blue) 60%, var(--white));
	--info-400: color-mix(in srgb, var(--blue) 80%, var(--white));
	--info-500: color-mix(in srgb, var(--blue) 100%,var(--white));
	--info-600: color-mix(in srgb, var(--blue) 80%, var(--black));
	--info-700: color-mix(in srgb, var(--blue) 60%, var(--black));
	--info-800: color-mix(in srgb, var(--blue) 40%, var(--black));
	--info-900: color-mix(in srgb, var(--blue) 20%, var(--black));
 
--info-100: var(--light-blue);
	--info-200: color-mix(in srgb, var(--blue) 25%, var(--light-blue));
	--info-300: color-mix(in srgb, var(--blue) 50%, var(--light-blue));
	--info-400: color-mix(in srgb, var(--blue) 75%, var(--light-blue));
	--info-500: color-mix(in srgb, var(--blue) 100%,var(--light-blue));
	--info-600: color-mix(in srgb, var(--blue) 75%, var(--dark));
	--info-700: color-mix(in srgb, var(--blue) 50%, var(--dark));
	--info-800: color-mix(in srgb, var(--blue) 25%, var(--dark));
	--info-900: var(--dark);*/
  --primary: var(--info-500);


  
  --green-100: color-mix(in srgb, var(--green) 20%, var(--white));
	--green-200: color-mix(in srgb, var(--green) 40%, var(--white));
	--green-300: color-mix(in srgb, var(--green) 60%, var(--white));
	--green-400: color-mix(in srgb, var(--green) 80%, var(--white));
	--green-500: color-mix(in srgb, var(--green) 100%,var(--white));
	--green-600: color-mix(in srgb, var(--green) 80%, var(--black));
	--green-700: color-mix(in srgb, var(--green) 60%, var(--black));
	--green-800: color-mix(in srgb, var(--green) 40%, var(--black));
	--green-900: color-mix(in srgb, var(--green) 20%, var(--black));
  --success: var(--green-500);

  
  --gray-50:  #fafafa;
  --gray-100:  color-mix(in srgb, var(--light-gray) 100%, var(--medium-gray));
	--gray-200:  color-mix(in srgb, var(--light-gray) 75%, var(--medium-gray));
	--gray-300:  color-mix(in srgb, var(--light-gray) 50%, var(--medium-gray));
	--gray-400:  color-mix(in srgb, var(--light-gray) 25%, var(--medium-gray));
	--gray-500:  color-mix(in srgb, var(--light-gray) 0%, var(--medium-gray));
	--gray-600:  color-mix(in srgb, var(--medium-gray) 75%, var(--dark-gray));
	--gray-700:  color-mix(in srgb, var(--medium-gray) 50%, var(--dark-gray));
	--gray-800:  color-mix(in srgb, var(--medium-gray) 25%, var(--dark-gray));
	--gray-900:  color-mix(in srgb, var(--medium-gray) 0%, var(--dark-gray));
  /* --light-gray:  var(--gray-100);
  --dark-gray:  var(--gray-800);*/
  --secondary:  var(--gray-500);
  --gray:  var(--dark-gray);
  
  
  --yellow-100: color-mix(in srgb, var(--yellow) 20%, var(--white));
	--yellow-200: color-mix(in srgb, var(--yellow) 40%, var(--white));
	--yellow-300: color-mix(in srgb, var(--yellow) 60%, var(--white));
	--yellow-400: color-mix(in srgb, var(--yellow) 80%, var(--white));
	--yellow-500: color-mix(in srgb, var(--yellow) 100%,var(--white));
	--yellow-600: color-mix(in srgb, var(--yellow) 80%, var(--black));
	--yellow-700: color-mix(in srgb, var(--yellow) 60%, var(--black));
	--yellow-800: color-mix(in srgb, var(--yellow) 40%, var(--black));
	--yellow-900: color-mix(in srgb, var(--yellow) 20%, var(--black));
 
/* 
  
  --gray-100: var(--light-gray);
	--gray-200:  var(--bs-gray-200);
	--gray-300:  var(--bs-gray-300);
	--gray-400:  var(--bs-gray-400);
	--gray-500:  var(--bs-gray-500);
	--gray-600:  var(--bs-gray-600);
	--gray-700:  var(--bs-gray-700);
	--gray-800:  var(--bs-gray-800);
	--gray-900:  var(--bs-gray-900);
  --xxlight-gray:  var(--bs-gray-100);
  --xxsecondary:  var(--bs-gray-500);
  --xxgray:  var(--bs-gray-500);
  --xxdark-gray:  var(--bs-gray-800); */
  
  
 /*  

	* end HSL Colors **/
  
  
}
header#header{position: sticky !important; z-index: 502; top: 0}
.user-logged-in header#header{position: sticky !important; z-index: 500; top: 40px}
.user-logged-in .offcanvas.offcanvas-end {top: 40px;}
.node--unpublished { padding: 0; }
/*.container-fluid { overflow-x: hidden;}*/
.ratio>img {height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%;}
.light-blue-background-middle-right-halftone-circle:before {
    content: '';
    background: url(/files/img/bg_halftone_circle.png) top left no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: 180%;
    width: 350px;
    height: 600px;
  max-height: 100%;}
section {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    section {
        max-width:540px;
    }
}

@media (min-width: 768px) {
    section {
        max-width:720px;
    }
}

@media (min-width: 992px) {
  header#header{top: -2rem}
  .user-logged-in header#header{top: calc(var(--gin-toolbar-secondary-height) - 2rem)}
  .user-logged-in .offcanvas.offcanvas-end {top: var(--gin-toolbar-secondary-height);}

  section {
    max-width:960px;
  }
}

@media (min-width: 1200px) {
    section {
        max-width:1140px;
    }
}
@media (min-width: 1400px) {
    section {
        max-width: 1320px;
    }
}
[class*='alert-'] { background-color: var(--bs-alert-bg); }

.card-deck { display: flex; gap:0 1rem; flex-wrap: wrap}
.card-deck.mx-sm-5 {margin-left:0 !important; margin-right:0 !important; }
.card-deck .card {flex: 1; max-width:30rem; margin: 0 0 1rem!important;}
/*.card-deck .card .card-text.smaller{ font-size: .85rem}*/
.card-deck .card.wide-1 .col-lg-6, .card-deck .card.wide-2 .col-lg-6 {display:flex; justify-content: center; flex-direction: column}
.card-deck:has(.number) { gap:3rem}
.embed-responsive-1by1 .embed-responsive-item {aspect-ratio: 1;}
.embed-responsive-4by3 .embed-responsive-item {aspect-ratio: 1.3333333;}
.h3, h3 {text-transform: none; letter-spacing: normal; }

.crumb {margin-top:0 !important}
/* background overflow fixes */
div[id^='paragraph-'].container-fluid { overflow-x: clip !important; overflow-y: visible!important; }
.background-top-right-slants:before,
.transparent-background-top-right-slants:before { right: 0  !important;  width: 33%  !important; height: 3rem  !important;}
.background-middle-right-halftone-circle:before, 
.light-blue-background-middle-right-halftone-circle:before {  right: 0  !important; background-position-x: 300px  !important;}
#footer:after { height: 10rem  !important; width: 2rem  !important; top: 2rem  !important; right: 0rem  !important; transform: rotate(0deg)  !important; }
#block-big3new { margin: 0 !important }
/*end fixes */
.btn {padding:1em 1.6em  !important; border-radius:.375rem !important;}
.btn.btn-dark {padding:1rem 1.6em  !important; font-size: 85%; }
.btn.btn-dark:hover,btn.btn-dark:active{ --bs-btn-hover-bg : var(--dark); }
.text-left {text-align: left}
.text-right {text-align: right}
.text-light {color: rgba(255,255,255,0.85) !important;}
.rel { position: relative; }
.large { font-size: 1.25rem; }
.larger { font-size: 1.45rem; }
.smaller .larger { font-size: 1rem; }
/* Badge fixes (colors appended to bg-*, below) */
.badge-pill {border-radius: 50rem !important;}
/* Webform fixes 
.fieldset-wrapper:has([class*='col']) { display: flex; flex-wrap: wrap;  margin: 0 -.5rem; }
.fieldset-wrapper:has([class*='col']) > [class*='col'] {display:flex;}
.fieldset-wrapper:has([class*='col']) > [class*='col']:before, .fieldset-wrapper:has([class*='col']) > [class*='col']:after { content: ""; width: .5rem; }
.fieldset-wrapper:has([class*='col']) > [class*='col'].form-floating>label { padding: 1 1.25rem;}*/
/* Review fixes */
.op75{opacity:.75}
ul.plain { list-style: none; padding-left: 0;}
.card-title { margin-bottom:.5rem } 
.border-right { border-right: 1px solid #dee2e6 !important; }
.border-left { border-left: 1px solid #dee2e6 !important; }
/* END Review fixes */
.ml-0 { margin-left: 0} .ml-1 { margin-left: .25rem} .ml-2 { margin-left: .5rem} .ml-3 { margin-left: 1rem} .ml-4 { margin-left: 2rem} .ml-5 { margin-left: 3rem} .ml-auto { margin-left: auto}
.mr-0 { margin-right: 0} .mr-1 { margin-right: .25rem} .mr-2 { margin-right: .5rem} .mr-3 { margin-right: 1rem} .mr-4 { margin-right: 2rem} .mr-5 { margin-right: 3rem} .mr-auto { margin-right: auto} 
.pl-0 { padding-left: 0} .pl-1 { padding-left: .25rem} .pl-2 { padding-left: .5rem} .pl-3 { padding-left: 1rem} .pl-4 { padding-left: 2rem} .pl-5 { padding-left: 3rem} 
.pr-0 { padding-right: 0} .pr-1 { padding-right: .25rem} .pr-2 { padding-right: .5rem} .pr-3 { padding-right: 1rem} .pr-4 { padding-right: 2rem} .pr-5 { padding-right: 3rem}
@media (min-width: 576px) {
.ml-sm-1 { margin-left: .25rem} .ml-sm-2 { margin-left: .5rem} .ml-sm-3 { margin-left: 1rem} .ml-sm-4 { margin-left: 2rem} .ml-sm-5 { margin-left: 3rem} .ml-sm-auto { margin-left: auto}
.mr-sm-1 { margin-right: .25rem} .mr-sm-2 { margin-right: .5rem} .mr-sm-3 { margin-right: 1rem} .mr-sm-4 { margin-right: 2rem} .mr-sm-5 { margin-right: 3rem} .mr-sm-auto { margin-right: auto} 
.pl-sm-1 { padding-left: .25rem} .pl-sm-2 { padding-left: .5rem} .pl-sm-3 { padding-left: 1rem} .pl-sm-4 { padding-left: 2rem} .pl-sm-5 { padding-left: 3rem} 
.pr-sm-1 { padding-right: .25rem} .pr-sm-2 { padding-right: .5rem} .pr-sm-3 { padding-right: 1rem} .pr-sm-4 { padding-right: 2rem} .pr-sm-5 { padding-right: 3rem}
.card-deck .card {flex: 1; max-width:30rem; margin: 0 !important; margin-bottom: 0 !important;}
}
@media (min-width: 768px) {
.ml-md-1 { margin-left: .25rem} .ml-md-2 { margin-left: .5rem} .ml-md-3 { margin-left: 1rem} .ml-md-4 { margin-left: 2rem} .ml-md-5 { margin-left: 3rem} .ml-md-auto { margin-left: auto}
.mr-md-1 { margin-right: .25rem} .mr-md-2 { margin-right: .5rem} .mr-md-3 { margin-right: 1rem} .mr-md-4 { margin-right: 2rem} .mr-md-5 { margin-right: 3rem} .mr-md-auto { margin-right: auto} 
.pl-md-1 { padding-left: .25rem} .pl-md-2 { padding-left: .5rem} .pl-md-3 { padding-left: 1rem} .pl-md-4 { padding-left: 2rem} .pl-md-5 { padding-left: 3rem} 
.pr-md-1 { padding-right: .25rem} .pr-md-2 { padding-right: .5rem} .pr-md-3 { padding-right: 1rem} .pr-md-4 { padding-right: 2rem} .pr-md-5 { padding-right: 3rem}
}
@media (min-width: 992px) {
.ml-lg-1 { margin-left: .25rem} .ml-lg-2 { margin-left: .5rem} .ml-lg-3 { margin-left: 1rem} .ml-lg-4 { margin-left: 2rem} .ml-lg-5 { margin-left: 3rem} .ml-lg-auto { margin-left: auto}
.mr-lg-1 { margin-right: .25rem} .mr-lg-2 { margin-right: .5rem} .mr-lg-3 { margin-right: 1rem} .mr-lg-4 { margin-right: 2rem} .mr-lg-5 { margin-right: 3rem} .mr-lg-auto { margin-right: auto} 
.pl-lg-1 { padding-left: .25rem} .pl-lg-2 { padding-left: .5rem} .pl-lg-3 { padding-left: 1rem} .pl-lg-4 { padding-left: 2rem} .pl-lg-5 { padding-left: 3rem} 
.pr-lg-1 { padding-right: .25rem} .pr-lg-2 { padding-right: .5rem} .pr-lg-3 { padding-right: 1rem} .pr-lg-4 { padding-right: 2rem} .pr-lg-5 { padding-right: 3rem}
}
@media (min-width: 1200px) {
.ml-xl-1 { margin-left: .25rem} .ml-xl-2 { margin-left: .5rem} .ml-xl-3 { margin-left: 1rem} .ml-xl-4 { margin-left: 2rem} .ml-xl-5 { margin-left: 3rem} .ml-xl-auto { margin-left: auto}
.mr-xl-1 { margin-right: .25rem} .mr-xl-2 { margin-right: .5rem} .mr-xl-3 { margin-right: 1rem} .mr-xl-4 { margin-right: 2rem} .mr-xl-5 { margin-right: 3rem} .mr-xl-auto { margin-right: auto} 
.pl-xl-1 { padding-left: .25rem} .pl-xl-2 { padding-left: .5rem} .pl-xl-3 { padding-left: 1rem} .pl-xl-4 { padding-left: 2rem} .pl-xl-5 { padding-left: 3rem} 
.pr-xl-1 { padding-right: .25rem} .pr-xl-2 { padding-right: .5rem} .pr-xl-3 { padding-right: 1rem} .pr-xl-4 { padding-right: 2rem} .pr-xl-5 { padding-right: 3rem}
}

.text-left {text-align: left}
.text-right {text-align: right}

.float-left {float: left}
.float-right {float: right}

a {text-decoration: none; }

img {height: auto !important; max-width: 100%  !important;}

/* system messsages*/
.messages__content.container{ max-width:none; --bs-alert-bg:var(--green-100) }
.messages__wrapper .messages-warning{ background: var(--yellow-100) }
.messages__wrapper .messages-error{ background:var(--red-100); }
.messages__wrapper .messages .messages__item:before{ font-weight: 300; font-family: "Font Awesome 6 Pro"; content:"\f071"; font-size:1.5em; margin-right:1rem; }
.messages__wrapper .messages--status .messages__item:before{ content:"\f058"; }

/*<!--container fixes-->*/
.homepage-hero .container,
#navbar-top>.container{ padding-right:0; padding-left:0}
.your_peeps .img_circ, .your_peeps .img_circ img {width: 16rem !important; }
/*<!--nav fixes-->*/
.mega li a { font-size: 14px; }
  #block-mastermenu a.nav-link { padding: .5rem;font-size:13px}
@media (min-width: 992px) {
  #block-mastermenu a.nav-link { padding: .5rem .75vw; font-size:14px}
  .navbar-brand { width: 15rem; max-width: 22.5vw; }
}@media (min-width: 1200px) {
  #block-mastermenu a.nav-link { padding: .5rem .75vw; font-size:16px}
}
/*<!--form fixes-->*/
.form-no-label > .form-floating > label{display:none}
/*<!--card fixes-->*/
.card.penn-college-blue-white-text { /*padding:0 !important*/}
h4.card-title {  font-size: 1.75rem;}
a {font-family: inherit;}
.btn-outline-corner:hover {  background-size: calc(100% + 3rem) 100% !important;  color: var(--white) !important;}
.btn {padding: 1em 1.6em !important;}
.btn.p-0 {padding: 0 !important;}
.btn.btn-sm, .btn.smaller, .btn.small { padding: .5em .8em !important; font-size: .75rem; }
.popover-body p {margin-bottom: 0; }
.translucent-blue-green-stitch .card-title.text-dark {color:var(--light) !important;}
/*.container .container, .container-fluid .container {padding-left:0; padding-right:0;}*/
.smaller { font-size: .875rem; }
.small, small { font-size: .75rem; }



.bg-danger, .bg-red, .badge-danger {background-color:var(--red) !important; color: var(--light);}
.bg-red-100 {background-color: var(--red-100);}
.bg-red-200 {background-color: var(--red-200);}
.bg-red-300 {background-color: var(--red-300);}
.bg-red-400 {background-color: var(--red-400);}
.bg-red-500 {background-color: var(--red-500);}
.bg-red-600 {background-color: var(--red-600); color: var(--light); }
.bg-red-700 {background-color: var(--red-700); color: var(--light); }
.bg-red-800 {background-color: var(--red-800); color: var(--light); }
.bg-red-900 {background-color: var(--red-900); color: var(--light); }

.bg-primary, .bg-blue{background-color:var(--blue) !important; color: var(--light);}
.bg-blue-100 {background-color: var(--blue-100);}
.bg-blue-200 {background-color: var(--blue-200);}
.bg-blue-300 {background-color: var(--blue-300);}
.bg-blue-400 {background-color: var(--blue-400);}
.bg-blue-500 {background-color: var(--blue-500); color: var(--light); }
.bg-blue-600 {background-color: var(--blue-600); color: var(--light); }
.bg-blue-650 {background-color: var(--blue-650); color: var(--light); }
.bg-blue-700 {background-color: var(--blue-700); color: var(--light); }
.bg-blue-800 {background-color: var(--blue-800); color: var(--light); }
.bg-blue-900, .bg-dark, .badge-dark {background-color: var(--blue-900); color: var(--light); }

.bg-hue-blue-100 {background-color: var(--hue-blue-100);}
.bg-hue-blue-200 {background-color: var(--hue-blue-200);}
.bg-hue-blue-300 {background-color: var(--hue-blue-300);}
.bg-hue-blue-400 {background-color: var(--hue-blue-400); color: var(--light); }
.bg-hue-blue-500 {background-color: var(--hue-blue-500); color: var(--light); }
.bg-hue-blue-600 {background-color: var(--hue-blue-600); color: var(--light); }
.bg-hue-blue-650 {background-color: var(--hue-blue-650); color: var(--light); }
.bg-hue-blue-700 {background-color: var(--hue-blue-700); color: var(--light); }
.bg-hue-blue-800 {background-color: var(--hue-blue-800); color: var(--light); }
.bg-hue-blue-900 {background-color: var(--hue-blue-900); color: var(--light); }


.bg-info, .badge-info{background-color:var(--info) !important; color: var(--light);}
.bg-info-100 {background-color: var(--info-100);}
.bg-info-200 {background-color: var(--info-200);}
.bg-info-300 {background-color: var(--info-300);}
.bg-info-400 {background-color: var(--info-400);}
.bg-info-500 {background-color: var(--info-500); color: var(--light); }
.bg-info-600 {background-color: var(--info-600); color: var(--light); }
.bg-info-650 {background-color: var(--info-650); color: var(--light); }
.bg-info-700 {background-color: var(--info-700); color: var(--light); }
.bg-info-800 {background-color: var(--info-800); color: var(--light); }
.bg-info-900 {background-color: var(--info-900); color: var(--light); }


.bg-primary, .badge-primary{background-color:var(--info) !important; color: var(--light);}
.bg-primary-100 {background-color: var(--info-100);}
.bg-primary-200 {background-color: var(--info-200);}
.bg-primary-300 {background-color: var(--info-300);}
.bg-primary-400 {background-color: var(--info-400);}
.bg-primary-500 {background-color: var(--info-500); color: var(--light); }
.bg-primary-600 {background-color: var(--info-600); color: var(--light); }
.bg-primary-650 {background-color: var(--info-650); color: var(--light); }
.bg-primary-700 {background-color: var(--info-700); color: var(--light); }
.bg-primary-800 {background-color: var(--info-800); color: var(--light); }
.bg-primary-900 {background-color: var(--info-900); color: var(--light); }




.bg-success, .bg-green, .badge-success{background-color:var(--green) !important; color: var(--light);}
.bg-green-100 {background-color: var(--green-100);}
.bg-green-200 {background-color: var(--green-200);}
.bg-green-300 {background-color: var(--green-300);}
.bg-green-400 {background-color: var(--green-400);}
.bg-green-500 {background-color: var(--green-500);}
.bg-green-600 {background-color: var(--green-600);}
.bg-green-650 {background-color: var(--green-650); color: var(--light); }
.bg-green-700 {background-color: var(--green-700); color: var(--light); }
.bg-green-800 {background-color: var(--green-800); color: var(--light); }
.bg-green-900 {background-color: var(--green-900); color: var(--light); }


.bg-warning, .bg-yellow, .badge-warning{background-color:var(--yellow) !important; color: var(--dark-gray);}
.bg-yellow-100 {background-color: var(--yellow-100);}
.bg-yellow-200 {background-color: var(--yellow-200);}
.bg-yellow-300 {background-color: var(--yellow-300);}
.bg-yellow-400 {background-color: var(--yellow-400);}
.bg-yellow-500 {background-color: var(--yellow-500);}
.bg-yellow-600 {background-color: var(--yellow-600);}
.bg-yellow-700 {background-color: var(--yellow-700); color: var(--light); }
.bg-yellow-800 {background-color: var(--yellow-800); color: var(--light); }
.bg-yellow-900 {background-color: var(--yellow-900); color: var(--light); }

.bg-secondary, .bg-gray, .badge-secondary {background-color: var(--gray-500) !important;color: var(--light);}
.bg-gray-100, .badge-light {background-color: var(--gray-100); color: var(--dark-gray);}
.bg-gray-200 {background-color: var(--gray-200);}
.bg-gray-300 {background-color: var(--gray-300);}
.bg-gray-400 {background-color: var(--gray-400);}
.bg-gray-500 {background-color: var(--gray-500); color: var(--light);}
.bg-gray-600 {background-color: var(--gray-600); color: var(--light); }
.bg-gray-650 {background-color: var(--gray-650); color: var(--light); }
.bg-gray-700 {background-color: var(--gray-700); color: var(--light); }
.bg-gray-800 {background-color: var(--gray-800); color: var(--light); }
.bg-gray-900 {background-color: var(--gray-900); color: var(--light); }

.grid-container {
  /**
   * User input values.
   */
  --grid-layout-gap: 1rem;
  --grid-column-count: 12; /* This gets overridden by an inline style. */
  --grid-item--min-width: 18rem; /* This gets overridden by an inline style. */
  
  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
  /*--grid-item-2-max-width: calc((100% - (var(--grid-layout-gap) * 2));
  --grid-item-3-max-width: calc((100% - (var(--grid-layout-gap) * 3));*/

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
  padding: var(--grid-layout-gap);
  grid-auto-flow: dense;
}
.container-fluid:has(.grid-container) {
  padding: 0;
}
.row > .col-extend:last-child {
    flex-grow: 1;
    margin: 0 calc(((100vw - 100%) / -2) + (var(--bs-gutter-x) * 1.5)) 0 0;
}
.row > .col-extend:first-child {
    flex-grow: 1;
    margin: 0 0 0 calc(((100vw - 100%) / -2) + (var(--bs-gutter-x) * 1.5));
}


.grid-item {
  /*display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 50px;
  background: var(--light-blue);
  font-size: 13px;
  border-radius: 0.25rem;
  */
  min-width: var(--grid-item--min-width); 
}
.grid-item-2, .grid-col-2 {
  /*background: lightyellow;*/
  grid-column: span 2;
  max-width: calc(100vw - (2 * var(--grid-layout-gap)))
}
.grid-item-3, .grid-col-3 {
  grid-column: span 3;
}
.grid-row-2 {
  grid-row: span 2;
}
.grid-row-3 {
  grid-row: span 3;
}
.grid-row-4 {
  grid-row: span 4;
}
@media (min-width: 1600px) {
.grid-col-xl-2{grid-column: span 2; }
.grid-row-xl-2{ grid-row: span 2;}
}@media (min-width: 1400px) {
.grid-col-lg-2{grid-column: span 2;}
.grid-row-lg-2{grid-row: span 2;}
}
.order--1{ background: plum; order:-1;}

@media (max-width:calc(54rem + 11rem)){
  .grid-item-3 {
    grid-column: span 2;
  } 
}
@media (max-width:calc(36rem + 8rem)){
  .grid-item-2, .grid-item-3 {
    grid-column: span 1;
  }
  .grid-container { grid-template-columns: 100%; }
}