:root {
  --red: rgb(198, 50, 37); /* or #C63225 */
  --blue: rgb(31, 46, 122);
  --la90: rgb(235, 233, 224);
  --la95: rgb(245, 244, 239);
  --la95-highlighted: rgba(232, 231, 227, 0.8);
  --black: rgb(13, 13, 13);
  --la-dark: rgb(158, 156, 147);
  --text-lighter: rgb(135, 135, 135);
  --text-silver: rgb(128, 128, 128);
  --text-black-light: rgb(96, 96, 96);
  --text-black: rgb(64, 64, 64);
  --text-strong: rgb(24, 24, 24);
  --media-link: rgb(105, 105, 105);
  --text-figure-source: rgb(155, 155, 155);
  --full-publications-link: rgb(112, 112, 112);
  --column-separator: transparent;
  --news-separator: rgb(224, 224, 227);
  --side-note-separator: rgb(224, 224, 247);

  --footer-background: rgb(52, 52, 52);
  --footer-foreground:          rgb(210, 210, 210);
  --footer-foreground-brighter: rgb(250, 250, 250);
  --footer-foreground-darker:   rgb(180, 180, 180);

  --content-width: 1280px;
  --window-left-spacing: 36px;

  --navbar-height: 51px;
  --navbar-border-color: rgb(215, 215, 215);
  --navbar-border-width: 6px;
  --navbar-item-stretch: 6px;

  --triple-columns-spacing: 2px;
  --triple-columns-padding: 13.5px;
  --triple-columns-title-height: 25px;
  --triple-columns-title-font-size: 20px;

  --content-title-border-width: 6px;

  --thumbnail-size: 56px;
  --news-thumbnail-size: 63px;
  --news-item-spacing: 8px;
  --publication-item-spacing: 9px;

  --text-font-size:         17.5px;
  --text-line-height:       calc(var(--text-font-size) * 1.50);
  --text-paragraph-spacing: calc(var(--text-font-size) * 1.70);

  --figure-source-font-size: 13px;

  --sans-fonts: '--sans', -apple-system, Roboto, Lato, Helvetica, Arial, sans-serif;
  --serif-fonts: '--serif', 'PT Serif', EB Garamond, Crimson Text, Times, Georgia, serif;

  --emphasized-link-font-size:   12px;
  --emphasized-link-line-height: 15px;
  --emphasized-link-arrow-factor: 1.25;

  --slide-title-border-width: 7px;

  --footer-column-spacing: 48px;

  --column-border-radius: 7px;

  --full-spacing-top: 5px;
  --full-spacing-bottom: 15px;
  --full-text-shadow-color-h1: rgba(0, 0, 0, 0.70);
  --full-text-shadow-color-h2: rgba(0, 0, 0, 0.60);

  --full-bright-text-shadow-color-h1: rgba(0, 0, 0, 0.32);
  --full-bright-text-shadow-color-h2: rgba(0, 0, 0, 0.32);

  --full-text-shadow-color-h1: rgba(0, 0, 0, 0.70);
  --full-text-shadow-color-h2: rgba(0, 0, 0, 0.60);

  --full-la-text-shadow-color-h1: rgba(63, 59, 54, 0.90);
  --full-la-text-shadow-color-h2: rgba(63, 59, 54, 0.80);

  --backdrop-radius: 6px;
}

@font-face {
  font-family: '--sans';
  font-weight: 300;
  src: url('fonts/econsans-primary-subset-li.ttf') format('truetype');
}

@font-face {
  font-family: '--sans';
  font-weight: 400;
  src: url('fonts/econsans-primary-subset-rg.ttf') format('truetype');
}

@font-face {
  font-family: '--sans';
  font-weight: 500;
  src: url('fonts/econsans-primary-subset-md.ttf') format('truetype');
}

@font-face {
  font-family: '--sans';
  font-weight: 700;
  src: url('fonts/econsans-primary-subset-bd.ttf') format('truetype');
}

@font-face {
  font-family: '--sans';
  font-weight: 800;
  src: url('fonts/econsans-primary-subset-xbd.ttf') format('truetype');
}

@font-face {
  font-family: '--serif';
  font-weight: 400;
  src: url('fonts/milo-primary-subset-rg.ttf') format('truetype');
}

@font-face {
  font-family: '--serif';
  font-weight: 400;
  font-style: italic;
  src: url('fonts/milo-primary-subset-rg-it.ttf') format('truetype');
}

@font-face {
  font-family: '--serif';
  font-weight: 500;
  src: url('fonts/milo-primary-subset-md.ttf') format('truetype');
}

@font-face {
  font-family: '--serif';
  font-weight: 700;
  src: url('fonts/milo-primary-subset-bd.ttf') format('truetype');
}

@font-face {
  font-style: italic;
  font-family: '--serif';
  font-weight: 700;
  src: url('fonts/milo-primary-subset-bd-it.ttf') format('truetype');
}

body {
  margin: 0;
}

body.no-scroll {
  overflow: hidden;
}

#root {
  width: 100%;
  position: relative;
  font-family: var(--serif-fonts);
  color: var(--black);
}

#navbar {
  position: fixed;
  z-index: 200;
  width: 100%;
  top: 0px;
  height: var(--navbar-height);
  border-bottom: 1px solid var(--navbar-border-color);

  font-family: var(--sans-fonts);
  line-height: var(--navbar-height);

  background: white;
  box-shadow: 0px 2px 30px 1px rgba(96,96,96,0.08), 
              0px 0px 10px 0px rgba(96,96,96,0.06);
}

#navbar-items li a {
  font-size: 18px;
}

#navbar-content {
  width: var(--content-width);
  height: var(--navbar-height);
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#navbar-before {
  position: absolute;
  left: 0;
  height: var(--navbar-height);
  z-index: 200;
}

