Difference between revisions of "Template:Vilnius-Lithuania/CSS/ContentPage"

m
 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
@charset "UTF-8";
 
body, html {
 
body, html {
 
   margin: 0;
 
   margin: 0;
Line 10: Line 11:
 
}
 
}
  
−
#section-text .content .content-paragraph {
+
main .content .content-paragraph,
−
   font-family: "lato-regular";
+
main .content .reference,
 +
#HQ_page main .content .content-paragraph,
 +
#HQ_page main .content .reference {
 +
   font-family: "lato-light";
 
   margin: 0;
 
   margin: 0;
−
   font-size: 1.4em;
+
   font-size: 1.2rem;
 +
  line-height: 1.5;
 
   margin-top: 20px;
 
   margin-top: 20px;
 
   margin-bottom: 40px;
 
   margin-bottom: 40px;
 +
  text-align: left;
 
}
 
}
 
@media (max-width: 480px) {
 
@media (max-width: 480px) {
−
   #section-text .content .content-paragraph {
+
   main .content .content-paragraph,
−
     font-size: 1em;
+
main .content .reference,
 +
#HQ_page main .content .content-paragraph,
 +
#HQ_page main .content .reference {
 +
     font-size: 1rem;
 
   }
 
   }
 
}
 
}
−
#section-text .content .h3 {
+
main .content .quote,
−
   font-size: 1.5em;
+
#HQ_page main .content .quote {
 +
  padding: 20px;
 +
  box-shadow: 0 0 10px lightgray;
 +
  margin: 40px;
 +
}
 +
main .content .quote p,
 +
main .content .quote p.content-paragraph,
 +
#HQ_page main .content .quote p,
 +
#HQ_page main .content .quote p.content-paragraph {
 +
  text-align: center;
 +
  font-size: 0.8em;
 +
}
 +
main .content .quote p.content-paragraph,
 +
#HQ_page main .content .quote p.content-paragraph {
 +
  font-style: italic;
 +
}
 +
main .content .quote .beforeWave::before,
 +
#HQ_page main .content .quote .beforeWave::before {
 +
  margin: 0 auto 5px;
 +
}
 +
main .content .reference,
 +
#HQ_page main .content .reference {
 +
  word-break: break-word;
 +
}
 +
main .content .h3,
 +
#HQ_page main .content .h3 {
 +
   font-size: 2rem;
 +
}
 +
main .content .beforeWave::before,
 +
#HQ_page main .content .beforeWave::before {
 +
  background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 +
  background-size: contain;
 +
  background-repeat: no-repeat;
 +
  content: "";
 +
  margin-bottom: 16px;
 +
  display: block;
 +
  width: 100px;
 +
  height: 18px;
 +
}
 +
main .content .afterWave::after,
 +
#HQ_page main .content .afterWave::after {
 +
  background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 +
  background-size: contain;
 +
  background-repeat: no-repeat;
 +
  content: "";
 +
  margin-top: 16px;
 +
  display: block;
 +
  width: 100px;
 +
  height: 18px;
 
}
 
}
  
Line 30: Line 87:
 
}
 
}
  
−
div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 {
+
div.h1,
 +
div.h2,
 +
div.h3,
 +
div.h4,
 +
div.h5,
 +
div.h6 {
 +
  font-family: "montserrat-bold";
 
   font-weight: 800;
 
   font-weight: 800;
−
   margin-bottom: 0.83em;
+
   margin-bottom: 0.4em;
−
   margin-top: 1em;
+
   margin-top: 1rem;
 
}
 
}
−
div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger {
+
div.h1.larger,
−
   font-size: 2.2rem;
+
div.h2.larger,
 +
div.h3.larger,
 +
div.h4.larger,
 +
div.h5.larger,
 +
div.h6.larger {
 +
   font-size: 2.5rem;
 
}
 
}
  
Line 46: Line 114:
 
   align-items: center;
 
   align-items: center;
 
   background-color: #121212;
 
   background-color: #121212;
 +
  background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png);
 +
  background-size: cover;
 
}
 
}
−
.introContainer span {
+
.introContainer > span {
 
   width: 80vw;
 
   width: 80vw;
 
   height: 80vw;
 
   height: 80vw;
−
   border-radius: 40vw;
+
   border-radius: 1000px;
 
   position: relative;
 
   position: relative;
 
   background-size: cover;
 
   background-size: cover;
−
   background-position: center;
+
   background-position: 0px 0px;
 +
  background-attachment: fixed;
 
   overflow: hidden;
 
   overflow: hidden;
 
}
 
}
 
