:root {
  --stark-text-color: black;
  --dark-text-color: #212329;
  --main-text-color: #434547;
  --secondary-text-color: #878F99;
  --main-bg-color: white;
  --secondary-bg-color: #EEEEEE;

  --main-accent-color: #F7C409;
  --main-accent-opposing-color: #434547;

  --line-light-color: #878F9950;
  --line-dark-color: #43454750;

  --callout-bg-color: #878F9920;

  --light-text-color: #A1A2A3;
  --medium-text-color: #545455;
  --superlight-bg-color: #F5F5F5;
  --light-bg-color: #D8D8D8;
}

body {
  margin: 0;
  padding: 0;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;

  background: var(--main-bg-color);
  color: var(--main-text-color);

  transition: all 1s ease;
}

h1, h2 {
  margin: 0;
  padding: 0;

  margin-bottom: 12px;

  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 32px;
}

h2:not(.primary) {
  margin: 0;
  padding: 0;

  margin-bottom: 8px;

  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  letter-spacing: -1px;
}

h2.subtitle {
  color: var(--secondary-text-color);
  font-size: 15px;
  letter-spacing: normal;
}

h3, h4, h5, h6 {
  margin: 0;
  padding: 0;

  margin-bottom: 4px;

  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

p, .p,
ul {
  margin: 0;
  padding: 0;

  margin-bottom: 6px;

  font-size: 14px;
  font-weight: 400;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

p a,
ul a,
ol a {
  text-decoration: underline;
  transition: all 0.15s ease;
}

p a:hover,
ul a:hover,
ol a:hover {
  text-decoration: underline;
  background: var(--main-accent-color);
  color: var(--main-accent-opposing-color);
  border-radius: 3px;
}

pre,
code {
  background: var(--superlight-bg-color);
  border-radius: 3px;
}

hr {
  border: none;
  border-top: 1px solid var(--line-light-color);
}

hr.dotted {
  border-top: 1px dotted var(--line-light-color);
}

hr.noMargin {
  margin: 0;
}

/* blockquote {
  border-left: 10px solid var(--main-accent-color);
  padding-left: 20px;
} */

blockquote {
  border-left: 10px solid var(--main-accent-color);
  padding-left: 20px;
  font-style: italic;
}

@media (max-width: 799px) {
  img {
    max-width: 100%;
  }
}

/* input[type=text]:focus, input[type=email]:focus {
  outline: 3px solid var(--main-accent-color);
} */

::-moz-selection { /* Code for Firefox */
  /* color: white; */
  background: var(--main-accent-color);
}

::selection {
  /* color: red; */
  background: var(--main-accent-color);
}

/* Standard */

.mono {
  font-family: 'Unica One', 'Courier New', Courier, monospace;
  font-weight: normal;
}

.sans {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.serif {
  font-family: 'Newsreader', serif;
}

.center {
  text-align: center;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 15px;
}

.container-full {
  padding: 0 15px;
}

.container-small {
  max-width: 710px;
  margin: 0 auto;
  padding: 0 15px;
}

.desktop {
  display: none;
}

@media (min-width: 600px) {
  .container {
    padding: 0 50px;
  }

  .container-full {
    padding: 0 50px;
  }

  .container-small {
    padding: 0 50px;
  }
}

@media (min-width: 800px) {
  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }

  .desktop.inline {
    display: inline;
  }

  .row {
    display: flex;
  }

  .row.align-center {
    align-items: center;
  }

  .wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .order1 { order: 1; }
  .order2 { order: 2; }
  .order3 { order: 3; }
  .order4 { order: 4; }
  .order5 { order: 5; }

  .row .column {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .row .column.col-equal {
    flex: 1 1 0px;
  }

  .row .column.col-double {
    flex: 2 1 0px;
  }

  .row .column.col-small {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0;
  }

  .row .column.rightborder {
    border-right: 1px solid var(--line-light-color);
    padding-right: 45px;
    margin-right: 45px;
  }

  .row .column.col-logo {
    width: 320px;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .row .column.col-info {
    flex: 1 1 0px;
    flex-basis: 310px;
    /* width: 300px; */
    /* flex-shrink: 0; */
    /* flex-grow: 0; */
  }

  .row .column.col-info-double {
    flex: 1 1 0px;
    flex-basis: 642px;

    column-count: 2;
    column-gap: 40px;
  }

  .row .column.col-links {
    flex: 1 1 0px;
    flex-basis: 300px;
    /* flex-shrink: 1; */
    /* flex-grow: 1; */
  }

  .row .column.col-products {
    flex-basis: 250px;
    /* width: 250px;
    flex-shrink: 0;
    flex-grow: 0; */
  }

  .row .column.article-text, .row .column.thinking-text {
    flex-basis: 800px;
  }

  .row .column.article-links {
    flex-basis: 300px;
  }

  .freeColumn {
    max-width: 640px;
    margin: 0 auto;
  }
}

@media (min-width: 1000px) {
  .row .column.col-logo {
    width: 328px;
    /* width: 380 */
  }
}

.columnSpacer {
  width: 20px;
  height: 20px;
  flex-grow: 0;
  flex-shrink: 0;
}

h1.big {
  font-size: 46px;
  letter-spacing: -2px;
  line-height: 46px;
  margin-bottom: 20px;
}

h1.huge {
  font-family: 'Unica One', 'Courier New', Courier, monospace;
  font-weight: normal;
  font-size: 100px;
  letter-spacing: -2px;
  line-height: 100px;
}

h2.bigsubheader {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 60px;
}

h2.bigpreheader {
  font-size: 14px;
  color: var(--main-accent-color);
  letter-spacing: 3.5px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (min-width: 800px) {
  h1.big {
    font-size: 56px;
    letter-spacing: -2px;
    line-height: 56px;
    margin-bottom: 20px;
  }
}

@media (min-width: 800px) {
  h1.huge {
    font-size: 263px;
    line-height: 263px;
    letter-spacing: -12px;
  }
}

p.big {
  font-size: 16px;
}

p.small {
  font-size: 12px;
}

p.muted,
a.muted,
span.muted {
  color: var(--secondary-text-color);
}

p.caption {
  font-size: 11px;
  color: var(--secondary-text-color);
}

p.strong,
a.strong {
  font-weight: 700;
}

p.noMargin {
  margin: 0;
}

p.smallMargin {
  margin-bottom: 2px;
}

.right {
  text-align: right;
}

.sep5h {
  height: 5px;
}

.sep10h {
  height: 10px;
}

.sep15h {
  height: 15px;
}

.sep20h {
  height: 20px;
}

.sep45h {
  height: 30px;
}

.sep75h {
  height: 40px;
}

@media (min-width: 800px) {
  .sep45h {
    height: 45px;
  }

  .sep75h {
    height: 75px;
  }
}

.show900 {
  display: none;
}

@media (max-width: 899px) {
  .hide900 {
    display: none;
  }

  .show900 {
    display: block;
  }
}

/* a.linkblock {
  display: block;

  border-radius: 8px;
  transition: all 0.25s ease;

  padding: 12px 20px;
  margin: -12px -20px;
}

a.linkblock:hover {
  background-color: var(--callout-bg-color);
} */

.linkblock.disabled,
.linkblock.disabled > .linkRow {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

svg.svg-fill-light {
  fill: var(--secondary-text-color);
}

div.callout {
  padding: 15px 30px;
  background: var(--callout-bg-color);
  border-radius: 8px;
}

div.callout:not(.content) {
  font-size: 14px;
  color: var(--secondary-text-color);

  text-align: center;
}

div.callout.slim {
  padding: 10px 13px;
  font-size: 12px;
  text-align: left;
}

.linkcloud span {
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}

/* Specific */

/* SVG symbols */

/* Changes must be made on the .class element using vars; */
/* Plugging those vars in must be made on the #id symbol */

.linkArrow {
  width: 16px;
  height: 16px;
  margin-top: 2px;

  --circle-stroke-color: var(--main-accent-color);
  --arrow-stroke-color: var(--main-accent-color);

  --fill-color: transparent;
  /* var(--main-bg-color); */

  transition: all 0.25s ease;
}

.vcenter .linkArrow {
  margin-top: 0;
}

.linkArrow.down {
  transform: rotate(90deg);
  position: relative;
  top: 0;
}

a:not(.disabled):hover .linkArrow,
.linkArrow.active {
  --arrow-stroke-color: var(--main-bg-color);
  --fill-color: var(--main-accent-color);

  margin-left: 3px;
}

.linkArrow.active {
  margin-left: 0;
}

a:not(.disabled):hover .linkArrow.down {
  margin-left: 0;
  top: 3px;
}

#linkArrow .circle {
  stroke: var(--circle-stroke-color);
  fill: var(--fill-color);
}

#linkArrow .line {
  stroke: var(--arrow-stroke-color);
}

a:hover .linkArrow {
  stroke: var(--main-accent-color);
  fill: var(--main-accent-color);
}


/* FOOTER */

#footer {
  text-align: center;
}

#footer p.small {
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

#footerLinks span {
  margin-left: 3px;
  margin-right: 3px;
}

#footer p {
  margin-bottom: 20px;
}

#footer img {
  margin-top: 10px;
  margin-bottom: 40px;
}