#logo-container {
  display: table;
  height: var(--navbar-height);
}

#logo-container a {
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
  padding-left: var(--window-left-spacing);
}

#logo {
  width: 90px;
  height: 16px;
  margin-top: 3px;
  border:  0 !important;
  outline: none !important;
  border-style: none !important;
  background-repeat: no-repeat !important;

  /*
  (Note) paste from svg
  1) Replace all " -> '
  2) Escape # -> %23
  3) <path -> <path shape-rendering='geometricPrecision'
  */
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292.61 51.91'><defs><style>svg{stroke:transparent;stroke-width:0px;}.cls-1{fill:%23191919;stroke-width:0px;}</style></defs><path shape-rendering='geometricPrecision' class='cls-1' d='m27.72,35.93c0,4.9-1.48,8.78-4.43,11.66-2.95,2.88-6.8,4.32-11.56,4.32s-8.66-1.54-11.74-4.61l3.67-3.67c2.26,2.26,4.94,3.38,8.06,3.38,3.36,0,5.95-1.02,7.78-3.06,1.82-2.04,2.74-4.96,2.74-8.75V.22h5.47v35.71Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m44.21,5.98h-5.83V.14h5.83v5.83Zm-.36,45.5h-5.18V16.06h5.18v35.42Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m80.06,51.48h-5.18v-3.38c-2.54,2.54-5.95,3.82-10.22,3.82-4.56,0-7.9-1.08-10.01-3.24-1.78-1.82-2.66-4.22-2.66-7.2,0-3.17,1.07-5.66,3.2-7.49,2.13-1.82,5.15-2.74,9.04-2.74h10.66v-3.38c0-5.18-3.02-7.78-9.07-7.78-4.03,0-7.01,1.34-8.93,4.03l-3.53-3.24c1.54-1.97,3.31-3.36,5.33-4.18,1.82-.72,4.22-1.08,7.2-1.08,9.46,0,14.18,3.94,14.18,11.81v24.05Zm-5.18-12.53v-3.82h-9.94c-5.28,0-7.92,2.09-7.92,6.26s2.71,6.05,8.14,6.05c3.65,0,6.29-.79,7.92-2.38,1.2-1.15,1.8-3.19,1.8-6.12Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m118.29,51.48h-5.18v-21.89c0-6.24-2.88-9.36-8.64-9.36-2.74,0-4.9.8-6.48,2.41-1.58,1.61-2.38,3.92-2.38,6.95v21.89h-5.18V.22h5.18v19.73c2.54-2.88,5.86-4.32,9.94-4.32s7.1,1.18,9.36,3.53c2.26,2.35,3.38,5.54,3.38,9.58v22.75Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m155.88,35.14h-23.9c0,3.87.9,6.86,2.7,8.98,1.8,2.12,4.38,3.19,7.74,3.19s6.6-1.32,9.29-3.96l3.53,3.1c-1.92,1.92-3.77,3.29-5.55,4.1-2.06.91-4.54,1.37-7.42,1.37-4.85,0-8.59-1.46-11.23-4.39-2.83-3.07-4.25-7.66-4.25-13.75,0-5.71,1.29-10.16,3.89-13.36,2.59-3.19,6.14-4.79,10.66-4.79s8.12,1.54,10.69,4.61c2.57,3.07,3.85,7.25,3.85,12.53v2.38Zm-5.18-3.89c-.14-2.5-.51-4.46-1.08-5.9-1.49-3.55-4.25-5.33-8.28-5.33s-6.79,1.78-8.28,5.33c-.58,1.44-.94,3.41-1.08,5.9h18.72Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m204.13,51.48h-33.26V.22h10.01v42.34h23.26v8.93Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m218.46,7.63h-9.43V0h9.43v7.63Zm0,43.85h-9.43V13.97h9.43v37.51Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m254.89,51.48h-9.14v-3.24c-2.4,2.4-5.47,3.6-9.22,3.6-4.22,0-7.39-1.08-9.5-3.24-2.11-2.16-3.17-4.99-3.17-8.5,0-3.17,1.09-5.77,3.26-7.81,2.18-2.04,5.35-3.06,9.51-3.06h8.83v-1.87c0-3.94-2.32-5.9-6.96-5.9-3.01,0-5.4,1.03-7.17,3.1l-5.96-5.83c1.78-1.97,3.72-3.34,5.83-4.1,1.92-.72,4.49-1.08,7.7-1.08,10.66,0,15.98,4.42,15.98,13.25v24.7Zm-9.43-13.82v-2.02h-7.37c-3.48,0-5.23,1.42-5.23,4.25s1.79,4.32,5.37,4.32c3.2,0,5.32-.79,6.37-2.38.57-.86.86-2.26.86-4.18Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m292.61,32.69c0,3.6-.29,6.46-.86,8.57-.62,2.35-1.75,4.37-3.38,6.05-2.93,3.07-6.82,4.61-11.66,4.61s-8.67-1.54-11.59-4.61c-1.63-1.68-2.76-3.7-3.38-6.05-.58-2.11-.86-4.97-.86-8.57,0-6.72,1.44-11.59,4.32-14.62,2.88-3.02,6.72-4.54,11.52-4.54s8.71,1.51,11.59,4.54c2.88,3.02,4.32,7.9,4.32,14.62Zm-9.43,0c0-4.61-.71-7.63-2.14-9.07-1.09-1.1-2.54-1.66-4.34-1.66s-3.18.55-4.27,1.66c-1.42,1.44-2.14,4.46-2.14,9.07s.71,7.7,2.14,9.14c1.09,1.1,2.52,1.66,4.27,1.66s3.25-.55,4.34-1.66c1.42-1.44,2.14-4.49,2.14-9.14Z'/></svg>");

}

