html {
  width: 100%;
  overflow-x: hidden;
}

.grid-container.large-container {
  max-width: 80rem;
}

.offset-container {
  max-width: 70rem;
  margin-left: 10%;
}

@media screen and (max-width:1299px) {
  .offset-container {
    max-width: 70rem;
    margin-left: 0;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* --- scroll bar --- */

body *::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body *::-webkit-scrollbar-track {
  background: rgba(var(--bright-orange-decimal), .3);
}

body *::-webkit-scrollbar-thumb {
  background-color: var(--bright-orange);    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
}

body *::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ---- iframe ----  */

iframe {
  border: none;
}

/* ----- search input ----- */

input {
  line-height: var(--line-height);
}

input:focus {
  outline: none;
}

input[type="text"].search-input {
  outline: none;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 2px solid var(--burnt-orange);
  border-radius: 0;
  width: 100%;
  background-image: url('./assets/search-icon.webp');
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 1em;
  padding: calc(var(--line-height-em)*2 - 3em) 0 .375em 1.5em;
  height: auto;
  color: var(--almost-black);
  background-color: transparent;
}


input.search-input::placeholder {
  font-weight: var(--fw-light);
}

.no-webp input[type="text"].search-input {
  background-image: url('./assets/search-icon.png');
}

input[type="text"].search-input:focus {
  background-color: transparent;
  outline: none;
  box-shadow: none;
  border-color: var(--bright-orange);
}

button {
  cursor: pointer;
}

button:focus {
  outline: none;
}

/* ----- research topic tags ----- */

.research-topic-tag {
  background: var(--background-white);
  padding-top: calc((var(--line-height-em) - .875em)/2);
  padding-bottom: calc((var(--line-height-em) - .875em)/2);
  padding-left: .5em;
  padding-right: 1em;
  width: auto;
  display: inline-block;
  font-size: var(--fs-x-small);
  padding-top: calc((var(--line-height-em) )/4);
  padding-bottom: calc((var(--line-height-em) )/4);

  margin-right: .8em;

  border-left: 3px solid var(--burnt-orange);
  border-top: 1px solid var(--block-gray);
  border-bottom: 1px solid var(--block-gray);
  border-right: 1px solid var(--block-gray);

}



/* ---- blockquote ----- */

blockquote {
  position: relative;
  margin-left: 0;
  margin-right: 0;
  max-width: 95%;
  border-left: none;
}

blockquote > p {
  color: var(--almost-black);
  margin-left: 0;
  margin-bottom: 0;
  padding: 0 0 calc( var(--line-height-em) / 2 ) 0;
  font-family: 'GT Sectra Book Italic';
  font-size: 1.3125em;
  line-height: var(--line-height-em);
}

blockquote::before {
  color: var(--almost-black);
  content: "\02018";
  font-family: serif;
  font-size: 4em;
  position: absolute;
  margin-left: -.45em;
  top: -.7em;
}


blockquote figcaption {
  font-size: 1em;
  font-family: 'GT Sectra Book Italic';
  color: var(--muted);
}



/* --- aside ---- */

aside {
  border-left: 5px solid var(--gray);
  padding-left: var(--line-height-em);
  color: var(--muted);
}

.aside__title {
  font-weight: 500;
}


/* ----- overlapping element component ----- */


.overlapping-element {
  display: flex;
  margin-bottom: calc(var(--line-height-em) * 7);
}

.overlapping-element__image-wrapper {
  margin-right: 6em;
}

.overlapping-element__image {
  display: block;
  width: 100%;
  margin-bottom: var(--line-height-em);
}

.overlapping-element__text {
  position: relative;
}

.overlapping-element__text-bg {
  background: var(--white);
  overflow: auto;
  padding: var(--line-height-em) calc(var(--line-height-em) * 2) 0 calc(var(--line-height-em)*2);
  margin-bottom: var(--line-height-em);
}

.overlapping-element__text::before {
  content: '';
  height: calc(100% + var(--line-height-em)*4);
  background-color: var(--block-gray);
  position: absolute;
  z-index: -1;
  top: calc(var(--line-height-em)*-2);

  /* customize based on component and page */
  width: 200px;
  left: calc(-.75 * 200px);        /* 75% of width */
}

/* --- floating gift ---- */

.floating-gift {
  position: fixed;
  right: 0;
  bottom: 10%;
  width: 15em;
  z-index: 1;
  background-color: var(--burnt-orange);
  padding: 1em 0 0 1em;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  box-shadow: -1px 1px 3px 1px rgba(30, 30, 30, .3);
  cursor: pointer;
}

.floating-gift__title {
  text-transform: uppercase;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--yellow);
  display: block;
  margin-bottom: calc(var(--line-height-em)/2);
}

.floating-gift__prompt {
  font-size: var(--fs-x-small);
  color: var(--background-white);
}

/* --- faqs ---- */

.faq__q {
  font-weight: var(--fw-bold);
  color: var(--muted);
  margin-bottom: calc(var(--line-height-em)/2);
}

.faq__a {
  margin-bottom: calc(var(--line-height-em)*1.5);
}

/* --- print css --- */

@media print {
  .overlapped-full-width-banner .splash__overlapping {
    position: relative;
    margin-top: 0;
    margin-bottom: calc(var(--line-height-em)*2);
  }

  .overlapping-element {
    margin-top: 0;
    margin-bottom: calc(var(--line-height-em)*2);
  }

  .overlapping-element__image-wrapper, .overlapping-element__video-wrapper {
    max-height: 200px;
  }

  .overlapping-element__image, .overlapping-element__video {
    margin-left: 0;
    margin-right: auto;
    max-height: 100%;
    object-fit: scale-down;
  }

  .overlapping-element__text {
    width: 100%;
    padding-left: 0;
    padding-right: calc(var(--line-height-em)/2);
  }

  .overlapping-element__text:before {
    display: none;
  }

}