#footer #initials {
  opacity: 0.5;
  margin-top: 20px;
  margin-bottom: 50px;

  transition: all 0.25s ease;
}

#footer a:hover #initials .svg-fill-light {
  transition: all 0.25s ease;
}

#footer a:hover #initials {
  opacity: 1;
}

#footer a:hover #initials .svg-fill-light {
  fill: var(--main-accent-color);
}

/* HEADER */

#homeHeader {

}

#subpageHeader {

}

#subpageHeader h1 {
  margin: 0;
  font-size: 21px;
  color: var(--secondary-text-color);
}

#subpageHeader a:hover h1 {
  color: var(--main-accent-color);
}

#subpageHeader .p {
  margin: 0;
}

#headerLinks a {
  margin-right: 10px;

  color: var(--secondary-text-color);
  font-weight: 700;
  font-size: 12px;

  transition: all 0.25s ease;
}

#headerLinks a:hover {
  color: var(--main-accent-color);
}

#bio {
  padding-top: 8px;
  margin-bottom: 22px;
}

#bio p.strong {
  margin-bottom: 10px;
}

/* #bio a {
  background-color: var(--main-accent-color);
} */

#newsletter form {
  display: block;
  align-items: baseline;
}

@media (min-width: 900px) {
  #newsletter form.oneline {
    display: flex;
  }

  #newsletter form.oneline input[type=email] {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
  }
}

