Template:Vilnius-Lithuania/CSS/Team

body, html {

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

}

.introContainer {

 flex-direction: column-reverse;
 justify-content: space-between;

} .introContainer .heading {

 position: absolute;
 font-size: 6vh;
 top: 6vh;
 pointer-events: none;
 font-family: "ubuntu-bold";

} .introContainer .heading.other {

 top: 8vh;

} @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: 60vw;
 height: 60vw;
 background-attachment: unset;
 overflow: hidden;
 font-weight: bold;

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

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

} .introContainer span.novideo video {

 display: none;

} .introContainer span video {

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

} .introContainer button.introVideoPlay {

 position: absolute;
 top: 52vw;
 left: 20vw;
 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: 52vh;
   left: calc(50vw - 30vh);
 }

} .introContainer button.introVideoPlay.novideo {

 display: block;

} .introContainer .memberDiv {

 position: absolute;
 left: 62vw;
 top: 46vh;
 color: #FAFAFC;

} .introContainer .memberDiv div {

 margin: 8px 0;

} .introContainer .memberDiv #memberName {

 font-family: "lato-heavy";
 font-size: 3.25vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberRole {

 font-size: 2.75vh;
 text-transform: uppercase;

} .introContainer .memberDiv #memberFunFact {

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

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

 .introContainer .memberDiv {
   left: 5vw;
 }

} .introContainer .bubbleList {

 margin-bottom: 32px;
 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-color: #6281EF;
 border-radius: 10vw;
 position: static;
 max-width: 9vh;
 max-height: 9vh;
 min-width: 9vh;
 min-height: 9vh;
 margin: 12px;
 transform: scale(1);
 transition: transform 0.3s;

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

 .introContainer .bubbleList span {
   width: 9vh;
   height: 9vh;
 }

} .introContainer .bubbleList span:hover {

 transform: scale(1.2);

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

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

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

 background-color: #444444;
 -webkit-box-shadow: 0px 0px 10px 0px #444444;
 -moz-box-shadow: 0px 0px 10px 0px #444444;
 box-shadow: 0px 0px 10px 0px #444444;
 border-radius: 10px;

}

main {

 margin-top: 0;
 padding-top: 50px;

}