#logo-container a:hover #logo,
#logo-container a:active #logo {

  /* Change .cls-1{fill} */
  background-image: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 292.61 51.91'><defs><style>svg{stroke:transparent;stroke-width:0px;}.cls-1{fill:%23C63225;stroke-width:0px;}</style></defs><path shape-rendering='geometricPrecision' class='cls-1' d='m27.72,35.93c0,4.9-1.48,8.78-4.43,11.66-2.95,2.88-6.8,4.32-11.56,4.32s-8.66-1.54-11.74-4.61l3.67-3.67c2.26,2.26,4.94,3.38,8.06,3.38,3.36,0,5.95-1.02,7.78-3.06,1.82-2.04,2.74-4.96,2.74-8.75V.22h5.47v35.71Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m44.21,5.98h-5.83V.14h5.83v5.83Zm-.36,45.5h-5.18V16.06h5.18v35.42Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m80.06,51.48h-5.18v-3.38c-2.54,2.54-5.95,3.82-10.22,3.82-4.56,0-7.9-1.08-10.01-3.24-1.78-1.82-2.66-4.22-2.66-7.2,0-3.17,1.07-5.66,3.2-7.49,2.13-1.82,5.15-2.74,9.04-2.74h10.66v-3.38c0-5.18-3.02-7.78-9.07-7.78-4.03,0-7.01,1.34-8.93,4.03l-3.53-3.24c1.54-1.97,3.31-3.36,5.33-4.18,1.82-.72,4.22-1.08,7.2-1.08,9.46,0,14.18,3.94,14.18,11.81v24.05Zm-5.18-12.53v-3.82h-9.94c-5.28,0-7.92,2.09-7.92,6.26s2.71,6.05,8.14,6.05c3.65,0,6.29-.79,7.92-2.38,1.2-1.15,1.8-3.19,1.8-6.12Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m118.29,51.48h-5.18v-21.89c0-6.24-2.88-9.36-8.64-9.36-2.74,0-4.9.8-6.48,2.41-1.58,1.61-2.38,3.92-2.38,6.95v21.89h-5.18V.22h5.18v19.73c2.54-2.88,5.86-4.32,9.94-4.32s7.1,1.18,9.36,3.53c2.26,2.35,3.38,5.54,3.38,9.58v22.75Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m155.88,35.14h-23.9c0,3.87.9,6.86,2.7,8.98,1.8,2.12,4.38,3.19,7.74,3.19s6.6-1.32,9.29-3.96l3.53,3.1c-1.92,1.92-3.77,3.29-5.55,4.1-2.06.91-4.54,1.37-7.42,1.37-4.85,0-8.59-1.46-11.23-4.39-2.83-3.07-4.25-7.66-4.25-13.75,0-5.71,1.29-10.16,3.89-13.36,2.59-3.19,6.14-4.79,10.66-4.79s8.12,1.54,10.69,4.61c2.57,3.07,3.85,7.25,3.85,12.53v2.38Zm-5.18-3.89c-.14-2.5-.51-4.46-1.08-5.9-1.49-3.55-4.25-5.33-8.28-5.33s-6.79,1.78-8.28,5.33c-.58,1.44-.94,3.41-1.08,5.9h18.72Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m204.13,51.48h-33.26V.22h10.01v42.34h23.26v8.93Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m218.46,7.63h-9.43V0h9.43v7.63Zm0,43.85h-9.43V13.97h9.43v37.51Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m254.89,51.48h-9.14v-3.24c-2.4,2.4-5.47,3.6-9.22,3.6-4.22,0-7.39-1.08-9.5-3.24-2.11-2.16-3.17-4.99-3.17-8.5,0-3.17,1.09-5.77,3.26-7.81,2.18-2.04,5.35-3.06,9.51-3.06h8.83v-1.87c0-3.94-2.32-5.9-6.96-5.9-3.01,0-5.4,1.03-7.17,3.1l-5.96-5.83c1.78-1.97,3.72-3.34,5.83-4.1,1.92-.72,4.49-1.08,7.7-1.08,10.66,0,15.98,4.42,15.98,13.25v24.7Zm-9.43-13.82v-2.02h-7.37c-3.48,0-5.23,1.42-5.23,4.25s1.79,4.32,5.37,4.32c3.2,0,5.32-.79,6.37-2.38.57-.86.86-2.26.86-4.18Z'/><path shape-rendering='geometricPrecision' class='cls-1' d='m292.61,32.69c0,3.6-.29,6.46-.86,8.57-.62,2.35-1.75,4.37-3.38,6.05-2.93,3.07-6.82,4.61-11.66,4.61s-8.67-1.54-11.59-4.61c-1.63-1.68-2.76-3.7-3.38-6.05-.58-2.11-.86-4.97-.86-8.57,0-6.72,1.44-11.59,4.32-14.62,2.88-3.02,6.72-4.54,11.52-4.54s8.71,1.51,11.59,4.54c2.88,3.02,4.32,7.9,4.32,14.62Zm-9.43,0c0-4.61-.71-7.63-2.14-9.07-1.09-1.1-2.54-1.66-4.34-1.66s-3.18.55-4.27,1.66c-1.42,1.44-2.14,4.46-2.14,9.07s.71,7.7,2.14,9.14c1.09,1.1,2.52,1.66,4.27,1.66s3.25-.55,4.34-1.66c1.42-1.44,2.14-4.49,2.14-9.14Z'/></svg>");
}

#navbar-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navbar-items>li {
  display: inline-block;
  margin-left:  8px;
  margin-right: 8px;
}

#navbar-items>li>a[href="#liquid-metals"] {
  width: calc(112px + var(--navbar-item-stretch));
}
#navbar-items>li>a[href="#actuators"] {
  width: calc(102px + var(--navbar-item-stretch));
}
#navbar-items>li>a[href="#robotic-materials"] {
  width: calc(145px + var(--navbar-item-stretch));
}
#navbar-items>li>a[href="#metastructures"] {
  width: calc(117px + var(--navbar-item-stretch));
}
#navbar-items>li>a[href="#neural-systems"] {
  width: calc(122px + var(--navbar-item-stretch));
}

