Template:Vilnius-Lithuania/CSS/Team

.introContainer .memberDiv .memberName > a, main .instructorList .arrowMore, #bodyContent .instructor .instructorName a { 

 cursor: pointer;
 transition: transform 0.3s;

} .introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover, #bodyContent .instructor .instructorName a:hover { 

 transform: translateY(-2px);

} .introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active, #bodyContent .instructor .instructorName a:active { 

 transform: translateY(2px);

}

body, html { 

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

}

.introContainer { 

 flex-direction: column-reverse;
 justify-content: center;
 align-items: center;
 height: calc(100vh + 8vw);
 background-image: url(T--Vilnius-Lithuania--backgroundWaves.png);
 background-size: cover;

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

 @-moz-document url-prefix() {
   .introContainer {
     min-height: 90vh;
     max-height: 90vh;
   }
 }

} .introContainer .heading { 

 position: absolute;
 font-size: 12vh;
 top: 6vw;
 left: calc(24vw - 5vh);
 pointer-events: none;
 font-family: "montserrat-black";
 color: #6281EF;
 text-align: center;
 line-height: 1;
 transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1);

} .introContainer .heading div { 

 display: inline;

} .introContainer .heading.novideo { 

 font-size: 10vh;
 left: 4vw;

} .introContainer .heading.other { 

 top: 7vw;
 left: calc(22vw - 5vh);
 padding-top: unset;
 color: transparent;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: #6281EF;

} .introContainer .heading.other.novideo { 

 left: 2vw;

} .introContainer .heading.other .invisible { 

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

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

 .introContainer .heading {
   font-size: 10vw;
   top: calc(43vh - 40vw);
   left: 10vw;
 }
 .introContainer .heading br {
   display: none;
 }
 .introContainer .heading.novideo {
   font-size: 8vw;
   left: 18vw;
   top: calc(6vh + 20px);
 }
 .introContainer .heading.other {
   font-size: 10vw;
   top: calc(43vh - 39vw);
   left: 8vw;
 }
 .introContainer .heading.other.novideo {
   font-size: 8vw;
   left: 16vw;
   top: calc(7vh + 20px);
 }

} .introContainer::before { 

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

} .introContainer > span { 

 position: absolute;
 margin-bottom: 14vh;
 left: calc(32vw - 5vh);
 width: calc(10vh + 36vw);
 height: calc(10vh + 36vw);
 background-attachment: unset;
 background-position: center;
 background-size: cover;
 overflow: hidden;
 align-self: center;
 font-weight: bold;
 transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s;

} .introContainer > span video { 

 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span.novideo { 

 left: 15vw;
 width: calc(10vh + 30vw);
 height: calc(10vh + 30vw);

} .introContainer > span.novideo video { 

 opacity: 0;

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

 .introContainer > span {
   top: 45vh;
   transform: translateY(-50%);
   left: 12vw;
   width: 76vw;
   height: 76vw;
 }
 .introContainer > span.novideo {
   left: calc(35vw - 10vh);
   top: calc(10vw + 20px);
   padding-bottom: unset;
   width: calc(20vh + 30vw);
   height: calc(20vh + 30vw);
   transform: translateY(0%);
 }

} .introContainer > span > div { 

 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 background-size: cover;
 background-position: center;
 opacity: 0;
 transition: opacity 400ms;
 border-radius: 1000px;

} .introContainer > span > div.transition { 

 opacity: 1;

} .introContainer button.introVideoPlay { 

 display: block;
 position: absolute;
 margin-bottom: 14vh;
 top: calc(35vh + 10vw);
 left: 14vw;
 width: 5vw;
 height: 5vw;
 border: unset;
 opacity: 0;
 pointer-events: none;
 background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg");
 background-size: 40% 40%;
 background-repeat: no-repeat;
 background-position: 56% 50%;
 cursor: pointer;
 padding: 0;
 border-radius: 1000px;
 background-color: #6281EF;
 transition: 0.3s;

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

 .introContainer button.introVideoPlay {
   top: calc(40vw + 20px);
   left: calc(31.5vw - 10vh);
   width: 5vh;
   height: 5vh;
 }

} .introContainer button.introVideoPlay.novideo { 

 pointer-events: unset;
 opacity: 1;

} .introContainer button.introVideoPlay:hover { 

 transform: scale(1.1);

} .introContainer .memberDiv { 

 position: absolute;
 left: calc(50vw + 10vh);
 width: calc(40vw - 10vh);
 margin-bottom: 18vh;
 color: #FAFAFC;
 transition: unset;
 font-family: "montserrat-light";

} .introContainer .memberDiv.transition { 

 opacity: 0;
 transition: opacity 400ms;

} .introContainer .memberDiv.alternative { 

 transition: opacity 400ms;
 opacity: 0;

} .introContainer .memberDiv.alternative.transition { 

 opacity: 1;

} .introContainer .memberDiv .memberName { 

 font-family: "montserrat-bold";
 font-size: calc(2.2vw + 1vh);
 text-transform: uppercase;
 display: flex;
 align-items: flex-end;
 flex-wrap: wrap;

} .introContainer .memberDiv .memberName span { 

 margin-right: calc((2.2vw + 1vh) * 0.5);

} .introContainer .memberDiv .memberName > a, #bodyContent .instructor .instructorName a { 

 display: inline-block;
 width: calc((2.2vw + 1vh) * 0.8);
 height: calc((2.2vw + 1vh) * 0.8);
 padding-right: 0 !important;
 background-image: url(T--Vilnius-Lithuania--iconLinkedIn.png) !important;
 background-size: 100% !important;
 background-position: center !important;
 background-repeat: no-repeat;
 margin-bottom: calc((2.2vw + 1vh) * 0.2);

}

  1. bodyContent .instructor .instructorName a {
 background-image: url(T--Vilnius-Lithuania--iconLinkedInBlue.png) !important;
 width: 1rem;
 height: 1rem;
 margin-left: 8px;
 margin-bottom: 0;

} .introContainer .memberDiv .memberRole, .introContainer .memberDiv .memberStudy { 

 font-size: calc(1.2vw + 1vh);
 text-transform: uppercase;
 margin: 8px 0 0;

} .introContainer .memberDiv .memberStudy { 

 margin-bottom: 20px;

} .introContainer .memberDiv .memberQuestion { 

 font-family: "montserrat-bold";
 font-size: calc(1.2vw + 1vh);
 margin-bottom: 8px;

} .introContainer .memberDiv .memberFunFact { 

 font-size: calc(0.5vw + 1.5vh);

} .introContainer .memberDiv b { 

 font-family: "montserrat";
 box-shadow: inset 0 -0.5em 0 -1px #6281EF;

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

 .introContainer .memberDiv {
   padding: 0 10vw;
   left: 0;
   top: 50vw;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: calc(100vh - 60vw);
   width: unset;
 }
 .introContainer .memberDiv .memberName {
   font-size: 3.3vh;
 }
 .introContainer .memberDiv .memberName > a {
   width: 2.6vh;
   height: 2.6vh;
   margin-bottom: 0.6vh;
 }
 .introContainer .memberDiv .memberRole {
   font-size: 2.7vh;
 }
 .introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact {
   font-size: 2.2vh;
 }

} .introContainer .bubbleList { 

 position: absolute;
 top: calc(90vh - 66px);
 width: 100%;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 box-sizing: border-box;
 overflow-x: hidden;
 overflow-y: hidden;
 padding: 16px;

} .introContainer .bubbleList::after { 

 content: unset;
 color: transparent;

} @media (max-aspect-ratio: 121/66) { 

 .introContainer .bubbleList {
   max-width: calc(69vh + 120px);
   top: calc(80vh - 96px);
 }

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

 .introContainer .bubbleList {
   max-width: unset;
   flex-wrap: nowrap;
   padding: unset;
   overflow-x: auto;
   justify-content: start;
   top: calc(90vh - 40px);
   padding: 0 8vw;
 }
 .introContainer .bubbleList::after {
   content: ".";
 }

} .introContainer .bubbleList > span { 

 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background-position: center;
 background-size: cover;
 background-color: #6281EF;
 border-radius: 1000px;
 min-width: 10vh;
 min-height: 10vh;
 max-width: 10vh;
 max-height: 10vh;
 margin: 10px;
 transform: scale(1);
 color: transparent;
 transition: transform 0.3s, color 0.3s;
 font-family: "montserrat-bold";

} .introContainer .bubbleList > span > span { 

 font-size: 1rem;
 z-index: 1;
 pointer-events: none;

} .introContainer .bubbleList > span::before { 

 content: "";
 display: block;
 width: 100%;
 height: 100%;
 background-color: transparent;
 pointer-events: none;
 transition: background-color 0.3s;
 position: absolute;
 border-radius: 1000px;

} .introContainer .bubbleList > span:hover { 

 transform: scale(1.2);
 color: #FAFAFC;

} .introContainer .bubbleList > span:hover::before { 

 background-color: rgba(0, 0, 0, 0.4);

} .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 { 

 position: absolute;
 z-index: 1;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 transition: opacity 0.5s, visibility 0.5s;

} .introContainer .suggestClick.hidden { 

 opacity: 0;
 pointer-events: none;

} .introContainer .suggestClick span { 

 color: #FAFAFC;
 margin-bottom: unset;
 border-radius: unset;
 font-weight: unset;
 position: static;
 top: unset;
 width: unset;
 height: unset;
 font-family: "montserrat-light";
 font-size: 2.5vh;
 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: 92%;
 width: 8vh;
 height: 8vh;
 margin-right: 8px;

}

.milkWave { 

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

 padding: 50px 10vw 96px;
 box-sizing: border-box;
 flex-direction: column;
 background-image: url(T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(T--Vilnius-Lithuania--backgroundWavesWhite.png);
 background-repeat: no-repeat, repeat-y;
 background-size: 100%, 100%;

} main .heading2 { 

 font-family: "montserrat-black";
 font-size: 4vw;
 font-size: max(4vw, 18px);
 line-height: 0.8;
 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;
 align-items: center;
 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%;
   column-gap: 4vw;
 }

} main .instructorList .instructor img { 

 object-fit: cover;
 width: 16vw;
 height: 16vw;
 border-radius: 1000px;
 box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4);
 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-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;
 text-align: justify;

} @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 .instructor .instructorAbout b { 

 font-family: "montserrat-light";
 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;

} 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: 0vw;

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

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

}