@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Bold"), local("SU-Raleway-Bold"), url(/static/2025/SU-Raleway-Bold.woff2) format("woff2"), url(/static/2025/SU-Raleway-Bold.woff) format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Black Italic"), local("SU-Raleway-BlackItalic"), url(/static/2025/SU-Raleway-BlackItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-BlackItalic.woff) format("woff");
   font-weight: 900;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Black Regular"), local("SU-Raleway-Black"), url(/static/2025/SU-Raleway-Black.woff2) format("woff2"), url(/static/2025/SU-Raleway-Black.woff) format("woff");
   font-weight: 900;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway ExtraBold Regular"), local("SU-Raleway-ExtraBold"), url(/static/2025/SU-Raleway-ExtraBold.woff2) format("woff2"), url(/static/2025/SU-Raleway-ExtraBold.woff) format("woff");
   font-weight: 800;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway ExtraLight Regular"), local("SU-Raleway-ExtraLight"), url(/static/2025/SU-Raleway-ExtraLight.woff2) format("woff2"), url(/static/2025/SU-Raleway-ExtraLight.woff) format("woff");
   font-weight: 200;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Italic"), local("SU-Raleway-Italic"), url(/static/2025/SU-Raleway-Italic.woff2) format("woff2"), url(/static/2025/SU-Raleway-Italic.woff) format("woff");
   font-weight: normal;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Bold Italic"), local("SU-Raleway-BoldItalic"), url(/static/2025/SU-Raleway-BoldItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-BoldItalic.woff) format("woff");
   font-weight: bold;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway ExtraLight Italic"), local("SU-Raleway-ExtraLightItalic"), url(/static/2025/SU-Raleway-ExtraLightItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-ExtraLightItalic.woff) format("woff");
   font-weight: 200;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway ExtraBold Italic"), local("SU-Raleway-ExtraBoldItalic"), url(/static/2025/SU-Raleway-ExtraBoldItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-ExtraBoldItalic.woff) format("woff");
   font-weight: 800;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Medium Regular"), local("SU-Raleway-Medium"), url(/static/2025/SU-Raleway-Medium.woff2) format("woff2"), url(/static/2025/SU-Raleway-Medium.woff) format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Light Italic"), local("SU-Raleway-LightItalic"), url(/static/2025/SU-Raleway-LightItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-LightItalic.woff) format("woff");
   font-weight: 300;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Light Regular"), local("SU-Raleway-Light"), url(/static/2025/SU-Raleway-Light.woff2) format("woff2"), url(/static/2025/SU-Raleway-Light.woff) format("woff");
   font-weight: 300;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Medium Italic"), local("SU-Raleway-MediumItalic"), url(/static/2025/SU-Raleway-MediumItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-MediumItalic.woff) format("woff");
   font-weight: 500;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway SemiBold Regular"), local("SU-Raleway-SemiBold"), url(/static/2025/SU-Raleway-SemiBold.woff2) format("woff2"), url(/static/2025/SU-Raleway-SemiBold.woff) format("woff");
   font-weight: 600;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Regular"), local("SU-Raleway-Regular"), url(/static/2025/SU-Raleway-Regular.woff2) format("woff2"), url(/static/2025/SU-Raleway-Regular.woff) format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway SemiBold Italic"), local("SU-Raleway-SemiBoldItalic"), url(/static/2025/SU-Raleway-SemiBoldItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-SemiBoldItalic.woff) format("woff");
   font-weight: 600;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Thin Italic"), local("SU-Raleway-ThinItalic"), url(/static/2025/SU-Raleway-ThinItalic.woff2) format("woff2"), url(/static/2025/SU-Raleway-ThinItalic.woff) format("woff");
   font-weight: 100;
   font-style: italic;
   font-display: swap
}

@font-face {
   font-family: "SU Raleway";
   src: local("SU Raleway Thin Regular"), local("SU-Raleway-Thin"), url(/static/2025/SU-Raleway-Thin.woff2) format("woff2"), url(/static/2025/SU-Raleway-Thin.woff) format("woff");
   font-weight: 100;
   font-style: normal;
   font-display: swap
}