#navbar-items>li>a {
  color: rgb(160, 160, 160);
  font-weight: 300;
  text-decoration: none;
  padding-left:  1px;
  padding-right: 1px;
  display: inline-block;
  height: calc(var(--navbar-height) - var(--navbar-border-width));
  text-align: center;
  letter-spacing: 0.2px;
}

#navbar-items>li>a.selected {
  color: rgb(0, 0, 0);
  font-weight: 700;
  letter-spacing: 0;
}

#navbar-items>li>a:hover:not(.selected) {
  color: rgb(50,50,50);
  font-weight: 700;
  letter-spacing: -0.2px;
}

#navbar-items>li>a.selected:after {
  content: "";
  display: block;
  width: calc(100% + 8px);
  transform: translateX(-4px);
  height: var(--navbar-border-width);
  background: var(--red);
  margin-top: calc(-1*var(--navbar-border-width));
  border-radius: var(--navbar-border-width) var(--navbar-border-width) 0px 0px;
}

.page {
  margin-top: calc(var(--navbar-height) - 18px);
}

.section {
  width: 100%;
}

.section-content,
.slide-content,
.footer-content {
  width: var(--content-width);
  position: relative;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 16px;
  padding-bottom: 2px;
}

#footer-column-research-areas:first-child {
  margin-left: calc(-1*var(--footer-column-spacing) + 20px);
}

.triple-columns,
.two-and-one-columns {
  width: 100%;
}

.triple-columns .column,
.two-and-one-columns .column-right,
.two-and-one-columns .column-left-middle,
.slide-double-columns .column {
  display: inline-block;
  vertical-align: top;
}

.triple-columns .column,
.two-and-one-columns .column-right {
  width: calc(33% + 1px) !important;
}

.triple-columns .column:nth-of-type(1) {
  width: calc(33% - 1px);
}

.triple-columns .column:nth-of-type(2) {
  width: calc(33% - 1px);
}

.triple-columns .column:nth-of-type(3) {
  width: calc(33% + 2px);
}

.two-and-one-columns .column:nth-of-type(1) {
}

.two-and-one-columns .column:nth-of-type(2) {
  margin-left: 6px;
  width: calc(50% - var(--triple-columns-spacing) - 2.5px);
  /*width: calc(33% + 2px);*/
}

.two-and-one-columns .column:nth-of-type(3) {
  width: calc(33% + 2px);
}


.two-and-one-columns .column-left-middle {
  width: calc(66% + var(--triple-columns-spacing));
}

.slide-double-columns .column {
  width: calc(50% - var(--triple-columns-spacing));
  padding: 0;
  margin-top: -10px;
}

.triple-columns .column .content,
.two-and-one-columns .column .content {
  width: calc(100% - var(--triple-columns-spacing) - var(--triple-columns-padding)*2);
  padding: var(--triple-columns-padding);
  border-radius: var(--column-border-radius);
}

.triple-columns .column:nth-of-type(2) {
  border-right: 1px solid var(--column-separator);
}

.triple-columns .column:nth-of-type(2) { 
  margin-left: 6px;
}


.triple-columns .column:nth-of-type(1) .content { 
  margin-left: 0; 
}
.triple-columns .column:nth-of-type(2) .content { 
  margin-left: calc(var(--triple-columns-spacing) / 2 + 2px);
}
.triple-columns .column:nth-of-type(3) .content { 
  margin-left: calc(var(--triple-columns-spacing) + 4px);
}

.slide-double-columns .column:nth-of-type(1) .content {
  margin-left: 0px;
}
.slide-double-columns .column:nth-of-type(2) .content {
  margin-left: 1px;
}



#research-content {
  background: none;
}

#about-content {
  background: none;
}

#about-content .content-list {
  margin-right: -2.5px;
}

#news-content,
.side-note-content {
  background-color: var(--la95);
}

#news-content {
  padding-bottom: 0px !important;
  margin-bottom: 24px;
}

.content-title-container {
  height: var(--triple-columns-title-height);
  margin-top: 5px;
  position: relative;
}

.triple-columns h2,
.two-and-one-columns h2 {
  font-family: var(--sans-fonts);
  height:      var(--triple-columns-title-height);
  line-height: var(--triple-columns-title-height);
  font-size: var(--triple-columns-title-font-size);
  font-weight: 700;
  margin: 0;
  display: inline-block;
  padding-top: calc(var(--triple-columns-title-height) - var(--triple-columns-title-font-size));
}

.content-title-floating-right {
  float: right;
}

#research-content h2:before,
#about-content h2:before,
#news-content h2:before,
.side-note-content h2:before {
  content: "";
  display: block;
  width: var(--content-title-border-width);
  height: calc(var(--triple-columns-title-height) - 1px);
  transform: translate(calc(-1*var(--triple-columns-padding)), -1px);
  background: var(--red);
  margin-top: calc(-1*var(--content-title-border-width));
  margin-bottom: calc(-1*var(--triple-columns-title-height));
  border-radius: 0px calc(var(--content-title-border-width)*0.6) calc(var(--content-title-border-width)*0.6) 0px;  
}

#research-content h2:before,
#about-content h2:before {
  border-radius: calc(var(--content-title-border-width)*0.6);
}

#research-content .content-title-container,
#about-content .content-title-container {
  margin-bottom: 8px;
}

#news-content .content-title-container,
.side-note-content .content-title-container {
  margin-bottom: -7px;
}

.content-list,
.slide-list,
.side-note-list {
  margin-left: 0px;
  padding-left: 0px;
  list-style: none;
  text-indent: -12px;
  margin-top: -6px;
}