#newsletter form * {
  width: 100%;
}

@media (min-width: 800px) {
  #newsletter form * {
    width: auto;
  }
}

#newsletter form p {
  flex-grow: 1;
  margin-right: 16px;
}

#newsletter form input:not([type=submit]) {
  margin-right: 6px;
  padding: 6px 10px;

  min-width: 215px;

  border: 1px solid #43454750;
  box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.15);
  border-radius: 5px;

  font-size: 12px;
}

#newsletter form button,
#newsletter form input[type=submit] {
  padding: 6px 20px;

  background: rgba(67,69,71,0.1);
  border: 1px solid var(--line-dark-color);
  border-radius: 5px;

  font-weight: 700;
  font-size: 12px;
  color: #434547;
  text-align: center;

  transition: all 0.25s ease;
}

#newsletter form button:hover,
#newsletter form input[type=submit]:hover {
  border-color: var(--main-accent-color);
  background-color: var(--main-accent-color);
}

/* RESEARCH ROWS */

#research .column {
  padding-bottom: 20px;
}

/* ALL KINDS OF ROWS */

.linkRow {
  display: flex;
  margin-bottom: 10px;
}

.linkRow.noMargin {
  margin: 0;
}

.linkRow .icon {
  flex-grow: 0;
  flex-shrink: 0;
  width: 24px;

  display: flex;
  align-items: flex-start;
}

.linkRow .icon.vcenter {
  align-items: center;
}

.linkRow .icon.img {
  align-items: center;
  margin-top: -6px;
  transition: all 0.25s ease;
}

a:not(.disabled):hover .linkRow .icon.img {
  margin-top: -12px;
}

.linkRow .text {
  flex-grow: 1;
  /* margin-top: 2px; */
}

.bottom-border {
  border-bottom: 1px solid var(--line-light-color);
}

.bottom-border-mobile {
  border-bottom: 1px solid var(--line-light-color);
  margin-bottom: 40px;
}