:root {
   --color--neutral--white: #ffffff;
   --color--neutral--black: #000;
   --color--greyscale--50: #f9fafb;
   --color--greyscale--100: #f3f4f6;
   --color--greyscale--150: #f6f6f6;
   --color--greyscale--200: #e5e7eb;
   --color--greyscale--300: #d1d5db;
   --color--greyscale--400: #8E9294;
   --color--greyscale--500: #6b7280;
   --color--greyscale--600: #4b5563;
   --color--greyscale--700: #374151;
   --color--greyscale--800: #1f2937;
   --color--greyscale--900: #111827;
   --color--greyscale--950: #030712;
   --color--status--warning: #f9fb93;
   --color--status--danger: #fbe3e4;
   --color--status--success: #cfefc2;
   --color--status--info: #cff4fc;
   --color--primary--confident-maroon: #61223b;
   --color--primary--brilliant-gold: #caa258;
   --color--primary--confident-maroon--5: rgba(97, 34, 59, 0.05);
   --color--primary--confident-maroon--10: rgba(97, 34, 59, 0.1);
   --color--primary--confident-maroon--20: rgba(97, 34, 59, 0.2);
   --color--primary--confident-maroon--40: rgba(97, 34, 59, 0.4);
   --color--primary--confident-maroon--60: rgba(97, 34, 59, 0.6);
   --color--primary--brilliant-gold--5: rgba(202, 162, 88, 0.05);
   --color--primary--brilliant-gold--10: rgba(202, 162, 88, 0.1);
   --color--primary--brilliant-gold--20: rgba(202, 162, 88, 0.2);
   --color--primary--brilliant-gold--30: rgba(202, 162, 88, 0.3);
   --color--primary--brilliant-gold--40: rgba(202, 162, 88, 0.4);
   --color--primary--brilliant-gold--60: rgba(202, 162, 88, 0.6);
   --color--secondary--seabreeze-green: #82CCAE;
   --color--secondary--fiery-orange: #DC4405;
   --color--secondary--wine-red: #A60A3D;
   --color--secondary--soil: #643335;
   --color--secondary--seabreeze-green--20: rgba(130, 204, 174, 0.2);
   --color--secondary--seabreeze-green--40: rgba(130, 204, 174, 0.4);
   --color--secondary--fiery-orange--20: rgba(220, 68, 5, 0.2);
   --color--secondary--fiery-orange--40: rgba(220, 68, 5, 0.4);
   --color--secondary--wine-red--20: rgba(166, 10, 61, 0.2);
   --color--secondary--wine-red--40: rgba(166, 10, 61, 0.4);
   --color--secondary--soil--20: rgba(100, 51, 53, 0.2);
   --color--secondary--soil--40: rgba(100, 51, 53, 0.4);
   --color--faculty--economic-management-sciences: #2CCCD3;
   --color--text--primary: #303133;
   --color--text--primary--10: rgba(48, 49, 51, 0.1);
   --color--text--primary--20: rgba(48, 49, 51, 0.2);
   --color--text--primary--40: rgba(48, 49, 51, 0.4);
   --color--text--primary--60: rgba(48, 49, 51, 0.6);
   --color--text--primary--80: rgba(48, 49, 51, 0.8);
   --color--text--inverse: #ffffff;
   --color--border--color: #EBEAEA;
   --font--body: SU Raleway, sans-serif;
   scroll-behavior: smooth;
   scroll-padding-top: 100px
}

:root{ 
   --su--color--primary:#2cccd3;
   --pagemargin-w: 2.875rem;
   --pagemargin-nz: 1.875rem;
   --pagemargin-z: 1.875rem;
}

@media (max-width: 700px) {
   :root{
      --pagemargin-w: 2rem;
      --pagemargin-nz: 1rem;
      --pagemargin-z: 1rem;
   }
}

@media (max-width: 640px) {
   :root{
      --pagemargin-w: 1rem;
      --pagemargin-z: 0;
   }
}



html {
   font-size: 90%;
/*   background-color: var(--color--primary--confident-maroon); */
   background-color: #1A1A1B;
/*   overflow-y: scroll; */
   scrollbar-gutter: stable; 
   
}

body {
   font-family: "SU Raleway", sans-serif;
   font-size: 1rem;
   line-height: 1.35;
   color: var(--color--text--primary);
   font-weight: normal;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background-color: white;
   box-shadow: 0 0 0 2000px white;
   position: relative;
   }


html, body {  margin: 0;  }