@media (min-aspect-ratio: 1/1) {
 
@media (min-aspect-ratio: 1/1) {
−
   .introContainer span {
+
   .introContainer > span {
 
     width: 80vh;
 
     width: 80vh;
 
     height: 80vh;
 
     height: 80vh;
 
   }
 
   }
 
}
 
}
−
.introContainer span #image-overlay {
+
.introContainer > span #image-overlay {
 
   width: 100%;
 
   width: 100%;
 
   height: 100%;
 
   height: 100%;
Line 71: Line 142:
 
.introContainer .heading {
 
.introContainer .heading {
 
   z-index: 3;
 
   z-index: 3;
−
   position: fixed;
+
   position: absolute;
 
   font-size: 5.7vh;
 
   font-size: 5.7vh;
−
   font-size: min(7vh, 12vw);
+
   font-size: calc(2.5vh + 2vw);
−
  top: 46vh;
+
−
  left: 10vw;
+
 
   color: #FAFAFC;
 
   color: #FAFAFC;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
−
   font-family: "ubuntu-bold";
+
   text-align: center;
−
}
+
   font-family: "montserrat-black";
−
@media (min-aspect-ratio: 1/1) {
+
−
   .introContainer .heading {
+
−
    font-size: 7vw;
+
−
  }
+
 
}
 
}
 
.introContainer .heading.other {
 
.introContainer .heading.other {
−
   top: 48vh;
+
   padding-top: 0.3em;
−
   left: 8vw;
+
   pointer-events: none;
 
   color: transparent;
 
   color: transparent;
 
   -webkit-text-stroke-width: 1px;
 
   -webkit-text-stroke-width: 1px;
 
   -webkit-text-stroke-color: #FAFAFC;
 
   -webkit-text-stroke-color: #FAFAFC;
 
}
 
}
−
@media (max-width: 480px) {
+
@media (min-aspect-ratio: 1/1) {
 
   .introContainer .heading {
 
   .introContainer .heading {
−
     top: 49vh;
+
     font-size: 6.5vw;
−
  }
+
−
  .introContainer .heading.other {
+
−
    top: 50vh;
+
 
   }
 
   }
 
}
 
}
−
.introContainer::before {
+
 
 +
.milkWaveContentPage {
 
   z-index: 2;
 
   z-index: 2;
 +
  width: 100%;
 +
  top: 0;
 +
  height: calc(100vh - 18px);
 
   position: absolute;
 
   position: absolute;
−
  width: 100%;
 
−
  height: 100vh;
 
 
   content: "";
 
   content: "";
 
   pointer-events: none;
 
   pointer-events: none;
−
  background-image: url(https://static.igem.org/mediawiki/2020/d/db/T--Vilnius-Lithuania--milk1.svg);
 
−
  background-size: cover;
 
 
   background-position: bottom;
 
   background-position: bottom;
 
   background-origin: border-box;
 
   background-origin: border-box;
−
   border-bottom: 2px solid #FAFAFC;
+
   background-size: 100%;
 +
  background-repeat: no-repeat;
 +
  background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
 
}
 
}
  
Line 130: Line 194:
 
   clear: both;
 
   clear: both;
 
   display: table;
 
   display: table;
 +
}
 +
@media (max-width: 800px) {
 +
  main {
 +
    justify-content: center;
 +
  }
 
}
 
}
  
 
.indexbutton {
 
.indexbutton {
 
   display: none;
 
   display: none;
−
  position: fixed;
 
−
  bottom: -100px;
 
 
   color: #FAFAFC;
 
   color: #FAFAFC;
−
  border-radius: 64px 64px 0 0;
 
 
   text-transform: capitalize;
 
   text-transform: capitalize;
−
   font-size: 1.5rem;
+
   font-size: 1.4rem;
 +
  width: 100%;
 +
  text-align: center;
 
   font-weight: bold;
 
   font-weight: bold;
−
   padding: 24px 24px 8px;
+
   padding: 16px 0;
 +
  height: 62px;
 +
  box-sizing: border-box;
 
   cursor: pointer;
 
   cursor: pointer;
 
   background-color: #6281EF;
 
   background-color: #6281EF;
 +
  z-index: 21;
 
   transition: 0.5s;
 
   transition: 0.5s;
−
}
 
−
.indexbutton[onText=true] {
 
−
  bottom: 0px;
 
−
}
 
−
.indexbutton.open {
 
−
  bottom: 0px;
 
 
}
 
}
 
@media (max-width: 800px) {
 
@media (max-width: 800px) {
 
   .indexbutton {
 
   .indexbutton {
 
     display: block;
 
     display: block;
−
    z-index: 21;
 
 
   }
 
   }
 
}
 
}
  