.content-list li::before,
.slide-list li::before,
.side-note-list li::before {
  content: "\2022";
  color: var(--text-black);
  margin-left: -1.5px;
  padding-right: 7.5px;
  font-size: calc(var(--text-font-size)*1.2);
}

.side-note-list li::before {
  visibility: hidden;
}

.column .content p,
.content-list li,
.slide-list li,
#contact-info {
  color: var(--text-black);
  font-size:   var(--text-font-size);
  line-height: var(--text-line-height);
  margin-top:    calc(var(--text-paragraph-spacing)/2);
  /*margin-bottom: calc(var(--text-paragraph-spacing)/2);*/
}

.column .content p a,
.content-list li a,
.slide-list li a,
.side-note-list li a,
#contact-info a {
  color: var(--text-black);
  text-decoration-color: rgb(200, 200, 200);
  text-decoration-thickness: 1.5px;
}

.column .content p a:hover,
.column .content p a:hover strong,
.content-list li a:hover,
.content-list li a:hover strong,
.slide-list li a:hover,
.slide-list li a:hover strong,
.side-note-list li a:hover,
.side-note-list li a:hover strong,
#contact-info a:hover {
  color: var(--red) !important;
  text-decoration-color: var(--red) !important;
}

#about-portrait {
  width:  var(--thumbnail-size);
  height: var(--thumbnail-size);
  float: right;
  border-radius: 6px;
  margin-left: 7px;
  margin-top: 6px;
}

.news-list {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
  margin-left:   calc(-1*var(--triple-columns-padding));
  margin-right:  calc(-1*var(--triple-columns-padding));
}

.news-list li:after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--news-separator);
}

.news-list li:last-of-type:after {
  border-bottom: none !important;
}

.news-list li:first-of-type .news-list-item {
  margin-top: 15px;
}

.news-list li:last-of-type .news-list-item {
  border-radius: 0 0 var(--column-border-radius) var(--column-border-radius) !important;
}

.news-list-item:hover {
  background-color: var(--la95-highlighted);
}


.news-list-item .left {
  /*background: rgba(255, 0, 0, 0.1);*/
}

.news-list-item .right {
  /*background: rgba(0, 0, 255, 0.1);*/
}


.news-thumbnail-wrapper {
  width:  var(--news-thumbnail-size) !important;
  height: var(--news-thumbnail-size) !important;
  border-radius: 5px;
  margin-right:  -1px;
  margin-top: calc(var(--text-font-size) + 5px);
}

.news-thumbnail-image {
  width:  var(--news-thumbnail-size);
  height: var(--news-thumbnail-size);
  border-radius: 5px;
  cursor: pointer;
  margin-left: 2px;
}

/*
.news-description {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
*/

.news-date {
  font-family: var(--sans-fonts);
  color: var(--text-lighter);
  font-weight: 100;
  font-size: calc(var(--text-font-size)*0.8);
  font-height: calc(var(--text-font-size)*0.8);
  margin-bottom: 3px;
}

/*
.news-text {
  flex: 1;
}
*/




.news-list-item {
  padding-top:    var(--news-item-spacing);
  padding-bottom: var(--news-item-spacing);
}

.news-list-item.hovering {
  cursor: pointer;
}

.news-list-item .left,
.news-list-item .right {
  display: inline-block;
  vertical-align: top;
}

.news-list-item .left {
  width: calc(var(--content-width)/3 - var(--news-thumbnail-size) - 6px - var(--triple-columns-padding)*2);
  padding-left: var(--triple-columns-padding);
  padding-right: 3px;
}

.news-list-item .right {
  width: calc(var(--news-thumbnail-size) + var(--triple-columns-padding) - 15px);
  padding-right: calc(var(--triple-columns-padding) - 5px);
  /*background: var(--blue);*/
  min-height: var(--news-thumbnail-size);
}

.news-list-item .left-top {
}

.news-list-item .left-bottom {
  /*background: rgba(0, 255, 0, 0.1);*/
}









.news-text,
.side-note-text,
.side-note-list li {
  color: var(--text-black);
  font-size: calc(var(--text-font-size)*0.90);
  line-height: calc(var(--text-line-height)*0.85);
  font-family: var(--sans-fonts);
}

.side-note-list li {
  margin-top:    calc(var(--text-paragraph-spacing)/3);
  margin-bottom: calc(var(--text-paragraph-spacing)/3);
}

.side-note-list li:after {
  content: "";
  display: block;
  margin-top: calc(var(--text-paragraph-spacing)/3);
  border-bottom: 1px solid var(--news-separator);
}

.side-note-list li:last-of-type:after {
  border-bottom: none !important;
}



#about-content strong,
.news-text strong {
  color: var(--text-strong);
  font-weight: 600;
}

#about-content strong {
  font-style: italic;
  font-weight: 700 !important;
}


.news-text .journal-name {
  font-family: var(--serif-fonts);
  font-style: italic;
  font-weight: 400;
  color: black;
}

.mini-spacing {
  display: inline-block;
  width: 0px;
  height: 0px;
}

.no-wrap {
  white-space: nowrap;
}

.narrow-letter-spacing {
  letter-spacing: -0.1px;
}

.narrower-letter-spacing {
  letter-spacing: -0.2px;
}


.emphasized-link {
  text-decoration: none !important;
  z-index: 250;
  display: inline-block;
  color: rgba(100, 100, 100);
  border: 1px solid rgba(150, 150, 150);
  border-radius: 6px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13.5px;

  vertical-align: middle;
  line-height: calc(var(--emphasized-link-line-height) + 5px);
}

.emphasized-link,
.emphasized-link>* {
  cursor: pointer;
}

.emphasized-link>.label,
.emphasized-link>.arrow {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 1px;
}

.emphasized-link>.label {
  font-family: var(--sans-fonts);
  font-weight: 500;
  font-size:   var(--emphasized-link-font-size);
  line-height: var(--emphasized-link-line-height);
}