body.no-scroll {
    overflow: hidden;
}

body.no-scroll::after {

}


a {
   color: var(--color--primary--confident-maroon);
   font-weight: 600;
   text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease; 
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(97, 34, 59, 0.2);
}

a:hover {
   color: rgb(44, 204, 211);
   text-decoration-color: rgba(44, 204, 211, 0.3);
}
a:focus-visible {
   color: rgb(44, 204, 211);
   text-decoration-color: rgba(44, 204, 211, 0.3);
}

.site-header {
  display: grid;
  grid-template-areas:
    'logo utilities utilities'
    'logo title utilities2';
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto auto;
  background-color: var(--color--primary--confident-maroon);
/* position: relative; */  
}

@media (max-width: 640px) {
  .site-header {
     grid-template-areas:
        'logo utilities'
        'logo utilities2'
        'title title';
  }
}





.logo       { grid-area: logo; margin: 1.875rem var(--pagemargin-nz);  width: 14.5625rem; }
.utilities  { grid-area: utilities; margin: 0;  padding: 0.2rem;}
.page-title { grid-area: title; display: grid; grid-template-columns: 1fr auto 5fr; color: white; padding: 0 0 1.875rem 0; font-size: 2.2rem; margin: 0;}
.menubluebar { grid-area: menubluebar; margin: 0; display: block; width: 100%; height: 8px; background: #2cccd3; }
.editmdiv  { grid-area: utilities2; margin-right: 1.2rem; display: block; padding: 0.75rem;  color: white; visibility: hidden;}

@media (max-width: 800px) {
  .page-title { font-size: 1.5rem; }
  .logo {width: 10rem;}
}

@media (max-width: 700px) {
   .editmdiv { margin-right: 1rem; }
   .loginoutbtn { margin-right: 1rem; }
}

@media (max-width: 268px) {
  .searchicon, .searchbox { display: none; }
  #breadcrumbs { display: none; }
}



/*#logincontainer { position: relative; } */


.page-title span { grid-column: 2; }

.loginoutbtn {
   display: block;
   text-align: right; 
   padding: 0.3rem 1rem; 
   
   margin-right: 1.2rem;
   color: white; 
   align-self: center; 
   cursor: pointer;
   background: #e0e0e0;
   color: black;
/*   border: solid 1px black; */
   border: 0;
   border-radius: 4px; 
   transition: all 0.1s ease-in-out; /*cubic-bezier(0.3, 0, 0.5, 1); */
   font-size: 1rem;
}

.loginoutbtn:hover, #loginpanetoggle:checked ~ .loginoutbtn {
   color: black;
   background-color:  #2cccd3;  /*#F3F4F6; */
/*   box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.65); */
}

#loginpane {
   position: fixed; 
   transform: translate(10vw, -10vh) scale(0);
   transform-origin: top right; 
   top: 10%;
   right: 10%;
   opacity: 0;
   pointer-events: none;
   background: white;
   border-radius: 3px;
   border: 2px solid black;
   z-index: 100;
   
   padding: 2rem;
   transition: all 0.2s ease-in-out;
   width: 100%;
   max-width: 40ch;
   max-height: 90vh; 
   overflow-y: auto;
   box-sizing: border-box;
}

.loginpage {
   max-width: 40ch;
}

.loginpage .inputbox {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
    box-sizing: border-box; 
}

.loginpage label {
    font-weight: bold;
    font-size: 0.85rem;
    color: #555;
}

.loginpage .button {
    width: 100%; /* Full width button is much easier on mobile */
    padding: 12px;
    background-color: #e0e0e0;
    border: none;
    border-radius: 4px;
    font-weight: 600; 
    cursor: pointer;
    margin-top: 10px;
}

.loginpage .button:hover {
   background-color: #2cccd3;
}


.modal-backdrop {
  opacity: 0;
  pointer-events: none;
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; 
  background: rgba(0, 0, 0, 0.6);
  z-index: 99; 
  cursor: default;   
  transition: opacity 0.1s ease-in-out;
}

#loginpanetoggle:checked ~ #loginpane, #loginpanetoggle:checked ~ .modal-backdrop {
   opacity: 1;
   pointer-events: auto;
}

#loginpanetoggle:checked ~ #loginpane {
   transform: translate(0, 0) scale(1);
}