−
.index {
+
table, #HQ_page table {
 +
  margin: 0 auto;
 +
  border-collapse: collapse;
 +
  margin-top: 8px;
 +
}
 +
#HQ_page table th, table th, #HQ_page table td, table td, #HQ_page #HQ_page table th, #HQ_page table th, #HQ_page #HQ_page table td, #HQ_page table td {
 +
  padding: 6px 8px;
 +
  border: 1px solid #121212;
 +
  background-color: #FAFAFC;
 +
}
 +
#HQ_page table th, table th, #HQ_page #HQ_page table th, #HQ_page table th {
 +
  background-color: #e0e0e0;
 +
}
 +
 
 +
.sideBlock {
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   float: left;
 
   float: left;
Line 166: Line 244:
 
   position: sticky;
 
   position: sticky;
 
   top: 50%;
 
   top: 50%;
−
   margin: 200px 32px 0 50px;
+
   margin: 200px 32px 0 4vw;
 
   transform: translateY(-50%);
 
   transform: translateY(-50%);
 
   min-width: 220px;
 
   min-width: 220px;
 +
  max-width: 350px;
 
}
 
}
 
@media (max-width: 1024px) {
 
@media (max-width: 1024px) {
−
   .index {
+
   .sideBlock {
−
     margin: 200px 8px 0 32px;
+
     margin: 200px 32px 0 4vw;
 
   }
 
   }
 
}
 
}
−
.index b {
+
.sideBlock b {
−
   font-size: 1.5em;
+
  font-family: "montserrat-bold";
 +
   font-size: 1.4rem;
 
   font-weight: bold;
 
   font-weight: bold;
 
   margin-left: 0.25em;
 
   margin-left: 0.25em;
 +
  display: block;
 
}
 
}
−
.index ul {
+
.sideBlock ul {
 
   margin: 1em 0;
 
   margin: 1em 0;
 
   padding: 0;
 
   padding: 0;
 
}
 
}
−
.index a {
+
.sideBlock a {
 
   color: #121212;
 
   color: #121212;
 
   text-decoration: none;
 
   text-decoration: none;
 +
  font-family: "lato-light", sans-serif;
 
}
 
}
−
.index li {
+
.sideBlock li {
 
   margin: 24px;
 
   margin: 24px;
 
   list-style: none;
 
   list-style: none;
 
   color: #121212;
 
   color: #121212;
−
   font-size: 1.1em;
+
   font-size: 1.1rem;
 
   cursor: pointer;
 
   cursor: pointer;
−
   display:flex;
+
   display: flex;
−
margin-left: 0.25em;  
+
  align-items: center;
 +
  margin-left: 0.25em;
 
}
 
}
−
.index li:last-child {
+
.sideBlock li:last-child {
 
   margin-bottom: 0;
 
   margin-bottom: 0;
 
}
 
}
−
 
+
.sideBlock li div {
−
.index li div{
+
  max-width: 15px;
−
    max-width: 17px;
+
  max-height: 15px;
−
    max-height: 17px;
+
  box-sizing: border-box;
−
    box-sizing: border-box;
+
  border: 1px solid;
−
    border: 1px solid;
+
  color: #2E64EC;
−
    color: #2E64EC;
+
  border-radius: 20px;
−
    border-radius: 20px;
+
  transition: 0.5s;
−
    transition: 0.5s;
+
  margin-right: 8px;
−
    margin-right: 5px;
+
  height: 10vw;
−
    margin-top: 5px;
+
  width: 10vh;
−
    height: 10vh;
+
−
    width: 10vh;
+
 
}
 
}
−
.index li.active div {
+
.sideBlock li.active div {
 
   background-color: #2E64EC;
 
   background-color: #2E64EC;
 
}
 
}
 