@media (min-width: 800px) {
  .bottom-border-mobile {
    border-bottom: none;
    margin-bottom: 0px;
  }
}

.verticalBorder {
  border-left: 1px solid var(--line-light-color);
  margin: 0 30px;
  padding: 0;
  width: 0px;
  flex-grow: 0;
}

.verticalBorder.andaHalf {
  margin: 0 45px;
}

.verticalSpacer {
  width: 30px;
  flex-grow: 0;
  flex-shrink: 0;
}

.verticalSpacer.andaHalf {
  width: 45px;
}

.verticalSpacer.doubleWidth {
  width: 60px;
}

/* OTHER HOME STUFF */

.show-coverart {
  width: 100%;
  border-radius: 50px;
  box-shadow:
    0.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
    2px 6.7px 5.3px rgba(0, 0, 0, 0.028),
    3.8px 12.5px 10px rgba(0, 0, 0, 0.035),
    6.7px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    12.5px 41.8px 33.4px rgba(0, 0, 0, 0.05),
    30px 100px 80px rgba(0, 0, 0, 0.07)
  ;
}


/* LAB NOTES LAYOUT */

.labnotes-topbar-accent,
.labnotes-topbar-main,
.labnotes-topbar-accent-mobile {
  height: 80px;
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: #434547;
  color: white;
  font-size: 34px;
  font-family: 'Unica One', 'Courier New', Courier, monospace;
  text-transform: uppercase;
}

.labnotes-topbar-accent,
.labnotes-topbar-accent-mobile {
  background: var(--main-accent-color);
}

@media (min-width: 900px) {
  .labnotes-topbar-main {
    padding-left: 45px;
  }
}

.labnotes-topbar-main .right {
  float: right;

  font-size: 18px;
  color: var(--light-text-color);
}

#labnotes-list .preheader {
  font-family: 'Unica One', 'Courier New', Courier, monospace;
  color: var(--light-text-color);
  font-size: 16px;
}

#labnotes-list .title {
  font-size: 16px;
  font-weight: 700;

  width: fit-content;
  transition: all 0.25s ease;
}

#labnotes-list a:hover .title,
#labnotes-list a.selected .title {
  background-color: var(--main-accent-color);
  border-radius: 3px;
}

#labnotes-list .labnotesnav a {
  text-decoration: none;
}

#labnotes-list .labnotesnav a.selected,
#labnotes-list .labnotesnav a.selected:hover {
  color: var(--main-accent-color);
  background: none;
}

#labnotes-list .labnotesnav a.disabled {
  pointer-events: none;
  color: var(--secondary-text-color);
}


/* THEMES */

#themeSelector {
  display: none;

  justify-content: center;
}

#themeSelector > div {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  margin: 8px;

  cursor: pointer;
  border: 2px solid transparent;
}

.themeLight #themeSelector #themeLight {
  border: 2px solid var(--main-accent-color);
}

.themeDark #themeSelector #themeDark {
  border: 2px solid var(--main-accent-color);
}

.themeHokies #themeSelector #themeHokies {
  border: 2px solid var(--main-accent-color);
}

#themeSelector #themeLight {
  background: white;
}

#themeSelector #themeDark {
  background: black;
}

#themeSelector #themeHokies {
  background: #660000;
}

.themeLight {
  /* No overrides */
}



.themeDark {
  --stark-text-color: white;
  --dark-text-color: #eaeaea;
  --main-text-color: #eaeaea;
  --secondary-text-color: #878F99;
  --main-bg-color: #222324;
  --secondary-bg-color: #303233;

  --main-accent-color: #F7C409;
  --main-accent-opposing-color: #330000;

  --line-light-color: #878F9950;
  --line-dark-color: #43454750;
}

.themeHokies {
  --stark-text-color: #ff6600;
  --dark-text-color: #ff6600;
  --main-text-color: #ff6600;
  --secondary-text-color: #878F99;
  --main-bg-color: #330000;
  --secondary-bg-color: #802626;

  --main-accent-color: #ff6600;
  --main-accent-opposing-color: #330000;

  --line-light-color: #878F9950;
  --line-dark-color: #43454750;
}


/* ARTICLES */

#articleHeader,
#thinkingHeader {
  margin-top: 40px;
}

#articleHeader .row,
#thinkingHeader .row,
.articleRow .row {
  align-items: flex-end;
}