.editmdiv.editavail1 { visibility: visible; }

.editm-toggle {
   display: inline-flex;
   align-items: center;
   width: 2rem;
   height: 1.125rem;
   border: 2px solid var(--color--neutral--white);
   border-radius: 0.75rem;
   padding: 0 2px;
   cursor: pointer;
   background: #707070;
}

.editm-switch {
   transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);
   display: inline-block;
   width: 0.5625rem;
   height: 0.5625rem;
   border-radius: 0.5625rem;
   background-color: var(--color--neutral--white)
}

.editm-toggle.editm1 {
   background: #00bb00;
}

.editm-toggle.editm1 .editm-switch {
   margin-left: auto;
}

.searchicon {
      box-sizing: border-box;
      cursor: pointer;
      flex-shrink: 0;
      font-size: 0;
      width: 2.75rem;
      height: 2.75rem;
      background-color: var(--color--neutral--white);
      padding: 0;
      margin: 0;
      border: none;
      border-radius: 1.875rem;
      line-height: 1;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 2rem;
      mask-size: 2rem;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>');
      mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>')
}

.searchbox {
   visibility: hidden;
   margin-left: auto;
   line-height: 1.3;
   margin-right: 1.5rem;
   font-size: 0.875rem;
   max-width: 18.75rem;
   border-radius: 0;
   height: 2.3rem;
   padding-left: 0.875rem;
   padding-right: 2.75rem;
   border: none;   
}

.utilities {
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
}


.navisactive1, .main-menu > li > a.navisactive1, .main-menu > li > ul > li > a.navisactive1 { color: #1b888d; }





.main-menu  { grid-area: menu; background: white; display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem 2.5rem; padding: 1rem var(--pagemargin-nz); margin: 0;}


.main-menu > li {
   position: relative;
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.1666667;
   padding-top: .5rem;
   list-style: none;
   cursor: pointer;
   text-decoration-thickness: 2px;
   text-decoration-color: inherit;
}



.main-menu > li > a {
   text-decoration: none;
   color: var(--color--primary--confident-maroon);
}



.main-menu > li > a:focus-visible {
   color: #2cccd3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(44, 204, 211, 0,2);
}
.main-menu > li > a:hover {
   color: #2cccd3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(44, 204, 211, 0,2);
}


.main-menu > li > .expand-sub {
  transition: all .15s cubic-bezier(0.4,0,0.2,1);
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: var(--color--text--primary);
  transform: rotate(90deg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7.531" height="13.171" viewBox="0 0 7.531 13.171"><path d="M12.776,16.507l4.98-4.984a.937.937,0,0,1,1.329,0,.949.949,0,0,1,0,1.333L13.442,18.5a.94.94,0,0,1-1.3.027L6.462,12.86a.941.941,0,0,1,1.329-1.333Z" transform="translate(-11.246 19.359) rotate(-90)" fill="%23303133"/></svg>');
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7.531" height="13.171" viewBox="0 0 7.531 13.171"><path d="M12.776,16.507l4.98-4.984a.937.937,0,0,1,1.329,0,.949.949,0,0,1,0,1.333L13.442,18.5a.94.94,0,0,1-1.3.027L6.462,12.86a.941.941,0,0,1,1.329-1.333Z" transform="translate(-11.246 19.359) rotate(-90)" fill="%23303133"/></svg>');
}

.main-menu > li.open ul, .main-menu > li:hover > ul {
    visibility: visible;
    transition-delay: 0.3s;
}

.main-menu > li.open .expand-sub, .main-menu > li:hover .expand-sub {
    transform: rotate(-90deg);
    background-color: #2cccd3;
}


@media (hover: hover) and (pointer: fine) {
   .main-menu > li:hover > ul {
      visibility: visible;
      pointer-events: auto; 
      transition-delay: 0s, 0s; 
   }
}

.main-menu > li > ul {
   display: block;
   opacity: 1;
   transition: none;
   position: absolute;
   z-index: 10;
   visibility: hidden;
   list-style: none;
   top: 2rem;
   left: 0;
   background-color: #f9f9f9;
   padding: 0;
   border-radius: 0 0 1.25rem 0;
   transition: visibility 0.05s;
}

.main-menu > li.open .expand-sub {
     transform: rotate(-90deg);
     background-color: #2cccd3;
}


.main-menu > li > ul > li  {
   min-width: 21.875rem;
   padding: 0;
   color: var(--color--primary--confident-maroon);
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.1666667;
   display: inline-block;
   text-decoration-thickness: 2px;
}

.main-menu > li > ul > li > a {
   display: block;
   padding: 0.75rem 0.625rem;
   text-decoration: none;
   color: var(--color--primary--confident-maroon);
   display: block;
   margin: 0;
/*   transition: background-color 0.2s ease; */
}

.main-menu > li > ul > li:last-child > a {
   border-radius: 0 0 1.25rem 0;
   
}

.main-menu > li > ul > li > a:hover {
   color: #2cccd3;
/*   background-color: #f0f0f0; */
   background-color: #ffffff;
   box-shadow: inset 0 0 8px rgba(97, 34, 59, 0.15)
   /* rgba(0, 191, 255, 0.5); */
   
}

.main-menu > li > ul > li:not(:last-child) {
  border-bottom: 1px solid var(--color--primary--brilliant-gold--40);
}

.subsubmenu {
   padding: 1rem var(--pagemargin-nz) 0;
   display: flex;
   align-items: flex-start;
   gap: 0.8rem;
}

.subsubmenu .pillgroup {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 0.8rem;
}

.subsubmenu a {
   display: inline-block;
   padding: 6px 16px;
   background-color: #e0e0e0;
   border-radius: 5px;
   text-decoration: none;
   text-decoration-thickness: 2px;
   color: #333;
   font-size: 0.9rem;
   transition: background 0.2s;
}

.subsubmenu a.chd1 {
   margin-right: 1rem; 
   white-space: nowrap;
   flex-shrink: 0;
   position: relative;
}

.subsubmenu a.chd1::after {
    content: '>';
    position: absolute;
    right: -1.25rem; 
    color: #444;
    pointer-events: none;
}


.subsubmenu a:hover, .subsubmenu a.isactive1 {
   background-color: #2cccd3;
}



.visible0 { color:#cccccc; text-decoration: line-through; }
.visible1 { }


div#postheader {
   margin: 0 var(--pagemargin-z);
}


div#postheader > p, div#postheader > .splash > p {
   padding-left:  var(--pagemargin-w);
   margin-bottom: 0.5rem;
}

#breadcrumbs {                   /* special blogs (w subtypes), simple wide1 blogs, where these are complete margins. Also for articles, but inside postheader, with more margins! */
   display: inline-block;
   margin: 1.875rem var(--pagemargin-z) 0 var(--pagemargin-z);
   padding: 0.2rem 1rem;
   color: var(--color--greyscale--800);
   font-size: 0.9rem; 
}



