body, html {
margin: 0; padding: 0; color: #121212; font-family: 'lato-regular';
}
.container {
width: 100%; height: calc(100vh - 14px)
}
- waves {
transform: rotate(180deg); background-color: #fafafc
}
- intro-page {
background-color: #121212;
}
- intro-header {
height: 100vh
}
- intro-header svg {
height: 90%;
}
- intro-page #intro-header {
width: 100%; margin: 0 auto; position: absolute; z-index: 4; pointer-events: none
}
- intro-page #intro {
z-index: 4; height: calc(100vh - 14px); width: 100%; top: 0; position: absolute; pointer-events: none
}
- text-wrapper {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, 20%); width: 100%; z-index: 4; pointer-events: none
}
- desc-wrapper {
padding-top: 30px; display: block; width: fit-content; margin: 0 auto;
}
- center-desc {
display: flex; justify-content: center; width: -webkit-fit-content;
}
- desc-wrapper span {
color: white; font-family: "lato-regular"; font-size: 3em; text-align: right;
}
.container h1 {
text-transform: uppercase; font-size: 70px; font-family: "lato-heavy"; text-align: center; margin: 0;
}
- intro-page #intro h1 {
color: #FAFAFC; font-size: 12em; font-family: 'raleway'; text-transform: lowercase; font-weight: 600;
}
- intro-page #intro h1 em {
font-style: initial; font-weight: 300;
}
- bubbles-container {
height: 100vh; position: absolute; width: 100%; box-sizing: border-box;
}
- problem-page,
- links-page {
background-color: #FAFAFC;
}
- problem-page #problem-header h1,
- links-page #links-header h1 {
color: #6281EF
}
- solution-page {
background-color: #121212;
}
- solution-page #solution-header h1 {
color: #FFC43B
}
.big-section {
line-height: 1.7
}
.black-bg {
background-color: #121212;
}
.white-bg {
background-color: #fafafc; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.smallWaves {
position: relative; height: 200px;
}
.lightblue-bg {
background-color: #6281ef; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.brightblue-bg {
background-color: #3356ce; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.darkblue-bg {
background-color: #11348f; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
- storytelling .section {
display: flex; padding: 20px; max-width: calc(100% - 330px); margin: 0 auto;
}
- storytelling .black-bg:first-of-type .section {
padding-bottom: 50px; padding-top: 100px;
}
- storytelling p br {
display: initial;
}
.half {
width: 50%; padding: 20px; box-sizing: border-box;
}
- storytelling p.center {
text-align: center !important;
}
- storytelling .centered {
display: flex; justify-content: center; align-items: center;
}
- storytelling #fish-icon svg {
height: 300px !important;
}
- storytelling p {
font-family: 'montserrat-light'; font-size: 1.3em; text-align: initial;
}
- storytelling p b,
- storytelling h2,
- storytelling h1 {
font-family: 'montserrat-bold';
}
- storytelling h2,
- storytelling h1 {
text-align: center;
}
.black {
color: #121212;
}
.white {
color: #fafafc;
}
- storytelling #secondpart {
height: fit-content; display: flex; flex-direction: column; text-align: center !important;
}
- secondpart .icon {
max-width: 500px; width: 60%
}
.wdt-60 {
max-width: 400px; width: 60%;
}
.wd-60 {
max-width: 700px; width: 60%;
}
.wd-50 {
max-width: 500px; width: 50%;
}
.wdt-80 {
width: 80%; margin: 0 auto;
}
.icon {
padding: 20px; box-sizing: border-box; height: 300px; width: 300px; border-radius: 50px; margin: 0 auto; max-width: 100%;
}
.icon.white {
background-color: #fafafc; color: #121212;
}
.icon.dark {
background-color: rgba(255, 255, 255, 0.1); color: #fafafc;
}
- sick-fish,
- ras-healthy {
position: sticky; top: 20px;
}
h1 {
color: #fafafc;
}
- storytelling #firstpart {
display: block;
}
- storytelling #firstpart .centered {
margin: 0 auto;
}
- storytelling #statistics {
padding: 20px;
}
- storytelling #statistics p {
text-align: center; margin: 0 auto;
}
- storytelling #statistics h1 {
color: #6281ef; font-size: 5em; font-family: 'montserrat-black', sans-serif; margin-block-end: 0em; margin-block-start: 0em; line-height: 1.1; opacity: 81%;
}
- thirdpart,
- fourthpart,
- seventhpart {
width: 80%; margin: 0 auto;
}
- storytelling #fifthpart {
text-align: center !important;
}
- fifthpart .list {
width: 80%; margin: 0 auto
}
- fifthpart .list .list-item {
height: 60px; padding: 10px; display: flex; align-items: center;
}
- fifthpart .list .list-item div {
width: 60px;
}
- fifthpart .list .list-item div img {
width: 50px; height: 50px; padding: 5px;
}
- fifthpart .list .list-item p {
width: calc(100% - 60px); float: right; margin: 0; padding: 5px; color: #fafafc;
}
- sixthpart {
flex-direction: column;
}
.milkWave {
z-index: 2; width: 100%; top: 0px; 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); height: 150px
}
.milkWave.rotate-wave {
transform: rotate(180deg)
}
.milkWave svg {
height: 150px;
}
.milkWave.small {
position: absolute;
}
.yellow {
color: #fcbd1b;
}
- storytelling #bact {
flex-direction: column; text-align: center !important;
}
- storytelling #bact .half {
display: flex; flex-direction: column; align-items: center;
}
- bact .row {
display: inherit;
}
.white-bg .wdt-60 {
text-align: center;
}
- storytelling #fish-symptoms,
- storytelling #fourthpart {
align-items: inherit !important;
}
- fish-symptoms .icon {
margin: 0 auto
}
- fish-symptoms p {
margin-top: 50px
}
- fish-symptoms p:first-child {
margin-top: 0px
}
.title {
text-transform: uppercase
}
- links .nf {
display: inherit; padding-bottom: 10vh;
}
- links .title {
font-size: 2.5em;
}
- links .row {
display: flex; justify-content: center;
}
- links .row object {
height: 150px; padding: 40px 40px 0 40px; cursor: pointer;
}
- links .row .link h1 {
text-transform: uppercase; line-height: 1; margin-block-end: 0; margin-block-start: 0; margin-top: -25px; font-family: 'montserrat-black', sans-serif;
}
.half p {
width: 70%
}
@media (max-width:768px) {
#intro-page #intro h1 { font-size: 4.5em; } #links .row object { height: 20vw; padding: 10px 10px 0 10px; } #links .row .link h1 { font-size: 0.8em; margin-top: -12px; } #intro-page #intro #title::after { font-size: 4em; transform: translate(-53%, -130%); } .content-header { padding-top: 50px } .content-index h1 { font-size: 3.3em; } .half { width: 100%; } .half p { width: initial } .two-parts { flex-direction: column; } #fifthpart .list { width: 80% } #links .row .icon { width: 100px; height: 100px; margin: 5px; padding: 10px; } #storytelling p, #storytelling h1, #storytelling h2, #storytelling h3 { text-align: center !important; } #storytelling p { font-size: 0.8em } .wd-50, .wdt-60 { width: 80% } #storytelling .section { max-width: calc(100% - 50px); } #fishIcon { position: initial; top: initial; }
}
- fixedOverlay nav #header #logo[visible=true] {
opacity: 0;
}
.animation svg {
width: 40vw !important; height: fit-content !important;
}
.animation#dive svg {
height: 20vh !important;
}
.animation#infection svg {
width: 70vw !important; height: 70vh !important;
}
.animation#ras-sick svg, .animation#ras-healthy svg {
width: 35vw !important; height: 40vh !important;
}
.animation#fish-doodle svg {
width: 70vw !important; height: 50vh !important;
}
.white-bg.smallWaves {
background-color: transparent; margin-top: -150px;
}
@media screen and (max-width: 767px) {
.animation svg { width: 80vw !important; } .animation#infection svg { width: 70vw !important; height: 44vh !important; } .animation#ras-sick svg, .animation#ras-healthy svg { width: 70vw !important; height: 22vh !important; } .animation#fish-doodle svg { width: 70vw !important; height: 22vh !important; } .white-bg.smallWaves { background-color: transparent; margin-top: -150px; } .animation#sick-fish svg { width: 70vw !important; height: 16vh !important; } #storytelling .black-bg:first-of-type .section { padding-top: 30px; padding-bottom: 10px; }
}