Template:Vilnius-Lithuania/CSS/ContentPage

@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,
   #HQ_page main .content .content-paragraph,
   #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 .beforeWave,

  1. HQ_page main .content .quote .beforeWave {
   align-self: center;

}

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;
   }

}

.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 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 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;

}