#breadcrumbs a {
   text-decoration: none;
   color: var(--color--primary--confident-maroon);
}

#breadcrumbs a:last-of-type { 
  color: #1b888d;
}

#breadcrumbs a:hover {
   color: #2cccd3;
   text-decoration: underline;
}
#breadcrumbs a:focus-visible {
   color: #2cccd3;
   text-decoration: underline;
}

.splash #breadcrumbs:not(.blogsubtype) {   /* front page and column-blogs. All others follow default rule above */
   margin: 1.875rem 1.875rem 1rem 0;   
}

@media (max-width: 640px) {
   .splash #breadcrumbs:not(.blogsubtype) {
      padding: 2.075rem 1rem 1rem 1rem; 
      margin: 0;
      width: 100%;
      box-sizing: border-box;
   }
}


.splash0 #breadcrumbs {
   background-color: rgba(0,0,0,0.35);
   color: white;
}

.splash0 #breadcrumbs a {
   color: white;
}

.splash0 #breadcrumbs a:last-of-type {
  color: #2cccd3;
}

.splash0 #breadcrumbs a:hover {
   color: #2cccd3;
   text-decoration: underline;
}
#breadcrumbs a:focus-visible {
   color: #2cccd3;
   text-decoration: underline;
}


div.genericcontainer {   
   box-sizing: border-box;
   padding: 1rem var(--pagemargin-nz) 1.875rem var(--pagemargin-w);
   width: 100%;
   max-width: 100ch;
   margin-inline 0 auto; 
   font-size: 1.25rem;
   line-height: 1.35;
}



