body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
width: 100%; height: 45vh; background-color: #121212; color: #FAFAFC; display: flex; flex-direction: column; justify-content: center; align-items: center;
} .introContainer .heading {
font-family: "montserrat-black"; font-size: calc(4.5vw + 10px); text-transform: uppercase; padding-left: 10vw;
} .introContainer .heading.other {
padding-left: 0; padding-right: 10vw; 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 {
box-sizing: border-box; min-height: calc(55vh - 18px); background-color: #FAFAFC; color: #121212; padding: 32px 6vw 32px 12vw; display: flex; justify-content: space-evenly; align-items: stretch;
} main .collabInfo {
box-sizing: border-box; padding-right: 64px; display: flex; flex-direction: column;
} main .collabInfo .name {
font-family: "montserrat-black"; font-size: 1.4rem; text-transform: uppercase; margin-bottom: 12px;
} main .collabInfo .text {
font-size: 1.2rem;
} main .collabInfo .controls {
flex-grow: 1; margin-top: 32px; display: flex; justify-content: center;
} main .collabInfo .controls > div {
flex-grow: 1; display: flex; flex-direction: row; justify-content: space-evenly; align-items: flex-end; max-width: 400px;
} main .collabInfo .controls .previous, main .collabInfo .controls .next {
border-radius: 1000px; width: 64px; height: 64px; background-image: url(https://static.igem.org/mediawiki/2020/1/15/T--Vilnius-Lithuania--arrowNext.svg); background-repeat: no-repeat; background-position: center; cursor: pointer; transition: transform 0.2s ease-out;
} main .collabInfo .controls .previous:hover, main .collabInfo .controls .next:hover {
transform: scale(1.1);
} main .collabInfo .controls .previous {
transform: scaleX(-1);
} main .collabInfo .controls .previous:hover {
transform: scaleX(-1) scale(1.1);
} main .collabInfo .controls .select {
flex-grow: 1; height: 64px; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;
} main .collabInfo .controls .select span {
box-sizing: border-box; width: 16px; height: 16px; border-radius: 1000px; display: inline-block; border: 2px solid #121212; background-color: transparent; transition: 0.3s; cursor: pointer;
} main .collabInfo .controls .select span.active {
background-color: #121212;
} main .collabInfo .controls .select span:hover {
transform: scale(1.2);
} main .collabPhotos {
display: flex; flex-direction: row; align-items: center;
} main .collabPhotos span {
box-sizing: border-box; display: inline-block; border-radius: 1000px; width: 25vw; height: 25vw; background-position: center; background-size: cover; position: relative;
} main .collabPhotos span:first-child {
margin-right: -3vw; z-index: 2; overflow: hidden;
} main .collabPhotos span:first-child::before {
content: ""; width: 100%; height: 100%; display: inline-block; margin-left: 19vw; border-radius: 1000px 0 0 1000px; box-sizing: border-box; background-color: #6281EF; opacity: 0.7;
} main .collabPhotos span:last-child {
margin-left: -3vw;
} @media (max-aspect-ratio: 3/2) {
main { padding: 7vw; flex-direction: column-reverse; justify-content: unset; align-items: flex-start; } main .collabInfo { padding-right: 0; } main .collabPhotos { margin-bottom: 48px; align-self: center; } main .collabPhotos span { width: 42vw; height: 42vw; } main .collabPhotos span:first-child::before { margin-left: 36vw; }
}