.emphasized-link>.arrow {
  height:      var(--emphasized-link-line-height);
  line-height: var(--emphasized-link-line-height);
  font-size: calc(var(--emphasized-link-font-size) * var(--emphasized-link-arrow-factor));
}

.emphasized-link>.arrow:after {
  content: '\2192';
  font-family: var(--sans-fonts);
}

.emphasized-link>.arrow.down:after {
  content: '\2193';
}

.google-scholar-container,
.contact-info-container,
.full-publications-container {
  height: var(--triple-columns-title-height);
  line-height: var(--triple-columns-title-height);
  display: inline-block;
  text-align: right;
  margin-left: 6px;
  padding-top: 1.5px;
}

.full-publications-container {
  margin-right: -2px;
}

.full-publications-container .emphasized-link {
  color: var(--full-publications-link) !important;
  border: 1px solid var(--full-publications-link) !important;
}

.full-publications-container .emphasized-link:hover {
  border: 1px solid var(--red) !important;
}

#view-full-link>.label:after {
  content: "View Full";
  cursor: pointer;
}

#google-scholar-link>.label:after {
  content: "Google Scholar";
  cursor: pointer;
}

#contact-info-link>.label:after {
  content: "Contact Info";
  cursor: pointer;
}

#full-publications-link>.label:after {
  content: "Full Publications";
  cursor: pointer;
}

.emphasized-link:hover,
.emphasized-link.hover {
  border-color: var(--red);
}

.emphasized-link:hover .label,
.emphasized-link:hover .arrow,
.emphasized-link.hover .label,
.emphasized-link.hover .arrow {
  color: var(--red);
}

#contact-info {
  display: none;
  background: var(--la95);
  border-radius: var(--column-border-radius);
  padding-left: var(--triple-columns-padding);
  padding-top: calc(0.5*var(--triple-columns-padding));
  padding-bottom: calc(0.5*var(--triple-columns-padding));
  margin-left: calc(-1*var(--triple-columns-padding));
  margin-bottom: 2px;
}

#contact-info b {
  font-weight: 600;
}

.clear-floating {
  *zoom: 1;
  clear: both;
}

.clear-floating:before,
.clear-floating:after {
  content: '';
  display: table;
}

.full {
  position: relative;
  width: 100%;
  height: 200px;
  margin-top: var(--full-spacing-top);
  margin-bottom: var(--full-spacing-bottom);
}

.full:first-of-type {
  margin-top: 0px !important;
}

#overview-section {
  height: min(min(max(40vw, 360px), 660px), 88vh);
  background: rgb(200, 200, 200);
}

#liquid-metals-section {
  height: min(min(max(40vw, 500px), 960px), 92vh);
  background: rgb(200, 200, 200);
}

#actuators-section {
  height: min(min(max(40vw, 400px), 720px), 85vh);
  background: rgb(200, 200, 200);

  box-shadow: 0px 2px 30px 1px rgba(96,96,96,0.10), 
              0px 0px 10px 0px rgba(96,96,96,0.12);
}

#robotic-materials-section {
  height: min(min(max(40vw, 400px), 640px), 85vh);
  background: rgb(200, 200, 200);
}

#metastructures-section {
  height: min(min(max(40vw, 425px), 560px), 75vh);
  background: rgb(29, 54, 113);
}

#neural-systems-section {
  height: min(min(max(40vw, 450px), 600px), 80vh);
  background: rgb(200, 200, 200);
}

.full .section-content {
  margin-top: 24px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.full .overlay {
  position: absolute;
  max-width: calc(75%);
  bottom: 16px;

  padding-left:  24px;
  padding-right: 24px;

  padding-top: 24px;
  padding-bottom: 24px;

  margin-left: calc(max(var(--window-left-spacing) - 5%, 10px));
  border-radius: 24px;

  color: white;
  

  text-shadow: 0px 0px 48px var(--full-text-shadow-color-h1), 
               0px 0px 16px var(--full-text-shadow-color-h1),
               0px 0px 8px  var(--full-text-shadow-color-h1);


  z-index: 180;
}


.full.bright .overlay {
  text-shadow: 0px 0px 48px var(--full-bright-text-shadow-color-h1), 
               0px 0px 16px var(--full-bright-text-shadow-color-h1),
               0px 0px 8px  var(--full-bright-text-shadow-color-h1);
}


.full.la .overlay {
  text-shadow: 0px 0px 48px var(--full-la-text-shadow-color-h1), 
               0px 0px 16px var(--full-la-text-shadow-color-h1),
               0px 0px 8px  var(--full-la-text-shadow-color-h1);
}


/*
.full .overlay,
.full .h2 {
  backface-visibility: hidden;
  transform: perspective(1px) translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased;
}
*/


@media (max-width: 1400px) {
  .full .overlay {
    margin-left: calc(max(var(--window-left-spacing) - 5%, 24px));
  }
}

.gradient-backdrop {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 150;
  opacity: 0.8;
}

.gradient-backdrop:hover {
  cursor: pointer;
}

#liquid-metals-section .gradient-backdrop {
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    transparent 60%, 
    rgba(25, 25, 25, 0.85) 95%
  );
  opacity: 0.90;
}


#actuators-section .gradient-backdrop {
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    transparent 60%, 
    rgba(50, 50, 50, 0.65) 90%
  );
  opacity: 0.80;
}


#robotic-materials-section .gradient-backdrop {
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    transparent 65%, 
    rgb(25, 25, 25) 95%
  );
  opacity: 0.90;
}


#metastructures-section .gradient-backdrop {
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    transparent 45%, 
    rgb(10, 37, 86) 85%
  );
  opacity: 0.95;
}


