body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
width: 100%; height: 45vh; background-color: #121212; background-image: url(); background-size: cover; color: #FAFAFC; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;
} .introContainer .heading {
font-family: "montserrat-black"; font-size: calc(4.7vw + 11px); text-transform: uppercase; padding-left: 10vw; line-height: 0.9;
} .introContainer .heading.other {
padding-left: 0; padding-right: 10vw; margin-bottom: 20px; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FAFAFC;
}
.milkWave {
z-index: 2; width: 100%; top: 0; height: calc(45vh + 2px); 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; box-sizing: border-box; min-height: calc(55vh - 18px); background-color: #FAFAFC; background-image: url(), url(
); background-repeat: no-repeat, repeat-y; background-size: 100%, 100%; color: #121212; padding: 7vw 10vw 72px; display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch;
} @media (max-aspect-ratio: 14/11) {
main { padding: 7vw 7vw 72px; }
} main .collabSingle {
display: grid; grid-template-rows: auto auto; grid-template-columns: auto auto; box-sizing: border-box;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle { grid-template-rows: auto auto auto; grid-template-columns: 1fr; justify-items: center; }
} main .collabSingle + .collabSingle {
margin-top: 64px;
} main .collabSingle .name {
grid-row: 1; grid-column: 1/3; margin-bottom: 16px; font-family: "montserrat-black"; font-size: calc(2.5vw + 12px); text-transform: uppercase; text-align: center; margin-bottom: 2vw;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle .name { grid-column: 1; }
} main .collabSingle .text {
grid-row: 2; grid-column: 1; text-align: justify; margin-right: 4vw; font-size: 1.2rem;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle .text { grid-row: 3; margin-right: unset; }
} @media (max-width: 480px) {
main .collabSingle .text { font-size: 1rem; }
} main .collabSingle .photos {
grid-row: 2; grid-column: 2; display: flex; flex-direction: row; align-items: center; margin: 2vw 0;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle .photos { grid-row: 2; grid-column: 1; margin: 6vw 0; }
} main .collabSingle .photos span {
box-sizing: border-box; display: inline-block; border-radius: 1000px; width: 22vw; height: 22vw; background-position: center; background-size: cover; position: relative;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle .photos span { width: 40vw; height: 40vw; }
} main .collabSingle .photos span:first-child {
margin-right: -3vw; z-index: 2; overflow: hidden;
} main .collabSingle .photos span:first-child::before {
content: ""; width: 100%; height: 100%; display: inline-block; margin-left: 16vw; border-radius: 1000px 0 0 1000px; box-sizing: border-box; background-color: #6281EF; opacity: 0.7;
} @media (max-aspect-ratio: 1/1) {
main .collabSingle .photos span:first-child::before { margin-left: 34vw; }
} main .collabSingle .photos span:last-child {
margin-left: -3vw;
}