html {
    font-family:  Arial, Helvetica, sans-serif;
    box-sizing:   border-box;
}

body {
    margin:            0px;
    background-color:  #fadebc; /* e2c6a4 */
    font-size:         14px;
    box-sizing:        border-box;
}

.padh01 { padding-left:   2.7778% !important; }
.padw01 { padding-left:   5.5556% !important; }
.padw02 { padding-left:  11.1111% !important; }

.w005 { width:   2.7778%; }
.w01 { width:   5.5556%; }
.w02 { width:  11.1111%; }
.w03 { width:  16.6667%; }
.w04 { width:  22.2222%; }
.w05 { width:  27.7778%; }
.w06 { width:  33.3333%; }
.w07 { width:  38.8889%; }
.w08 { width:  44.4444%; }
.w09 { width:  50.0000%; }
.w10 { width:  55.5556%; }
.w11 { width:  61.1111%; }
.w12 { width:  66.6667%; }
.w13 { width:  72.2222%; }
.w14 { width:  77.7778%; }
.w15 { width:  83.3333%; }
.w16 { width:  88.8889%; }
.w17 { width:  94.4444%; }
.w18 { width: 100.0000%; }

.w02m { width:  calc(11.1111% - 14px); }
.w03m { width:  calc(16.6667% - 14px); }
.w04m { width:  calc(22.2222% - 14px); }
.w05m { width:  calc(27.7778% - 4px); }
.w08m { width:  calc(44.4444% - 14px); }
.w12m { width:  calc(66.6667% - 4px); }
.w13m { width:  calc(72.2222% - 10px); }
.w14m { width:  calc(77.7778% - 10px); }
.w15m { width:  calc(83.3333% - 10px); }
.w16m { width:  calc(88.8888% - 10px); }


.center {
    text-align: center;
}

.content {
        margin:  0px;
}

.overflowauto {
    overflow: auto;
}

.overflowvisible {
    overflow: visible;
}

.wrapper {
    display:  flex;
    margin:   0px;
    padding:  0px;
}


/* ============================================================ */
/* Responsive Iframe                                            */
/* ============================================================ */

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

/* ============================================================ */
/* Progress Bar                                                 */
/* ============================================================ */

.ProgressContainer {
    margin: 8px;
    border-radius: 8px;
    background-color: #c0e8ff;
    color: #000000;
    padding: 10px;
}

.ProgressContainer .label {
    font-weight: bold;
    text-align:  center;
}
			  

/*
progress[value]::-webkit-progress-value::before {
  content: '80%';
  position: absolute;
  right:    0;
  top:     -125%;
}
*/

progress {
    width:100%;
    margin-bottom:6px;
}