#articleHeader p,
#thinkingHeader p {
  margin-bottom: 40px;
}

#article .article-text p:not(.caption):not(.notArticleText),
#article .article-text ul,
#article .article-text ol {
  /* color: var(--stark-text-color); */

  font-size: 18px;
  line-height: 27px;

  font-family: 'Newsreader', serif;
  font-size: 19px;
  line-height: 28px;
  font-weight: normal;

  margin-bottom: 15px;
}

#weekly .weekly-text p.small {
  font-size: 14px;
  line-height: 20px;
}

#article .article-text p.small:not(.caption):not(.notArticleText) {
  font-size: 14px;
  font-style: normal;
}

#article .article-text li {

}

/* #article .article-text blockquote p:not(.caption) {
  color: var(--main-text-color)
} */

#article .article-text p.big:not(.caption):not(.notArticleText) {
  font-size: 22px;
  line-height: 33px;
  margin-bottom: 25px;
}

#article .article-text p.big.dropcap::first-letter {
  float: left;
  line-height: 115%;
  font-size: 300%;

  margin-bottom: -20px;
  margin-right: 4px;
}

@media (min-width: 800px) {
  #article .article-text p.big:not(.caption):not(.notArticleText) {
    font-size: 28px;
    line-height: 39px;
    margin-bottom: 25px;
  }

  #article .article-text p.big.dropcap::first-letter {
    margin-bottom: -50px;
    margin-right: 4px;
  }
}

#article .article-text h2,
#weekly .weekly-text h2,
#productsinprogress .productsinprogress-text h2,
#library h2 {
  margin-top: 45px;
  margin-bottom: 15px;
}

/* #article .article-text h5 {
  margin: 45px 0;
  font-size: 18px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 5px;
  text-align: center;

  color: var(--main-accent-color);
} */



#article .article-text hr,
#thinking .thinking-text hr,
#labnotes .labnotes-text hr,
#weekly .weekly-text hr,
#productsinprogress .productsinprogress-text hr {
  margin: 45px 0;
}

#thinking .thinking-text h2,
#labnotes .labnotes-text h2 {
  margin-top: 25px;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: normal;
}

#thinking .thinking-text p,
#thinking .thinking-text ul li,
#thinking .thinking-text ol,
#labnotes .labnotes-text p,
#labnotes .labnotes-text ul,
#labnotes .labnotes-text ol,
#weekly .weekly-text p,
#weekly .weekly-text ul,
#weekly .weekly-text ol,
#productsinprogress .productsinprogress-text p,
#productsinprogress .productsinprogress-text ul,
#productsinprogress .productsinprogress-text ol {
  font-size: 16px;
  line-height: 21px;
  margin-bottom: 12px;
}

#thinking .thinking-text p.small {
  font-size: 12px;
}

#thinking .thinking-text p.noMargin {
  margin-bottom: 0;
}

#thinking .thinking-text blockquote,
#labnotes .labnotes-text blockquote,
#weekly .weekly-text blockquote,
#productsinprogress .productsinprogress-text blockquote {
  border-left: 10px solid var(--main-accent-color);
  font-style: normal;
  padding: 20px;
  padding-bottom: 10px;
  background: var(--superlight-bg-color);
  border-radius: 5px;
  color: var(--medium-text-color);
}

/* Experimenting with: */
#labnotes .labnotes-text p,
#labnotes .labnotes-text ul,
#labnotes .labnotes-text ol {
  font-size: 17px;
  line-height: 23px;
  margin-bottom: 12px;
}

#labnotes .labnotes-text p.small {
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 0;
}

#labnotes .labnotes-text .image,
#labnotes .labnotes-text .video {
  line-height: 0; /* Otherwise it gets a white border at the bottom */
  margin: 20px 0;
}

#labnotes .labnotes-text .video.whiteScreen,
#labnotes .labnotes-text .image.whiteScreen {
  background: white;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05), 0 12px 50px 0 rgba(0,0,0,0.40);
}

.imageRow {
  margin-top: 40px;
  margin-bottom: 40px;
}

.imageRow .image {
  background: white;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05), 0 12px 50px 0 rgba(0,0,0,0.40);
  margin: 0 auto;
}