div.blogartcontainer.wide1, div.blogartcontainer.subtype {
   box-sizing: border-box;
   margin-left: var(--pagemargin-z);
   margin-right: var(--pagemargin-z);
   margin-bottom: 1.875rem;
   width: 100%;
   max-width: 100ch;
/*   min-width: 70ch; */
/*   margin-inline: 0 auto;  */
}

div.blogartcontainer.wide1 > p, div.blogartcontainer.subtype > p {
   padding-left: 1rem;
}

div.blogartcontainer.subtype3 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%,260px), 1fr)); 
   gap: 4rem;
   max-width: none;
   width: auto;
   z-index: 0;
   position: relative;
   padding-bottom: 1.875rem;       
   margin-left: 2.87rem;  /*keep larm margins on mobile*/
   margin-right: 2.87rem;
   margin-top: 1.875rem;
}

div.blogartcontainer.subtype3 .deptcmsart {
   width: 100%;
   max-width: 400px;
   margin-inline: auto;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
   background-color: #ffffff;
   padding: 0;
   border-radius: 8px;
   overflow: hidden;
}

.staff_blg {
   position: relative;
}
 
div.blogartcontainer.subtype3 .staff_blg_img_wrap {
   display: block;
   width: 100%;
   height: auto;
}

.staff_blg_img_wrap {
   position: relative;
}

div.blogartcontainer.subtype3 .staff_blg_det {
   padding: 0.5rem 1rem 1rem 1rem;
}

.staff_blg_det .position, .staffcardp-pos {
   text-transform: uppercase;
   font-size: 0.9rem;
   letter-spacing: 0.5px;
   display: block;
   color: #666;
   margin-bottom: 1rem;
   border-bottom: 1px solid #eee;
   padding-bottom: 10px;
}

.staff_blg_det .staff-name::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}


.staff_blg_det .dlabel, .staffcardh .dlabel  {
display: block;
  font-size: 0.8rem;       
  font-weight: 800;         
  letter-spacing: 0.05rem; 
  text-transform: uppercase;
  color: #777;             
  margin-top: 12px;
}

.staff_blg_det .card-detail, .staffcardh .card-detail {
  display: block;
  font-size: 1rem;
  color: #555;
}


.staffcardh .dlabel { font-size: 0.9rem; }
.staffcardh .card-detail { font-size: 1.1rem; } 

.staffcardh {
   display: flex;
   align-items: flex-start;
   border: 1px solid rgb(200,200,200);
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
   gap: 5rem;
   margin-inline: auto;   
   padding: 2rem; 
}

.staffcardh .staff_blg_img_wrap {
   width: clamp(125px, 40%, 350px);
   flex-basis: clamp(125px, 40%, 350px);
   flex-grow: 0;
   flex-shrink: 0;
}

/*.staffcardh .staff_blg_img_wrap .staff_blg_img {
}*/

.staff_blg_img {
/*   width: 100%;
   height: auto;
  position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;   
}

.staff_blg_img_wrap svg {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden; 
  pointer-events: none;
}


.staffcardh .staff_blg_img {
/*   height: auto; */
   object-fit: cover;
/*   aspect-ratio: 400 / 429; */
}


/* .staffcard-contents { padding: 1rem; }  */
.staffcard-contents > .contentheading { margin-top: 0; }

.staffcard-dgrid {
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: 1rem 2rem;
   align-items: center;
   padding-bottom: 1rem;
   border-bottom: 1px solid #eee;
}

.staffcardp-label {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: #777;
}



@media (max-width: 750px) {
   .staffcardh {
      flex-direction: column;
      align-items: center;
   }
   .staffcardh .staff_blg_img_wrap {
         width: clamp(125px, 100%, 350px);
         flex-basis: clamp(125px, 100%, 350px);
   }
}


div.blogartcontainer.subtypeNone.wide1 table {
   width: max-content;
   max-width: max(80vw);
   
}

div.blogartcontainer.subtypeNone.wide0 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%,400px), 1fr));
   gap: 2rem;
   padding-bottom: 1.875rem;
   grid-auto-flow: row;
  z-index: 0;
  position: relative;
}

@media (max-width: 640px) {
   div.blogartcontainer.subtypeNone.wide0 {
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
   }
}

div.blogartcontainer.subtypeNone.wide0 .deptcmsart {
   width: 100%;
   max-width: 550px;
   margin-left: 0;
   margin-right: auto;
   box-sizing: border-box;
}

