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; } .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; } .lightblue-bg b em { font-style: normal; font-family: 'montserrat-bold', sans-serif; } .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.9em; text-align: center; padding: 20px 0; } #storytelling .lightblue-bg p, #storytelling .brightblue-bg p, #storytelling .darkblue-bg p { text-align: left; } #storytelling p b, #storytelling h2, #storytelling h1 { font-family: 'montserrat-bold'; } #storytelling h2, #storytelling h1 { text-align: center; font-size: 2.5em; } #storytelling h1 { font-size: 2.7em; } .black { color: #121212; } .white { color: #fafafc; } #storytelling #secondpart, #storytelling #fourthpart, #storytelling #fish-symptoms { height: fit-content; display: flex; flex-direction: column; text-align: center !important; } #secondpart .icon { max-width: 500px; width: 60% } .wdt-60 { max-width: 500px; width: 60vw; } .wd-60 { max-width: 700px; width: 60vw; } .wd-50 { max-width: 500px; width: 50vw; } .wdt-80 { width: 80vw; 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; } h1 { color: #fafafc; } #storytelling #firstpart { display: block; } #storytelling #firstpart .centered { margin: 0 auto; } #storytelling #statistics { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } #storytelling #statistics p { text-align: center; margin: 0 10px; } #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: fit-content; 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(70% - 60px); float: right; margin: 0 auto; 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; } #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; transform: translateY(-100px); } #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: 90% } @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; } #links { padding-bottom: 30px; } #links .section { padding: 0px; } .animation svg { width: 40vw !important; height: fit-content !important; } .animation#dive svg { width: 50vw !important; height: 30vh !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; } }