@media (min-width: 900px) {
  #labnotes .labnotes-text .image:not(.docWidth),
  #labnotes .labnotes-text .video:not(.docWidth) {
    margin: 0;
    margin-left: -45px;
    margin-right: -45px;
    border: 20px solid var(--main-bg-color);
    box-sizing: border-box;
  }

  #labnotes .labnotes-text .video.whiteScreen:not(.docWidth),
  #labnotes .labnotes-text .image.whiteScreen:not(.docWidth) {
    border: none;

    margin-left: -65px;
    margin-right: -45px;
    margin-top: 40px;
    margin-bottom: 30px;
  }

  .imageRow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -75px;
    margin-right: -75px;
  }
}

#labnotes .labnotes-text .video:not(.oddRatio) {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video.oddRatio video,
.image img {
  width: 100%;
  height: auto
}

#labnotes .labnotes-text .video iframe,
#labnotes .labnotes-text .video object,
#labnotes .labnotes-text .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Just for devt */
.video .placeholder,
image .placeholder {
  height: 300px;
  background-color: gray;
}

.whiteScreen .placeholder {
  background-color: white;
}

#labnotes .labnotes-text .caption,
#productsinprogress .productsinprogress-text .caption {
  /* width: 200px;
  position: absolute;
  right: 0; */

  border-top: 1px solid #43454750;
  padding-top: 9px;
  margin-top: 3px;
}


#labnotes .labnotes-text .caption,
#labnotes .labnotes-text .caption b,
#labnotes .labnotes-text .caption p,
#productsinprogress .productsinprogress-text .caption,
#productsinprogress .productsinprogress-text .caption b,
#productsinprogress .productsinprogress-text .caption p {
  font-size: 12px !important;
  line-height: 15px !important;
  color: #43454780 !important;

  margin-bottom: 6px;
  display: block; /* for the b so we don't have to manually wrap it in p */
}

#labnotes .labnotes-text .caption,
#productsinprogress .productsinprogress-text .caption {
  margin-bottom: 20px;
}


/* Research community */
#membership hr {
  margin: 50px 0;
}

#membership .column {
  display: flex;
  flex-direction: column;
}

#membership .membershipCol {
  flex-grow: 1;
  border: 1px solid #43454740;
  border-radius: 12px;
  padding: 10px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#membership .membershipCol * {
  flex-grow: 0;
  flex-shrink: 0;
}

#membership .membershipCol .grow {
  flex-grow: 1;
}

#membership .membershipCol h3 {
  text-align: center;
  font-weight: 900;
  font-size: 24px;
  /* color: #434547; */
  letter-spacing: -0.5px;
  margin-top: 20px;
}

#membership .membershipCol .price {
  font-weight: bold;
  font-size: 16px;
  color: var(--secondary-text-color);
  text-align: center;
  margin-top: 4px;
}

#membership .membershipCol p {
  margin: 10px;
}

#membership .membershipCol button {
  border: 2px solid transparent;
  box-shadow: none;
  padding: 10px;

  display: block;
  width: 100%;
  /* margin: -10px; */
  margin-top: 20px;

  /* background: var(--main-accent-color); */
  /* color: var(--main-text-color); */
  border-radius: 3px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;

  transition: all 0.25s ease;
}

.tier-1 {
  background: #878F99;
  color: white;
}

#membership .membershipCol button.tier-1:hover {
  background: var(--main-bg-color);
  border: 2px solid #878F99;
  color: #878F99;
}

.tier-2 {
  background: #F7C409;
}

#membership .membershipCol button.tier-2:hover {
  background: var(--main-bg-color);
  border: 2px solid #F7C409;
  color: #F7C409;
}

.tier-3 {
  background: #212329;
  color: white;
}

#membership .membershipCol button.tier-3:hover {
  background: var(--main-bg-color);
  border: 2px solid #212329;
  color: #212329;
}

#membership .annual {
  text-align: center;
  margin-top: 12px;
}

#membership #moreInfo {
  /* text-align: center; */
  max-width: 700px;
  margin: 0 auto;
}

#membership #moreInfo h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

#membership #moreInfo p {
  font-size: 16px;
}

.noteBox {
  /* display: none; */

  border: 1px solid #D8D8D8;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);

  padding: 10px;

  position: absolute;
}