Template:Vilnius-Lithuania/CSS/Team

body, html {

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

}

.introContainer {

 flex-direction: column-reverse;
 justify-content: flex-start;
 align-items: flex-start;
 position: fixed;
 height: calc(100vh + 4vw);

} .introContainer .heading {

 position: absolute;
 font-size: 6vh;
 top: 6vh;
 pointer-events: none;
 font-family: "montserrat-black";
 text-align: center;
 line-height: 1;

} .introContainer .heading div {

 display: inline;

} .introContainer .heading.other {

 top: 8vh;

} .introContainer .heading.other .invisible {

 color: transparent;
 -webkit-text-stroke-width: 0;
 -webkit-text-stroke-color: transparent;

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

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

} .introContainer::before {

 content: unset;
 display: none;
 background-image: unset;

} .introContainer span {

 position: absolute;
 color: #FAFAFC;
 top: 7vw;
 width: 70vw;
 height: 70vw;
 background-attachment: unset;
 overflow: hidden;
 align-self: center;
 font-weight: bold;

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

 .introContainer span {
   top: 7vh;
   width: 70vh;
   height: 70vh;
 }

} .introContainer span.novideo video {

 display: none;

} .introContainer span video {

 width: 100%;
 height: 100%;
 object-fit: cover;

} .introContainer button.introVideoPlay {

 position: absolute;
 top: 55vw;
 left: 15vw;
 width: 64px;
 height: 64px;
 border: unset;
 display: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 50% 50%;
 background-repeat: no-repeat;
 background-position: 58% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;

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

 .introContainer button.introVideoPlay {
   top: 55vh;
   left: calc(50vw - 35vh);
 }

} .introContainer button.introVideoPlay.novideo {

 display: block;

} .introContainer .memberDiv {

 position: absolute;
 left: 62vw;
 top: 40vh;
 color: #FAFAFC;
 padding-right: 16px;

} .introContainer .memberDiv div {

 margin: 8px 0;

} .introContainer .memberDiv #memberName {

 font-family: "montserrat-bold";
 font-size: 3.25vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberRole {

 font-family: "lato-light";
 font-size: 2.75vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberFunFact {

 font-size: 2.5vh;
 font-weight: normal;

} @media (max-aspect-ratio: 12/16) {

 .introContainer .memberDiv {
   padding: 0 32px;
   left: 0;
   top: 76vw;
 }

} .introContainer .bubbleList {

 margin-bottom: calc(24px + 4vw);
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: start;
 flex-wrap: nowrap;
 box-sizing: border-box;
 overflow-x: auto;
 overflow-y: hidden;

} .introContainer .bubbleList::after {

 content: ".";
 color: transparent;

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

 .introContainer .bubbleList {
   padding: 16px;
   flex-wrap: wrap;
   overflow-x: hidden;
   justify-content: center;
 }
 .introContainer .bubbleList::after {
   content: unset;
 }

} .introContainer .bubbleList span {

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-position: center;
 background-color: #6281EF;
 border-radius: 10vw;
 position: static;
 max-width: 10vh;
 max-height: 10vh;
 min-width: 10vh;
 min-height: 10vh;
 margin: 10px;
 transform: scale(1);
 transition: transform 0.3s;

} .introContainer .bubbleList span:hover {

 transform: scale(1.2);

} .introContainer .bubbleList::-webkit-scrollbar {

 background-color: transparent;
 border-radius: 10px;
 height: 8px;
 width: 8px;

} .introContainer .bubbleList::-webkit-scrollbar-thumb {

 background-color: #444444;
 border-radius: 10px;

} .introContainer .bubbleList::-webkit-scrollbar-corner {

 background: transparent;

} .introContainer .suggestClick {

 z-index: 1;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 margin-left: 6vw;
 transition: opacity 0.5s;

} .introContainer .suggestClick.hidden {

 opacity: 0;
 pointer-events: none;

} .introContainer .suggestClick span {

 border-radius: unset;
 font-weight: unset;
 position: static;
 top: unset;
 width: unset;
 height: unset;
 font-family: "lato-light";
 font-size: 16px;
 align-self: start;

} .introContainer .suggestClick::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/6/69/T--Vilnius-Lithuania--arrowBlueLeftDown.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: 91%;
 width: 64px;
 height: 64px;
 margin-right: 8px;

}

.milkWave {

 z-index: 2;
 width: 100%;
 height: calc(100vh + 4vw);
 position: relative;
 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 {

 padding: 50px 10vw 96px;
 box-sizing: border-box;
 flex-direction: column;

} main .heading2 {

 font-family: "montserrat-black";
 font-size: 4vw;
 font-size: max(4vw, 18px);
 line-height: 1;
 text-transform: uppercase;
 display: block;
 width: 100%;
 text-align: end;
 color: #222222;

} main .heading2.other {

 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #222222;

} main .instructorList {

 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;

} main .instructorList .instructor {

 margin-top: 50px;
 display: grid;
 grid-template-columns: auto;
 grid-template-rows: 16vw 5vw auto;
 column-gap: 28px;
 row-gap: 4px;
 width: 20%;
 justify-items: center;

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

 main .instructorList .instructor {
   grid-template-columns: 32vw auto;
   grid-template-rows: 10vw auto;
   width: 100%;
 }

} main .instructorList .instructor img {

 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 border: 2px solid #6281EF;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

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

 main .instructorList .instructor img {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .filter {

 width: 16vw;
 height: 16vw;
 border: 2px solid #6281EF;
 border-radius: 1000px;
 background-color: #6281EF;
 mix-blend-mode: hue;
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 1;
 grid-row-end: 2;

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

 main .instructorList .instructor .filter {
   width: 32vw;
   height: 32vw;
   grid-column-start: 1;
   grid-column-end: 2;
   grid-row-start: 1;
   grid-row-end: 3;
 }

} main .instructorList .instructor .instructorName {

 display: flex;
 align-items: flex-end;
 font-size: 1.4vw;
 font-family: "montserrat-bold";
 text-transform: uppercase;
 color: #6281EF;
 text-align: start;
 width: 100%;
 white-space: nowrap;
 /* risky */
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 2;
 grid-row-end: 3;

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

 main .instructorList .instructor .instructorName {
   font-size: 4vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 1;
   grid-row-end: 2;
 }

} main .instructorList .instructor .instructorAbout {

 font-size: 1.6vw;
 font-family: "lato-light";
 grid-column-start: 1;
 grid-column-end: 2;
 grid-row-start: 3;
 grid-row-end: 4;

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

 main .instructorList .instructor .instructorAbout {
   font-size: 3.6vw;
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 2;
   grid-row-end: 3;
 }

} main .instructorList .arrowMore {

 margin-top: 3em;
 width: 50%;
 height: 16vw;
 text-decoration: none;
 display: flex;
 align-items: center;

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

 main .instructorList .arrowMore {
   width: 100%;
   height: 32vw;
 }

} main .instructorList .arrowMore::before {

 content: "";
 display: block;
 background-image: url(https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--arrowMore.svg);
 background-repeat: no-repeat;
 background-position: 5vw center;
 width: 16vw;
 height: 16vw;

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

 main .instructorList .arrowMore::before {
   width: 32vw;
   height: 32vw;
   background-position: 10vw center;
 }

} main .instructorList .arrowMore span {

 color: #222222;
 font-family: "montserrat-bold";
 font-size: 3vw;
 margin-left: 2vw;

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

 main .instructorList .arrowMore span {
   margin-left: 4vw;
   font-size: 5vw;
 }

}