#neural-systems-section .gradient-backdrop {
  background: linear-gradient(
    180deg, 
    transparent 0%, 
    transparent 55%, 
    rgb(4, 5, 35) 95%
  );
  opacity: 0.90;
}


.full h1 {
  font-family: var(--sans-fonts);
  font-size:   30px;
  line-height: 35px;
  font-weight: 400;
  margin: 0;
  margin-bottom: 14px;
}

.full#overview-section h1 .and {
  font-family: var(--serif-fonts);
  font-size:   35px;
  line-height: 35px;
}

.full h1 b {
  font-size:   40px;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: +0.8;
}

.full.frontpage h1 {
  
}

.full h2 {
  font-family: var(--sans-fonts);
  font-size:   20px;
  line-height: 30px;
  font-weight: 100;
  margin: 0;

  
  text-shadow: 0px 0px 48px var(--full-text-shadow-color-h2), 
               0px 0px 24px var(--full-text-shadow-color-h2),
               0px 0px 6px  var(--full-text-shadow-color-h2);

}

.full.bright h2 {
  text-shadow: 0px 0px 48px var(--full-bright-text-shadow-color-h2), 
               0px 0px 24px var(--full-bright-text-shadow-color-h2),
               0px 0px 6px  var(--full-bright-text-shadow-color-h2);

}

.full.la h2 {
  text-shadow: 0px 0px 48px var(--full-la-text-shadow-color-h2), 
               0px 0px 24px var(--full-la-text-shadow-color-h2),
               0px 0px 6px  var(--full-la-text-shadow-color-h2);

}

.full .video-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

.full .video-container video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: max(min(100vh, 600px), 42vw);
  cursor: pointer;
  z-index: 150;
}

#metastructures-section video {
  margin-top: 9px;
}

.slide {
  padding-top: 16px;
  padding-bottom: 2px;
}

.slide-title {
  position: relative;
  margin-bottom: 5px;
  padding-right: 8px;
}

.slide-title>* {
  display: table !important;
}

.slide-title:before {
  content: "";
  display: block;
  position: absolute;
  float: left;
  width: var(--slide-title-border-width);
  height: 100%;
  background: var(--red);
  border-radius: calc(var(--slide-title-border-width)*0.6);
  margin-left: -1px;
}

.slide-title h1 {
  font-family: var(--sans-fonts);
  font-size:   24px;
  line-height: 28px;
  font-weight: 500;
  margin: 0;
  margin-top:    2px;
  margin-bottom: 2px;
  margin-left:   14px;
  padding-top:   2px;
  color: var(--text-strong);
}

.slide-title h1 b {
  font-weight: 800;
  color: var(--text-strong);
}

.slide-title h2 {
  font-size:   18px;
  line-height: 22px;
  font-weight: 200;
  margin: 0;
  margin-top:    2px;
  margin-bottom: 0px;
  margin-left:   14px;
  padding-top:    2px;
  padding-bottom: 1px;
  color: var(--text-black-light);
}



.two-and-one-columns .column-right .content {
  padding-bottom: 4px;
  margin-bottom: 24px;
}

.side-note-content .content-title-container {
  margin-bottom: 16px;
}

.side-note-list
.side-note-list>*
.no-bullets {
  list-style:      none !important;
  list-style-type: none !important;
}

.column-right .side-note-list b {
  color: var(--text-strong);
}




#liquid-metals,
#actuators,
#robotic-materials,
#metastructures,
#neural-systems {
  margin-top: calc(-1*var(--navbar-height) + 16px);
  margin-bottom: calc(var(--navbar-height));
}

#footer {
  background: var(--footer-background);
  width: 100%;
  padding-top: 18px;
  padding-bottom: 18px;
  position: relative;
  height: 220px;
}

.footer-column {
  display: block;
  vertical-align: top;
  padding-right: var(--footer-column-spacing);
  float: left;
}

.footer-content {
  color: var(--footer-foreground);
  font-family: var(--sans-fonts);
}

.footer-content ul {
  list-style-type: none !important;
  font-size: 16px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.footer-content li {
  line-height: 27px;
}

.footer-heading {
  color: var(--footer-foreground-brighter);
  margin-bottom: 8px;
  font-weight: 700;
}

.footer-content li a {
  color: var(--footer-foreground);
  text-decoration: none;
  z-index: 150;
}

.footer-content li a:hover {
  border-bottom: 1.5px solid var(--footer-foreground-darker);
}

#footer-column-right {
  float: right;
  padding-right: 0;
  padding-left: var(--footer-column-spacing);
  font-weight: 100;
  text-align: left;
}

/* Disable selection */
.emphasized-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: 0;
}

.triple-columns,
.two-and-one-columns,
#navbar-items {
  font-size: 0;
}

.journal-name {
  font-style: italic;
}

.journal-link {
  display: inline-block;
}

.journal-link-icon:before {
  content: "open_in_new";
}

.journal-link-icon {
  font-size: calc(var(--text-font-size)*0.90 + 1px) !important;
  line-height: calc(var(--text-line-height)*0.85) !important;
  margin-left: 0.5px;
  vertical-align: -2.5px;
}

.side-note-list a {
  text-decoration: none;
}

.side-note-list .journal-link-icon {
  margin-left: 9px;
}


/*
.news-list-item:hover {
  cursor: pointer;
}
*/


.news-list-item.hovering .journal-name,
.news-list-item.hovering .journal-link-icon,
.news-list-item .left-top:hover .journal-name,
.news-list-item .left-top:hover .journal-link-icon,
.related-publication .side-note-list li:hover .journal-link-icon {
  color: var(--red);
}

.media-coverage {
  font-family: var(--sans-fonts);
}

.news-list-item a {
  text-decoration: none !important;
}

.media-coverage,
.media-link a {
  color: var(--text-silver);
  font-weight: 100;
  margin-top: 3px;
  font-size: calc(var(--text-font-size)*0.8);
  line-height: calc(var(--text-line-height)*0.8);
}