@media (max-width: 800px) {
 
@media (max-width: 800px) {
−
   .index {
+
   .sideBlock {
 
     position: fixed;
 
     position: fixed;
 
     bottom: 0;
 
     bottom: 0;
−
     padding: 64px 64px 0;
+
     padding: 0 64px;
−
    border-radius: 1000px 1000px 0 0;
+
 
     background-color: #6281EF;
 
     background-color: #6281EF;
 
     color: #FAFAFC;
 
     color: #FAFAFC;
Line 228: Line 308:
 
     margin: 0;
 
     margin: 0;
 
     z-index: 20;
 
     z-index: 20;
−
     min-width: 300px;
+
    width: 100%;
 +
    box-sizing: border-box;
 +
     min-width: unset;
 +
    max-width: unset;
 
     text-align: center;
 
     text-align: center;
 
     transition: transform 0.5s;
 
     transition: transform 0.5s;
 
     top: unset;
 
     top: unset;
−
     transform: translateY(50%) scale(0);
+
     transform: translateY(calc(100% - 62px));
 +
    display: flex;
 +
    flex-direction: column;
 +
    align-items: center;
 
   }
 
   }
−
   .index b {
+
   .sideBlock b {
 
     display: block;
 
     display: block;
−
     margin-right: 1em;
+
     margin: 0;
 
   }
 
   }
−
   .index ul {
+
   .sideBlock ul {
 
     display: inline-block;
 
     display: inline-block;
 
     text-align: start;
 
     text-align: start;
 
     margin-top: 0;
 
     margin-top: 0;
−
     margin-bottom: 60px;
+
     margin-bottom: 30px;
 
   }
 
   }
−
   .index li {
+
   .sideBlock li {
 
     font-weight: bold;
 
     font-weight: bold;
 
   }
 
   }
−
   .index li a {
+
   .sideBlock li a {
 
     color: #FAFAFC;
 
     color: #FAFAFC;
 
   }
 
   }
−
   .index li div {
+
   .sideBlock li div {
 
     color: #FAFAFC;
 
     color: #FAFAFC;
 
   }
 
   }
−
   .index li.active div {
+
   .sideBlock li.active div {
 
     background-color: #FAFAFC;
 
     background-color: #FAFAFC;
 
   }
 
   }
−
   .index.open {
+
   .sideBlock.notshow {
−
     transform: translateY(0) scale(1);
+
     transform: translateY(calc(100% - 0px));
 +
  }
 +
  .sideBlock.open {
 +
    transform: translateY(0);
 
   }
 
   }
 
}
 
}
  
−
.content {
+
.contentBlock {
−
   width: 80vw;
+
   width: 64vw;
 
   max-width: 700px;
 
   max-width: 700px;
−
  margin-right: 10vw;
 
 
   float: right;
 
   float: right;
−
   padding: 40px;
+
   display: flex;
−
   border-radius: 16px;
+
   flex-direction: column;
−
  box-shadow: 0 0 10px lightgray;
+
−
  color: #121212;
+
 
}
 
}
 
@media (max-width: 1024px) {
 
@media (max-width: 1024px) {
−
   .content {
+
   .contentBlock {
 
     margin-right: 5vw;
 
     margin-right: 5vw;
 
   }
 
   }
 +
}
 +
@media (max-width: 800px) {
 +
  .contentBlock {
 +
    margin-right: unset;
 +
    width: 90%;
 +
    box-sizing: border-box;
 +
    max-width: 650px;
 +
  }
 +
}
 +
 +
.content {
 +
  padding: 64px;
 +
  border-radius: 5px;
 +
  box-shadow: 0 0 10px lightgray;
 +
  color: #121212;
 +
  margin-top: 40px;
 +
  overflow: hidden;
 +
  display: flex;
 +
  flex-direction: column;
 +
  font-family: "lato-light";
 
}
 
}
 
@media (max-width: 800px) {
 
@media (max-width: 800px) {
Line 280: Line 386:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     box-shadow: unset;
 
     box-shadow: unset;
−
     padding: 30px;
+
     padding: 35px;
 +
    width: 100%;
 +
    box-sizing: border-box;
 +
  }
 +
}
 +