progress[value]::-webkit-progress-bar {
  background-color: #e0e0e0;
  border-radius:    15px;
  box-shadow:       0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
      -webkit-linear-gradient(-45deg, 
	                      transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                      rgba(0,0, 0, .1) 66%, transparent 66%),
      -webkit-linear-gradient(top, 
	                      rgba(255, 255, 255, .25), 
	                      rgba(0, 0, 0, .25)),
      -webkit-linear-gradient(left, #ff7f00, #7fff00);
  
  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar { 
    background-image:
	-moz-linear-gradient(
	    135deg, transparent 33%, 
	    rgba(9, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, 
	    transparent 66% 
	),
	-moz-linear-gradient( top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25) ),
	-moz-linear-gradient( left, #ff7f00, #7fff00 );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}

       
/* ============================================================ */
/* List and List Items                                          */
/* ============================================================ */

li {
   margin: 0.5ex 0 0 0;
}


/* ============================================================ */
/* Links                                                       */
/* ============================================================ */

a {
    color:           #840606;
    text-decoration: none;
    overflow:        auto;
}

a[href$=".ppt"]:after,
a[href$=".pptx"]:after {
    content:       "\f1c4";
    font-family:   FontAwesome;
    font-weight:   normal;
    display:       inline-block;
    line-height:   15px;
    padding-right: 5px;
    padding-left:  5px;
}
  
a[href$=".pdf"]:after {
    content:       "\f1c1";
    font-family:   FontAwesome;
    font-weight:   normal;
    display:       inline-block;
    line-height:   15px;
    padding-right: 5px;
    padding-left:  5px;
}

a[href^="mailto:"]:after {
    content:       "\f0e0";
    font-family:   FontAwesome;
    font-weight:   normal;
    display:       inline-block;
    line-height:   15px;
    padding-right: 5px;
    padding-left:  5px;
}


/* ============================================================ */
/* TopPanel, and its elements                                   */
/* ============================================================ */

.BannerAffiliation {
    font-size:    20px; /* 1.25em; */
    font-style:   italic;
    margin-left:  24px;
}

.BannerName {
    font-size:    28px; /* 1.75em; */
    font-style:   italic;
    font-weight:  bold;
    margin-left:  24px;
}

.FooterPanel {
    background-color:  #900000;
    bottom:            0;
    color:             #ffffff;
    left:              0;
    padding:           14px 0px 14px 0px;
    position:          fixed;
    text-align:        right;
    background-image:  linear-gradient(to top left,  rgb(108,0,0), rgb(220,00,00)); 
}

.COVID19deux {
    transition:        letter-spacing 3.0s, padding 5.0s;
    background-color:  #900000;
    color:             #ffffff;
    padding:           4px 0px 0px 0px;
    text-align:        center;
    font-size:         26px;
    font-style:        italic;
    background-image:  url("../../images/VirusMicrobiologyCellFreePhoto-1920x1080_dark.jpg");
    background-size:   cover;
}

.COVID19deux A {
    color: #ffffff;
}


.COVID19 {
    transition:        letter-spacing 2.0s, padding 4.0s;
    background-color:  #900000;
    color:             #ffffff;
    padding:           4px 0px 0px 0px;
    /* position:          fixed; */
    text-align:        center;
    font-size:         26px;
    font-style:        italic;
    background-image:  linear-gradient(to bottom left,
				       rgb(63,0,0),
				       rgb(255,00,00));
}

.COVID19 A {
    color: #ffffff;
}

.COVID19:hover, .COVID19deux:hover {
    letter-spacing: 6px;
    padding:        4px 0px 0px 0px;
}

.TopImagePanel {
    background-color:  #900000;
    color:             #ffffff;
    padding-bottom:    16px;
    padding-right:     16px;
    padding-top:       16px;
    text-align:        right;
    background-image:  linear-gradient(to top right,  rgb(144,0,0), rgb(36,00,72)); 
}

.TopImagePanel img {
    float:      right;
    max-width:  100%;
    height:     auto;
}

.TopPanel {
    letter-spacing:    1px;
    padding-top:       16px;
    padding-bottom:    16px;
    background-color:  #900000;
    background-image:  linear-gradient(to top left,  rgb(144,0,0), rgb(36,00,72)); 
    color:             #ffffff;
}

img.headshot {
    border-radius:  15px;
    border:         2px solid #bbbbbb;
    max-width:      100%
    padding:        5px;
    transition:     transform 2s;
}

img.headshot:hover {
    transform:  scale(1.15);
}

img.responsive {
    max-width:  100%;
    height:     auto;
}

img.TopImageEffect {
    border-radius:  15px;
    border:         0px solid #900000;
    max-width:      100%;
    padding:        0px;
    transition:     transform 2s;
}

img.TopImageEffect:hover {
    transform:  scale(1.15);
}


/* ============================================================ */
/* Main Navigation Panel                                        */
/* ============================================================ */

.MainNavPanel {
   background-color:  #b0b0b0;
   color:             #000000;
   font-size:         14px;
   letter-spacing:    1px;
   padding:           0px;
   background-image:  linear-gradient(to bottom right,  rgb(176,176,176), rgb(160,160,160)); 
}

.MainNavPanel A:link, .MainNavPanel A:visited {
   /* background-color:  #b0b0b0; */
   color:             #000000;
   display:           block;
   float:             left;
   font-style:        italic;
   padding:           4px 12px;
   text-align:        center;
   text-decoration:   none;
}

.MainNavPanel A:hover {
    background-color:  #d0d0d0;
    color:             #ff0000;
}

.MainNavPanel A.active {
    font-weight:  700;
}


/* ============================================================ */
/* Secondary Navigation Panel                                   */
/* ============================================================ */

.SecondaryNavPanel {
   background-color: #909090;
   color:            #000000;
   font-size:        14px;
   font-weight:      normal;
   letter-spacing:   1px;
   padding:          0px;
   background-image:  linear-gradient(to top right,  rgb(144,144,144), rgb(160,160,160)); 
}

.SecondaryNavPanel :link, .SecondaryNavPanel :visited {
   /* background-color: #909090; */
   color:            #000000;
   display:          block;
   float:            left;
   font-style:       italic;
   font-weight:      normal;
   padding:          4px 12px;
   text-align:       center;
   text-decoration:  none;
}

.SecondaryNavPanel A:hover {
    background-color: #a0a0a0;
    color:            #ff0000;
}


/* ============================================================ */
/* Intra Navigation Panel                                   */
/* ============================================================ */

.IntraNavPanel {
    background-color: #e0e0e0;
    bottom:           40px;
    color:            #000000;
    font-size:        14px;
    letter-spacing:   1px;
    padding:          6px 16px 6px 16px;
    position:         fixed;
    right:            0;
}

.IntraNavPanel a {
    font-weight:      700;
    background-color: #e0e0e0;
    color:            #800000;
    font-style:       italic;
    text-decoration:  none;
}


/* ============================================================ */
/* Banner Areas                                                 */
/* ============================================================ */
.ClassTitleBanner, .ClassSemesterBanner {
   background-color:  #b0b0b0;
   color:             #000000;
   font-size:         22px;
   font-weight:       bold;
   letter-spacing:    0px;
   padding:           6px 20px 4px;
}

.ClassTitleBanner {
    text-align: left;
}

.ClassSemesterBanner {
    text-align: right;
}



/* ============================================================ */
/* Page Content                                                 */
/* ============================================================ */
.PageContent {
   background-color:  #fadebc;
   color:             #000000;
   font-size:         16px;
   padding-left:      32px;
   padding-right:     32px;
   padding-top:       32px;
   vertical-align:    top;
}

.PageContentImage {
   background-color:  #fadebc;
   color:             #000000;
   font-size:         16px;
   padding-left:      16px;
   padding-top:       32px;
   text-align:        center;
   vertical-align:    top;
}

.PageContentImage img {
    height:      auto;
    max-width:   100%;
}

.PageHeading {
   font-size:   20px;
   font-weight: bold;
   text-align:  left;
}

.MathClassID {
   font-weight:  bold;
   letter-spacing:   1px;
}

.MathClassName {
   font-style:  italic;
   font-weight:  bold;
   letter-spacing:   1px;
}

.MathClassDesc {

}

.PaperStatus {
   font-weight: bold;
}

.PaperTitle {
   font-style: italic;
}

.PaperAuthor {
}

.PaperJournal {
   font-style: italic;
}       

.StudentThesis {
   font-style: italic;
}

.StudentType {
   font-weight:     bold;
}

.figurecaption {
   font-size:   14px;
   font-style:  italic;
   position:    relative;
   top:         4px;
}

.Address {
   font-size:    16px;
   padding-top:  16px;
}

.ContactInfo {
   font-size:    16px;
   padding-top:  16px;
}

.Name {
   font-size:    20px;
   font-weight:  bold;
}

.PublicKey {
   font-size:    x-small;
   font-weight:  bold;
   overflow:     auto;
}

.SDSUannounce {
    background-color: #a00000;
    border-radius:    10px;
    color:            #ffffff;
    font-style:       italic;
    font-weight:      bold;
    letter-spacing:   0.5px;
}

.announce {
    font-weight:       bold;
    background-color:  #ffff00;
    color:             #000000;
    border-radius:     5px;
    padding:           5px;
}

.Schedule .Plague .announce .topic {
    color: #000000;
}

.announce:hover {
    background-image:  radial-gradient(circle, rgb(255,255,0), rgb(255,223,63)); 
}

.Schedule .Test .announce A, .announce A {
    color: #800000;
}

.virtual {
    border:            2px solid #000000;
    font-weight:       700;
    letter-spacing:    1px;
    background-color:  #004000;
    color:             #ffffff;
    border-radius:     5px;
    padding:           6px;
    text-align:        center;
    font-style:        italic;
    transition:        letter-spacing 3s, opacity 18s, transform 7s;
}

.virtual:hover {
    letter-spacing: 5px;
    opacity:        0.1;
    transform:      rotate(15deg) translate(0,-16px) scale(0.95);
}

.Plague .virtual {
    border:            2px solid #808080;
    background-color:  #006000;
}

.quiz {
    border:            2px solid #000000;
    font-weight:       700;
    letter-spacing:    1px;
    background-color:  #400040;
    color:             #ffffff;
    border-radius:     5px;
    padding:           6px;
    text-align:        center;
    font-style:        italic;
    transition:        letter-spacing 3s, opacity 18s, transform 7s;
}

.Plague .TBP, .TBP {
    background-color:  #600000 !important;
}

.quiz:hover {
    letter-spacing: 5px;
    opacity:        0.1;
    transform:      rotate(-15deg) translate(0,-16px) scale(0.95);
}

.Plague .quiz {
    border:            2px solid #808080;
    background-color:  #600060;
}

.capstone {
    border:            2px solid #000000;
    font-weight:       700;
    letter-spacing:    1px;
    background-color:  #002060;
    color:             #ffffff;
    border-radius:     5px;
    padding:           6px;
    text-align:        center;
    font-style:        italic;
    transition:        letter-spacing 3s, opacity 18s, transform 7s;
}

.capstone:hover {
    letter-spacing: 5px;
    opacity:        0.1;
    transform:      rotate(-15deg) translate(0,-16px) scale(0.95);
}

.Plague .capstone {
    border:            2px solid #808080;
    background-color:  #004080;
}


/* ============================================================ */
/* Button Effects                                               */
/* ============================================================ */
button {
    background-color:    #666666;
    border-radius:       24px;
    border:              1px solid #000000;
    color:               #ffffff;
    display:             inline-block;
    font-size:           12px;
    margin:              2px;
    padding:             2px 36px;
    text-align:          center;
    text-align:          center;
    text-decoration:     none;
    transition-duration: 0.75s;
    width:               50%;
}

button:hover {
    color:            #000000;
    background-color: #e0e0e0;      
    box-shadow:       0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    width:            95%;
}


/* ============================================================ */
/* Class Schedules                                              */
/* =========================================================== */

.Schedule {
    font-family:       helvetica, sans-serif;
    padding:           12px 0px;
    background-color:  #fadebc; /* d2c694, e2c6a4 */
    overflow:          visible;
}

.Schedule .date {
   font-size:       14px;
   font-style:      italic ;
   font-weight:     bold;
   letter-spacing:  1px;
}

.Schedule .topic {
    font-size:  14px;
    font-weight: bold;
    color:      #000000;
}

.Schedule .topic .supplement, .Schedule .topic .supplemental {
    color:           #402040;
    font-style:      italic;
    letter-spacing:  0.5px;
    text-align:      right;
}

.Schedule .Alert {
    background-color: #ffff80;
    font-weight:      bold;
}

.Schedule .Alert:hover {
    background-color: #dfdf80;
}

.Schedule .NoClass {
    background-color: #a00000;
    color:            #ffffff;
    font-weight:      bold;
}

.Schedule .NoClass:hover {
    background-color: #800000;
    background-image:  radial-gradient(circle, rgb(160,0,0), rgb(64,00,00)); 
}

.Schedule .Test {
    background-color: #0000a0;
    color:            #ffffff;
    font-weight:      bold;
}

.Schedule .Test:hover {
    background-color: #000080;
    background-image:  radial-gradient(circle, rgb(0,0,160), rgb(0,0,64)); 
}

.Schedule .Test A {
    color: #ffe0c0;
}

.Schedule .ZombieApocalypse {
    background-color: #000000;
    color:            #ffffff;
}

.Schedule .ZombieApocalypse:hover {
    background-color: #202020;
    color:            #dedede;
}

.Schedule .Plague {
    background-color: #000000;
    color:            #ffffff;
    background-image:  radial-gradient(circle, rgb(0,0,0), rgb(64,48,48)); 
}

.Schedule .Plague .topic {
    color: #ffffff;
}

.Schedule .Plague A {
    color: #ff60a0;
}

.Schedule .Plague .topic .supplement, .Schedule .Plague .topic .supplemental {
    color:           #c0a0c0;
    font-style:      italic;
    letter-spacing:  0.5px;
    text-align:      right;
}

.Schedule .Plague:hover {
    background-color: #000000;
    background-image:  radial-gradient(circle, rgb(64,64,64), rgb(0,0,0)); 
}

.ScheduleDivider {
    border:            0px solid #000000;
    border-radius:     5px;
    margin:            0px;
    text-align:        center;
    vertical-align:    middle;
}

.ScheduleHeading {
    background-color:  #ffffff;
    border:            1px solid #000000;
    border-radius:     5px;
    font-size:         18px;
    font-weight:       bold;
    margin:            4px 0px 0px 0px;
    padding:           8px 6px 6px 6px;
    text-align:        center;
    margin:            2px;
}

.ScheduleHeading p {
    margin: 0px;
    display:         inline-block;
    vertical-align:  middle;
}

.ScheduleItem {
    background-color:  #e2d6c4;
    border:            1px solid #000000;
    border-radius:     5px;
    margin:            4px 2px 2px 2px;
    padding:           6px;
    font-size:         14px;
    margin:            2px;
}

.ScheduleItem img {
    max-width: 100%;
    height:    auto;
}

.ScheduleItem iframe {
    max-width: 100%;
    height:    auto;
}

.ScheduleItem:hover {
    border:            1px solid #000000;
    background-color:  #f2e6d4;
    background-image:  linear-gradient( to left bottom, rgb(252,240,232), rgb(206,194,176)); 
}

.ScheduleRow {
    border:   0px solid #000000;
    margin:   2px;
    display:  flex;
    flex-wrap:  wrap;
}

.ScheduleTitle {
    border-radius:   5px;
    border:          0px solid #000000;
    font-size:       20px;
    font-style:      italic;
    font-weight:     700;
    letter-spacing:  0px;
    margin:          4px 2px 2px 2px;
    padding:         6px;
    text-align:      center;
}

.ScheduleWeek {
    border:            1px solid #000000;
    border-radius:     5px;
    text-align:        center;
    vertical-align:    middle;
    margin:            2px;
    background-color:  #f2e6b4;
}

.ScheduleWeekX {
    border:            1px solid #f2e6b4;
    border-radius:     5px;
    text-align:        center;
    vertical-align:    middle;
    margin:            2px;
    background-color:  #f2e6b4;
}

.ScheduleWeek:hover {
    background-color:  #f2f6c4;
}

.ScheduleWeek p {
    display:         inline-block;
    vertical-align:  middle;
    font-weight:     bold;
    font-size:       14px;
}

.Schedule .NextLecture {
    transition: opacity 2s, transform 1s, background-color 3s;
    opacity:    1.0;
}

.Schedule .NextLecture:hover {
    opacity: 0.75;
    transform: scale(1.25);
    background-color: #f2e684;
}

.Schedule .CoveredLecture {
    background-color: #e2f6a4;
    transition: background-color 1s;
}

.Schedule .CoveredLecture:hover {
    background-color: #e2f6d4;
    background-image: linear-gradient( to right bottom, rgb(226,246,212), rgb(226,246,164)); 
}

.Schedule .TakeHome {
    background-color: #a4e2f6;
    transition: background-color 1s, scale 2s;
}

.Schedule .TakeHome:hover {
    background-color: #d4e2f6;
    transition: background-color 1s;
}

/* ============================================================ */
/* Silly Effects                                                */
/* ============================================================ */
.CSSeffect { /* Spinning Object */
    transition: opacity 2s, transform 4s;
    opacity: 1.0;
}

.CSSeffect:hover {
    opacity: 0.75;
    transform: rotate(-1080deg);
}

.CSSeffect2 {
    transition: opacity 2s, transform 4s;
    opacity: 1.0;
}

.CSSeffect2:hover {
    opacity: 0.75;
    transform: rotate(360deg) scale(1.25);
}

.CSSeffect3 {
    transition: opacity 2s, transform 3s;
    opacity: 1.0;
}

.CSSeffect3:hover {
    opacity: 0.75;
    transform: scale(1.25,1.3);
}

.CSSeffect4 {
    transition: opacity 2s, transform 3s;
    opacity: 1.0;
}

.CSSeffect4:hover {
    opacity: 0.75;
    transform: scale(1.25,1.50) skewX(-30deg);
}

.CSSeffect5 {
transition: opacity 2s, transform 3s;
    opacity: 1.0;
}

.CSSeffect5:hover {
    opacity: 0.85;
    transform: scale(1.1);
}

.CSSshrink {
transition: opacity 2s, transform 0.25s;
    opacity: 1.0;
}

.CSSshrink:hover {
    opacity: 0.85;
    transform: scale(0.50);
}

.CSSdrop {
transition: opacity 2s, transform 2s;
    opacity: 1.0;
}

.CSSdrop:hover {
    opacity: 0.85;
    transform: translate(0px, 220px);
}


.CSSeffectEarth {
    transition: opacity 2s, transform 4s;
    opacity: 1.0;
}

.CSSeffectEarth:hover {
    opacity: 0.75;
    transform: rotate(1440deg) scale(1.40) translate(150px, 0px);
}

.CSSeffectExpand150 {
transition: opacity 2s, transform 4s;
    opacity: 1.0;
}

.CSSeffectExpand150:hover {
    opacity: 0.85;
    transform: scale(1.50);
}



/* ============================================================ */
/* Scale down font for small screens                            */
/* ============================================================ */

@media only screen and (max-width: 768px) {
    body {
	width: 100vw;
    }
    .MainNavPanel A:link, .MainNavPanel A:visited,
    .SecondaryNavPanel A:link, .SecondaryNavPanel A:visited
    {
	letter-spacing:  0px;
	padding:         3px 10px; /* 4 12 */
    }
    img.TopImageEffect, img.headshot {
	border-radius:  10px;
	border:         0px solid #bbbbbb;
	padding:        0px;
	transition:     transform 2s;
    }
    .PageContent, .PageContentImage {
	padding-top:  24px;
    }
    .BannerName {  /* 1.75em */
	font-size: 26px;
    }
    .ClassTitleBanner, .ClassSemesterBanner { /* 1.375em | 22px */
	font-size: 18px;
    }
    .BannerAffiliation, .Name, .PageHeading, .ScheduleTitle { /* 1.25em */
	font-size: 18px;
    }
    .ScheduleHeading { /* 1.125em */
	font-size: 16px;
    }
    .COVID19     { font-size: 24px; }
    .COVID19deux { font-size: 24px; }
    .PageContent, .PageContentImage, .Address, .ContactInfo { /* 1em */
	font-size: 13px;
    }
    .FooterPanel {
	padding:   8px 0px 8px 0px; /* 14px 0px 14px 0px; */

    }
    button, body, .FooterPanel, .MainNavPanel,
    .SecondaryNavPanel, .figurecaption, .Schedule .date, .Schedule .topic,
    .ScheduleItem, .ScheduleWeek p  { /* 0.875em */ 
	font-size: 12px;
    }
    .IntraNavPanel {
	bottom:    44px;
	font-size: 10px;
    }
    .IntraNavPanel a {
	font-weight: normal;
    }
}

@media only screen and (max-width: 650px) {
    .MainNavPanel A:link, .MainNavPanel A:visited,
    .SecondaryNavPanel A:link, .SecondaryNavPanel A:visited
    {
	letter-spacing:  0px;
	padding:         2px 8px; /* 4 12 */
    }
    .BannerName {  /* 1.75em */
	font-size: 24px;
    }
    .ClassTitleBanner, .ClassSemesterBanner { /* 1.375em | 22px */
	font-size: 16px;
    }
    .BannerAffiliation, .Name, .PageHeading, .ScheduleTitle { /* 1.25em */
	font-size: 16px;
    }
    .ScheduleHeading { /* 1.125em */
	font-size: 14px;
    }
    .COVID19     { font-size: 20px; }
    .COVID19deux { font-size: 20px; }
    .PageContent, .PageContentImage, .Address, .ContactInfo { /* 1em */
	font-size: 12px;
    }
    .FooterPanel {
	padding:   8px 0px 8px 0px;
    }
    button, body, .FooterPanel, .IntraNavPanel, .MainNavPanel,
    .SecondaryNavPanel, .figurecaption, .Schedule .date, .Schedule .topic,
    .ScheduleItem, .ScheduleWeek p { /* 0.875em */ 
	font-size: 10px;
    }
    .IntraNavPanel {
	bottom: 28px;
    }
    .IntraNavPanel a {
	font-weight: normal;
    }
}

@media only screen and (max-width: 550px) {
    .MainNavPanel A:link, .MainNavPanel A:visited,
    .SecondaryNavPanel A:link, .SecondaryNavPanel A:visited
    {
	letter-spacing:  0px;
	padding:         2px 6px; /* 4 12 */
    }
    .BannerName {  /* 1.75em */
	font-size: 22px;
    }
    .ClassTitleBanner, .ClassSemesterBanner { /* 1.375em | 22px */
	font-size: 14px;
    }
    .BannerAffiliation, .Name, .PageHeading, .ScheduleTitle { /* 1.25em */
	font-size: 14px;
    }
    .ScheduleHeading { /* 1.125em */
	font-size: 13px;
    }
    .COVID19     { font-size: 16px; }
    .COVID19deux { font-size: 16px; }
    .PageContent, .PageContentImage, .Address, .ContactInfo { /* 1em */
	font-size: 11px;
    }
    .FooterPanel {
	padding:   8px 0px 8px 0px;
    }
    button, body, .FooterPanel, .IntraNavPanel, .MainNavPanel,
    .SecondaryNavPanel, .figurecaption, .Schedule .date, .Schedule .topic,
    .ScheduleItem, .ScheduleWeek p  { /* 0.875em */ 
	font-size: 9px;
    }
    .IntraNavPanel {
	bottom: 28px;
    }
    .IntraNavPanel a {
	font-weight: normal;
    }
}

/* Multiplied by 1.5x and gott rid of 150% scaling at 480px */
@media only screen and (max-width: 450px) {
    .MainNavPanel A:link, .MainNavPanel A:visited,
    .SecondaryNavPanel A:link, .SecondaryNavPanel A:visited
    {
	letter-spacing:  0px;
	padding:         2px 6px; /* 4 12 */
    }
    .BannerName {  /* 1.75em */
	font-size: 16px;
    }
    .ClassTitleBanner, .ClassSemesterBanner { /* 1.375em | 22px */
	font-size: 15px; /* 10px */
    }
    .BannerAffiliation, .Name, .PageHeading, .ScheduleTitle { /* 1.25em */
	font-size: 15px; /* 10px */
    }
    .ScheduleHeading { /* 1.125em */
	font-size: 14px; /* 9px */
    }
    .COVID19, .COVID19deux { font-size: 14px; }
    .PageContent, .PageContentImage, .Address, .ContactInfo { /* 1em */
	font-size: 14px; /* 9x */
    }
    .FooterPanel {
	padding:   8px 0px 8px 0px;
    }
    button, body, .FooterPanel, .MainNavPanel,
    .SecondaryNavPanel, .figurecaption, .Schedule .date, .Schedule .topic,
    .ScheduleItem, .ScheduleWeek p  { /* 0.875em */ 
	font-size: 11px; /* 8px */
    }
    .IntraNavPanel {
	font-size:      9px; /* 6px */
	bottom:         36px;
	letter-spacing: 0px;
    }
    .IntraNavPanel a {
	font-weight: normal;
    }
    .fillsmall { width: 100%; }
    .w02m { width:  100%; }
    .w08m { width:  calc(50% - 18px); }
    .w16m { width:  100%; }
}

/* === Size Reference === */
/*     1.750em   28px     */ 
/*     1.625em   26px     */
/*     1.500em   24px     */
/*     1.375em   22px     */
/*     1.250em   20px     */
/*     1.125em   18px     */
/*     1.000em   16px     */
/*     0.875em   14px     */
/*     0.750em   12px     */
/*     0.625em   10px     */
/*     0.500em    8px     */
/* ====================== */


/* Pills ============================================================ */
.pill {
    padding-left:  0;
    display:       inline-block;
    margin:        0;
    list-style:    none;
    border-radius: 1em;
    border:        1px solid rgba(0,0,0,0.25);
    box-shadow:    0 1px 0 #fff
}
.pill>li {
    float:         left;
    padding:       0 10px 4px;
    border-right:  solid 1px rgba(0,0,0,0.25);
    font-size:     14px;
    font-size:     0.875rem
}
.pill>li:first-child {
    padding-left:  10px;
    border-radius: 1em 0 0 1em;
}
.pill>li:last-child {
    padding-right: 10px;
    border-right:  none;
    border-radius: 0 1em 1em 0;
}
/* "Pills" ============================================================ /*