.media-link {
  white-space: nowrap;
  padding-right: 5px;
}

.media-link a {
  font-weight: 500;
  color: var(--media-link);
}

.media-link:hover {
  cursor: pointer;
}

.media-coverage>* {
  display: inline-block;
}

.media-icon:before {
  content: "newsmode";
}

.archive-icon:before {
  content: "inventory_2";
}

.media-icon,
.archive-icon {
  /*margin-left: -18px;*/
  color: var(--text-lighter);
  font-size: calc(var(--text-font-size)*0.90 + 1px) !important;
  line-height: calc(var(--text-line-height)*0.7) !important;
  vertical-align: -3.5px;
}

.media-name {
  font-weight: 500;
  margin-left: 1px;
}

.media-link-icon:before {
  content: "open_in_new";
  color: rgb(--media-link);
}

.media-link-icon {
  font-size: calc(var(--text-font-size)*0.8 + 2px) !important;
  font-size: calc(var(--text-font-size)*0.7) !important;
  margin-left: -2px;
  vertical-align: -2.5px;
}

.media-link:hover .media-link-icon,
.media-link:hover a {
  color: var(--red) !important;
}

.research-vision-image-container {
  position: relative;
  width: 100%;
}

.research-vision-image {
  width: 104%;
  margin-left: -4%;
}

.research-vision-image:hover {
  cursor: pointer;
}

.play-button {
  width: 50px;
  height: 50px;
  z-index: 180;

  position: absolute;
  bottom: 30px;
  left: 16px;

  background: none;
  outline: none;
  border: none;

  cursor: pointer;

  opacity: 0.3;
}

.full:hover .play-button {
  opacity: 0.8;
}

.play-button-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
}

.play-button-content .material-icons {
  font-size: 42px;

  text-shadow: 0px 0px 48px var(--full-text-shadow-color-light), 
               0px 0px 12px var(--full-text-shadow-color-light);
}

/*
.play-button:hover .play-button-content .material-icons {
  font-size: 48px;
}
*/

.play-button.play .material-icons:after {
  content: "play_arrow";
}

.play-button.pause .material-icons:after {
  content: "pause";
}

@media (max-width: 1400px) {
  .play-button {
    left: 2px;
    width: 30px;
  }
  .play-button-content .material-icons {
    font-size: 30px;
  }
  .play-button:hover .play-button-content .material-icons {
    font-size: 36px;
  }
}

.video-source {
  z-index: 180;
  color: rgb(222, 227, 243);
  position: absolute;
  bottom: 16px;
  right: 16px;
  padding-right: 8px;
  font-size: 16px;
  font-family: var(--sans-fonts);
  text-shadow: 0px 0px 20px var(--full-text-shadow-color-light), 0px 0px 10px var(--full-text-shadow-color-light), 0px 0px 2px var(--full-text-shadow-color-light), 0px 0px 1px var(--full-text-shadow-color);
  font-weight: 100;
}


.empty {
  height: 64px;
}

.research-vision-full-container {
  position: fixed;
  z-index: 500;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  cursor: pointer;
}

.research-vision-full-image {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  cursor: default;
}

.segment {
  display: inline-block;
  color: var(--text-black);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: +0.5;
  font-size: calc(var(--text-font-size)*0.92);
  margin-left: 10px;
}

/*
.segment::first-letter {
  font-size: calc(var(--text-font-size)*1.10);
  letter-spacing: +1.0;
}
*/

.content i {
  color: var(--text-strong);
}

.content sup::before {
}

.content sup {
  vertical-align: top;
  position: relative;
  top: -7px;
}


.keyword-list {
  margin-bottom: 16px;
  line-height: 36px;
}


.keyword-list .keyword {
  white-space: nowrap;
  background: var(--la90);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-right: 3px;
  color: var(--text-black-light);
  font-size: calc(var(--text-font-size) * 0.85);
}


.slide-figure-list {
  height: 240px; /* to be specified in each list */
  margin-top: 14px;
  margin-bottom: 9px;
  overflow: hidden;
  padding-bottom: 0 !important;
}

.slide-figure {
  max-height: 100%;
}

.related-publication {
  padding-left: 0px !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important;
  width: calc(100% - var(--triple-columns-spacing)) !important;
}

.related-publication .content-title-container {
  margin-left: var(--triple-columns-padding) !important;
}

.related-publication .side-note-list li {
  padding-left:  var(--triple-columns-padding) !important;
  padding-right: var(--triple-columns-padding) !important;

  margin-top:    0 !important;
  margin-bottom: 0 !important;

  padding-top:    var(--publication-item-spacing) !important;
  padding-bottom: var(--publication-item-spacing) !important;

  border-bottom: 1px solid var(--news-separator) !important;
}

.related-publication .side-note-list li:after {
  margin-top: 0 !important;
}

.related-publication .side-note-list a:last-of-type li {
  border-bottom: none !important;
  padding-bottom: var(--publication-item-spacing) !important;
  border-radius: 0 0 var(--column-border-radius) var(--column-border-radius);
}

.related-publication .side-note-list li:hover {
  background-color: var(--la95-highlighted);
}

.related-publication .side-note-list li .journal-name {
  font-family: var(--serif-fonts);
}

.slide-figure-source,
.video-source {
  height: var(--figure-source-font-size);
  font-size: var(--figure-source-font-size);
  color: var(--text-figure-source);
  margin-top: -2px;
  margin-bottom: 4px;
  padding-left:  24px;
  padding-right: 24px;
  text-align: right;
  font-family: var(--sans-fonts);
  font-weight: 300;
}

.video-source {
  bottom: -22px;
  padding-right: 0px;
}

.video-source .journal-name {
.slide-figure-source .journal-name {
  font-family: var(--serif-fonts);
}