@media (max-width: 400px) {
 +
  .content {
 +
    padding: 20px;
 
   }
 
   }
 
}
 
}
−
.content *:first-child {
+
.content p:first-child {
 
   margin-top: 0;
 
   margin-top: 0;
 +
}
 +
.content ul,
 +
.content ol {
 +
  font-family: "lato-light", sans-serif;
 +
}
 +
.content ul {
 +
  padding-inline-start: 20px;
 +
  list-style-image: none;
 +
  list-style-type: none;
 +
}
 +
.content ul li {
 +
  display: flex;
 +
}
 +
.content ul li::before {
 +
  content: "•";
 +
  color: #6281ef;
 +
}
 +
.content .splide ul li::before {
 +
  content: unset;
 +
}
 +
.content li {
 +
  margin: 10px;
 +
}
 +
.content li::marker {
 +
  color: #6281ef;
 +
  font-family: "lato-heavy";
 +
  font-size: 1.3em;
 +
}
 +
.content h4,
 +
.content h5 {
 +
  font-family: "montserrat-bold", sans-serif;
 +
  font-size: 1.2em;
 +
  text-transform: uppercase;
 +
  margin-block-end: 0.2em;
 +
  margin-block-start: 60px;
 +
}
 +
.content h5 {
 +
  font-size: 1em;
 +
}
 +
.content a {
 +
  color: #2e64ec;
 +
  text-decoration: none;
 +
  text-align: center;
 +
  cursor: pointer;
 +
}
 +
.content a.citation {
 +
  font-size: 0.6em;
 +
  vertical-align: super;
 +
}
 +
.content a button {
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  font-family: "lato-semibold", sans-serif;
 +
  color: #FAFAFC;
 +
  padding: 32px 56px;
 +
  font-size: 1.2rem;
 +
  max-width: 7;
 +
  text-align: center;
 +
  border-radius: 1000px;
 +
  margin: 40px auto;
 +
  transition: 0.3s ease-out;
 +
  background-color: #6281ef;
 +
  box-shadow: 0 16px 32px -12px #3658cf;
 +
  border: none;
 +
  position: relative;
 +
  top: 0;
 +
  font-variant-position: normal;
 +
  cursor: pointer;
 +
  text-transform: uppercase;
 +
}
 +
.content a button:hover {
 +
  top: -5px;
 +
  box-shadow: 0 16px 32px -16px #3658cf;
 +
}
 +
.content p b {
 +
  font-family: "lato-regular", sans-serif;
 +
  color: #000;
 +
}
 +
.content p a:not(.citation) {
 +
  text-decoration: none;
 +
  font-variant-position: normal;
 +
  color: #121212;
 +
  box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 +
  transition: 0.3s ease-out;
 +
}
 +
.content p a:not(.citation):hover {
 +
  box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;
 
}
 
}
  
−
_::-webkit-full-page-media, _:future, :root .index li::before {
+
_::-webkit-full-page-media,
 +
_:future,
 +
:root {
 
   transition-duration: unset;
 
   transition-duration: unset;
 +
}
 +
 +
.photos-wrapper.full-width {
 +
  width: 100%;
 +
}
 +
.photos-wrapper.full-width::after {
 +
  transform: rotate(180deg) translate(-520px, 50px);
 +
}
 +
.photos-wrapper .photos {
 +
  padding: 20px;
 +
  height: fit-content;
 +
  width: 100%;
 +
  box-sizing: border-box;
 +
  overflow: hidden;
 +
}
 +
.photos-wrapper .photos.phone {
 +
  display: flex;
 +
  justify-content: space-around;
 +
}
 +
.photos-wrapper .photos.phone img {
 +
  height: 400px;
 +
  border-radius: 0;
 +
  box-shadow: none;
 +
  max-width: none;
 +
  max-height: none;
 +
  width: auto;
 +
}
 +
.photos-wrapper .photos.photo-grid {
 +
  display: grid;
 +
  align-items: center;
 +
  justify-items: center;
 +
}
 +
.photos-wrapper .photos.photo-grid.three-part {
 +
  grid-template-columns: 1fr 1fr 1fr;
 +
}
 +
.photos-wrapper .photos.photo-grid.two-part {
 +
  grid-template-columns: 1fr 1fr;
 +
}
 +
.photos-wrapper .photos.photo-grid.one-part {
 +
  grid-template-columns: 1fr;
 +
}
 +
.photos-wrapper .photos.photo-grid.round-corners img {
 +
  border-radius: 200px;
 +
}
 +
.photos-wrapper .photos.photo-grid.no-shadow img {
 +
  box-shadow: none;
 +
}
 +
.photos-wrapper .photos.photo-grid.pie img {
 +
  width: 70%;
 +
}
 +
.photos-wrapper .photos.photo-grid img {
 +
  box-shadow: 5px 5px 7px #00000029;
 +
  width: 90%;
 +
}
 +
.photos-wrapper.half-width {
 +
  width: 50%;
 +
  align-self: center;
 +
}
 +
.photos-wrapper.half-width .photos {
 +
  height: fit-content;
 +
}
 +
.photos-wrapper.half-width .photos img {
 +
  width: 100%;
 +
}
 +
.photos-wrapper.half-width::after {
 +
  transform: rotate(180deg) translate(-235px, 50px);
 +
}
 +
 +
video {
 +
  width: 100%;
 +
}
 +
 +
.content p.photo-desc {
 +
  text-align: left !important;
 +
  font-size: 0.8em !important;
 +
}
 +
@media (max-width: 800px) {
 +
  .content p.photo-desc {
 +
    font-size: 0.6em;
 +
  }
 +
}
 +
 +
.references {
 +
  font-size: 1.9rem;
 +
}
 +
.references svg {
 +
  max-width: 100px;
 +
}
 +
.references h3 {
 +
  margin-block-start: 0em;
 +
  font-size: 0.8em;
 +
  font-family: "montserrat-bold", sans-serif;
 +
}
 +
.references ol {
 +
  margin: initial;
 +
  padding-inline-start: 10px;
 +
}
 +
.references ol li {
 +
  font-size: 0.4em;
 +
  font-family: "lato-light", sans-serif;
 +
}
 +
.references ol li::marker {
 +
  color: initial;
 +
  font-family: "lato-light", sans-serif;
 +
  font-size: 1em;
 
}
 
}