@media (max-width: 640px) {
   div.blogartcontainer.subtypeNone.wide0 .deptcmsart {
      max-width: none;
      margin-right: 0;
   }
}

div.blogartcontainer.subtypeNone.wide0::before, div.blogartcontainer.subtype3::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;    
  
    z-index: -1; 
    
    background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 20px),
    linear-gradient(to top, rgba(255, 255, 255, 1) 0px, rgba(255, 255, 255, 0) 20px),
    repeating-linear-gradient(
        rgba(252, 252, 252, 1),
        rgba(255, 255, 255, 0.7) 500px,
        rgba(252, 252, 252, 1) 1000px
    ),
    url('/static/2025/patternback_flip_sm.svg');

background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-size: 100% 20px, 100% 20px, auto, 2000px auto;
background-position: top, bottom, center, top left;
background-attachment: local;

}

div.blogfirstarticle {
   margin-left: var(--pagemargin-z);
   font-size: 1.2em;
   font-weight: 500;
   padding: 1rem;
}


div.blogfirstarticle.subtypeNone {
   box-sizing: border-box;
   max-width: clamp(200px, 90%, 68ch); 
   margin-left: 0; 
   margin-bottom: 1.875rem;
}
  
@media (max-width: 640px) {
   div.blogfirstarticle.subtypeNone {
      margin-bottom: 0;
      padding-bottom: 2.875rem ;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
     
   }
}


div.blogfirstarticle.subtype3 {
   padding-bottom: 0;
}  

div.splash0 {
   color: white;
   text-shadow: 0 0 5px black;
   box-sizing: border-box;
   width: 100%;

  z-index: 0;
  position: relative;

   min-height: 250px;
   padding: 0.05px;
}

div.splash0::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0; 
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;    
    z-index: -1;
    background-image:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),url('/static/2025/rooiban3.webp'),
       linear-gradient(to bottom, #7798ca 0%,  white 100% ); 
   background-size: cover, cover, cover;
   background-position: center, center, center;
   background-repeat: no-repeat, no-repeat, no-repeat;
}


.deptcmsart {
   font-size: 1.25rem;
   line-height: 1.35;
   box-sizing: border-box;
}

.splash0 .blogfirstarticle {
   background-color: rgba(0,0,0,0.35); 
}


.deptcmsart > :first-child { margin-top: 0; }
.deptcmsart > :last-child { margin-bottom: 0; }



.splash0  a {
   color: white; /* #61223b;; */
   text-decoration: underline;
/*   font-weight: 900; */
}

.splash0 a:focus-visible { color: #2cccd3; }
.splash0 a:hover { color: #2cccd3; }



div.blogartcontainer div.deptcmsart {
   overflow: visible;
   background: white; 
   padding: 1rem;
}

.blogartcontainer .deptcmsart.upcomingseminars {
   grid-row: 1;
   grid-column: -2; 
}

div.blogartcontainer div.deptcmsart img.fullwidthimg {
  width: 100%;
  height: auto;
  display: block;
}

div.blogartcontainer div.deptcmsart img {
  margin-bottom: 0.5rem;
}

.contentheading {
   font-size: 1.6875rem;
   line-height: 1.288461;
   font-weight: 700;
   font-family: "SU Raleway",sans-serif;
}

.createdate{
   color: #8a8a8a;
   font-size: 0.8rem;
   margin-top: -0.8rem;
   margin-bottom: 0;
}


.centerclass { 
   text-align: center;
}




#messagebox {
   position: fixed;
   width: fit-content;
   min-width: 10ch;
   max-width: 40ch;
   top: 15%;
   right: 2rem;
   z-index: 10;
}

.messageinb {
   width: fit-content;
   min-width: 10ch;
   max-width: 40ch;
   padding: 1rem;
   background-color: white;
   border: 2px solid black;
   border-radius: 20px;
   font-weight: bold;
   box-shadow: 0 4px 15px rgba(0,0,0,0.2);
   transform: translateX(120%) translateY(100px);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   cursor: pointer; 
   display: flex;
   align-items: center;
   gap: 1rem;
   
}

.messageinb.shown {
   transform: translateX(0) translateY(0);
}

.messageinb.killed {
   opacity: 0;
   pointer-events: none;
}