Latest revision as of 21:27, 27 October 2020

@charset "UTF-8"; body, html { 

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.igem_column_wrapper > p { 

 margin: 0;

}

main .content .content-paragraph, main .content .reference,

  1. HQ_page main .content .content-paragraph,
  2. HQ_page main .content .reference {
 font-family: "lato-light";
 margin: 0;
 font-size: 1.2rem;
 line-height: 1.5;
 margin-top: 20px;
 margin-bottom: 40px;
 text-align: left;

} @media (max-width: 480px) { 

 main .content .content-paragraph,

main .content .reference,

  1. HQ_page main .content .content-paragraph,
  2. HQ_page main .content .reference {
   font-size: 1rem;
 }

} main .content .quote,

  1. HQ_page main .content .quote {
 padding: 20px;
 box-shadow: 0 0 10px lightgray;
 margin: 40px;

} main .content .quote p, main .content .quote p.content-paragraph,

  1. HQ_page main .content .quote p,
  2. HQ_page main .content .quote p.content-paragraph {
 text-align: center;
 font-size: 0.8em;

} main .content .quote p.content-paragraph,

  1. HQ_page main .content .quote p.content-paragraph {
 font-style: italic;

} main .content .quote .beforeWave::before,

  1. HQ_page main .content .quote .beforeWave::before {
 margin: 0 auto 5px;

} main .content .reference,

  1. HQ_page main .content .reference {
 word-break: break-word;

} main .content .h3,

  1. HQ_page main .content .h3 {
 font-size: 2rem;

} main .content .beforeWave::before,

  1. HQ_page main .content .beforeWave::before {
 background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 background-size: contain;
 background-repeat: no-repeat;
 content: "";
 margin-bottom: 16px;
 display: block;
 width: 100px;
 height: 18px;

} main .content .afterWave::after,

  1. HQ_page main .content .afterWave::after {
 background-image: url(https://static.igem.org/mediawiki/2020/d/df/T--Vilnius-Lithuania--separator.svg);
 background-size: contain;
 background-repeat: no-repeat;
 content: "";
 margin-top: 16px;
 display: block;
 width: 100px;
 height: 18px;

}

main { 

 font-size: initial;

}

div.h1, div.h2, div.h3, div.h4, div.h5, div.h6 { 

 font-family: "montserrat-bold";
 font-weight: 800;
 margin-bottom: 0.4em;
 margin-top: 1rem;

} div.h1.larger, div.h2.larger, div.h3.larger, div.h4.larger, div.h5.larger, div.h6.larger { 

 font-size: 2.5rem;

}

.introContainer { 

 width: 100%;
 height: calc(100vh - 18px);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: #121212;
 background-image: url(T--Vilnius-Lithuania--backgroundWaves.png);
 background-size: cover;

} .introContainer > span { 

 width: 80vw;
 height: 80vw;
 border-radius: 1000px;
 position: relative;
 background-size: cover;
 background-position: 0px 0px;
 background-attachment: fixed;
 overflow: hidden;

} @media (min-aspect-ratio: 1/1) { 

 .introContainer > span {
   width: 80vh;
   height: 80vh;
 }

} .introContainer > span #image-overlay { 

 width: 100%;
 height: 100%;
 position: absolute;
 background-color: #6281EF;
 mix-blend-mode: multiply;

} .introContainer .heading { 

 z-index: 3;
 position: absolute;
 font-size: 5.7vh;
 font-size: calc(2.5vh + 2vw);
 color: #FAFAFC;
 text-transform: uppercase;
 text-align: center;
 font-family: "montserrat-black";

} .introContainer .heading.other { 

 padding-top: 0.3em;
 pointer-events: none;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #FAFAFC;

} @media (min-aspect-ratio: 1/1) { 

 .introContainer .heading {
   font-size: 6.5vw;
 }

}

.milkWaveContentPage { 

 z-index: 2;
 width: 100%;
 top: 0;
 height: calc(100vh - 18px);
 position: absolute;
 content: "";
 pointer-events: none;
 background-position: bottom;
 background-origin: border-box;
 background-size: 100%;
 background-repeat: no-repeat;
 background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);

}

main { 

 margin-top: -5px;
 width: 100%;
 background-color: #FAFAFC;
 z-index: 10;
 position: relative;
 padding-bottom: 50px;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 justify-content: space-evenly;

} main::after { 

 content: "";
 clear: both;
 display: table;

} @media (max-width: 800px) { 

 main {
   justify-content: center;
 }

}

.indexbutton { 

 display: none;
 color: #FAFAFC;
 text-transform: capitalize;
 font-size: 1.4rem;
 width: 100%;
 text-align: center;
 font-weight: bold;
 padding: 16px 0;
 height: 62px;
 box-sizing: border-box;
 cursor: pointer;
 background-color: #6281EF;
 z-index: 21;
 transition: 0.5s;

} @media (max-width: 800px) { 

 .indexbutton {
   display: block;
 }

}

table, #HQ_page table { 

 margin: 0 auto;
 border-collapse: collapse;
 margin-top: 8px;

}

  1. HQ_page table th, table th, #HQ_page table td, table td, #HQ_page #HQ_page table th, #HQ_page table th, #HQ_page #HQ_page table td, #HQ_page table td {
 padding: 6px 8px;
 border: 1px solid #121212;
 background-color: #FAFAFC;

}

  1. HQ_page table th, table th, #HQ_page #HQ_page table th, #HQ_page table th {
 background-color: #e0e0e0;

}

.sideBlock { 

 text-transform: uppercase;
 float: left;
 margin-left: 10vw;
 position: -webkit-sticky;
 position: sticky;
 top: 50%;
 margin: 200px 32px 0 4vw;
 transform: translateY(-50%);
 min-width: 220px;
 max-width: 350px;

} @media (max-width: 1024px) { 

 .sideBlock {
   margin: 200px 32px 0 4vw;
 }

} .sideBlock b { 

 font-family: "montserrat-bold";
 font-size: 1.4rem;
 font-weight: bold;
 margin-left: 0.25em;
 display: block;

} .sideBlock ul { 

 margin: 1em 0;
 padding: 0;

} .sideBlock a { 

 color: #121212;
 text-decoration: none;
 font-family: "lato-light", sans-serif;

} .sideBlock li { 

 margin: 24px;
 list-style: none;
 color: #121212;
 font-size: 1.1rem;
 cursor: pointer;
 display: flex;
 align-items: center;
 margin-left: 0.25em;

} .sideBlock li:last-child { 

 margin-bottom: 0;

} .sideBlock li div { 

 max-width: 15px;
 max-height: 15px;
 box-sizing: border-box;
 border: 1px solid;
 color: #2E64EC;
 border-radius: 20px;
 transition: 0.5s;
 margin-right: 8px;
 height: 10vw;
 width: 10vh;

} .sideBlock li.active div { 

 background-color: #2E64EC;

} @media (max-width: 800px) { 

 .sideBlock {
   position: fixed;
   bottom: 0;
   padding: 0 64px;
   background-color: #6281EF;
   color: #FAFAFC;
   float: unset;
   margin: 0;
   z-index: 20;
   width: 100%;
   box-sizing: border-box;
   min-width: unset;
   max-width: unset;
   text-align: center;
   transition: transform 0.5s;
   top: unset;
   transform: translateY(calc(100% - 62px));
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .sideBlock b {
   display: block;
   margin: 0;
 }
 .sideBlock ul {
   display: inline-block;
   text-align: start;
   margin-top: 0;
   margin-bottom: 30px;
 }
 .sideBlock li {
   font-weight: bold;
 }
 .sideBlock li a {
   color: #FAFAFC;
 }
 .sideBlock li div {
   color: #FAFAFC;
 }
 .sideBlock li.active div {
   background-color: #FAFAFC;
 }
 .sideBlock.notshow {
   transform: translateY(calc(100% - 0px));
 }
 .sideBlock.open {
   transform: translateY(0);
 }

}

.contentBlock { 

 width: 64vw;
 max-width: 700px;
 float: right;
 display: flex;
 flex-direction: column;

} @media (max-width: 1024px) { 

 .contentBlock {
   margin-right: 5vw;
 }

} @media (max-width: 800px) { 

 .contentBlock {
   margin-right: unset;
   width: 90%;
   box-sizing: border-box;
   max-width: 650px;
 }

}

.content { 

 padding: 64px;
 border-radius: 5px;
 box-shadow: 0 0 10px lightgray;
 color: #121212;
 margin-top: 40px;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 font-family: "lato-light";

} @media (max-width: 800px) { 

 .content {
   margin: 0 auto;
   box-shadow: unset;
   padding: 35px;
   width: 100%;
   box-sizing: border-box;
 }

} @media (max-width: 400px) { 

 .content {
   padding: 20px;
 }

} .content p:first-child { 

 margin-top: 0;

} .content ul, .content ol { 

 font-family: "lato-light", sans-serif;

} .content ul { 

 padding-inline-start: 20px;
 list-style-image: none;
 list-style-type: none;

} .content ul li { 

 display: flex;

} .content ul li::before { 

 content: "•";
 color: #6281ef;

} .content .splide ul li::before { 

 content: unset;

} .content li { 

 margin: 10px;

} .content li::marker { 

 color: #6281ef;
 font-family: "lato-heavy";
 font-size: 1.3em;

} .content h4, .content h5 { 

 font-family: "montserrat-bold", sans-serif;
 font-size: 1.2em;
 text-transform: uppercase;
 margin-block-end: 0.2em;
 margin-block-start: 60px;

} .content h5 { 

 font-size: 1em;

} .content a { 

 color: #2e64ec;
 text-decoration: none;
 text-align: center;
 cursor: pointer;

} .content a.citation { 

 font-size: 0.6em;
 vertical-align: super;

} .content a button { 

 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "lato-semibold", sans-serif;
 color: #FAFAFC;
 padding: 32px 56px;
 font-size: 1.2rem;
 max-width: 7;
 text-align: center;
 border-radius: 1000px;
 margin: 40px auto;
 transition: 0.3s ease-out;
 background-color: #6281ef;
 box-shadow: 0 16px 32px -12px #3658cf;
 border: none;
 position: relative;
 top: 0;
 font-variant-position: normal;
 cursor: pointer;
 text-transform: uppercase;

} .content a button:hover { 

 top: -5px;
 box-shadow: 0 16px 32px -16px #3658cf;

} .content p b { 

 font-family: "lato-regular", sans-serif;
 color: #000;

} .content p a:not(.citation) { 

 text-decoration: none;
 font-variant-position: normal;
 color: #121212;
 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 transition: 0.3s ease-out;

} .content p a:not(.citation):hover { 

 box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;

}

_::-webkit-full-page-media, _:future,

root {
 transition-duration: unset;

}

.photos-wrapper.full-width { 

 width: 100%;

} .photos-wrapper.full-width::after { 

 transform: rotate(180deg) translate(-520px, 50px);

} .photos-wrapper .photos { 

 padding: 20px;
 height: fit-content;
 width: 100%;
 box-sizing: border-box;
 overflow: hidden;

} .photos-wrapper .photos.phone { 

 display: flex;
 justify-content: space-around;

} .photos-wrapper .photos.phone img { 

 height: 400px;
 border-radius: 0;
 box-shadow: none;
 max-width: none;
 max-height: none;
 width: auto;

} .photos-wrapper .photos.photo-grid { 

 display: grid;
 align-items: center;
 justify-items: center;

} .photos-wrapper .photos.photo-grid.three-part { 

 grid-template-columns: 1fr 1fr 1fr;

} .photos-wrapper .photos.photo-grid.two-part { 

 grid-template-columns: 1fr 1fr;

} .photos-wrapper .photos.photo-grid.one-part { 

 grid-template-columns: 1fr;

} .photos-wrapper .photos.photo-grid.round-corners img { 

 border-radius: 200px;

} .photos-wrapper .photos.photo-grid.no-shadow img { 

 box-shadow: none;

} .photos-wrapper .photos.photo-grid.pie img { 

 width: 70%;

} .photos-wrapper .photos.photo-grid img { 

 box-shadow: 5px 5px 7px #00000029;
 width: 90%;

} .photos-wrapper.half-width { 

 width: 50%;
 align-self: center;

} .photos-wrapper.half-width .photos { 

 height: fit-content;

} .photos-wrapper.half-width .photos img { 

 width: 100%;

} .photos-wrapper.half-width::after { 

 transform: rotate(180deg) translate(-235px, 50px);

}

video { 

 width: 100%;

}

.content p.photo-desc { 

 text-align: left !important;
 font-size: 0.8em !important;

} @media (max-width: 800px) { 

 .content p.photo-desc {
   font-size: 0.6em;
 }

}

.references { 

 font-size: 1.9rem;

} .references svg { 

 max-width: 100px;

} .references h3 { 

 margin-block-start: 0em;
 font-size: 0.8em;
 font-family: "montserrat-bold", sans-serif;

} .references ol { 

 margin: initial;
 padding-inline-start: 10px;

} .references ol li { 

 font-size: 0.4em;
 font-family: "lato-light", sans-serif;

} .references ol li::marker { 

 color: initial;
 font-family: "lato-light", sans-serif;
 font-size: 1em;

}