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; top: 6px; position: relative; } #intro-header { height: 100vh } #intro-header svg { height: 85%; } #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; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } #intro-page #intro #title-wrapper { height: 85vh; display: flex; align-items: center; } #intro-page #intro h1 { color: #6281ef; font-size: 11vw; font-family: 'raleway', sans-serif; text-transform: lowercase; font-weight: 600; text-align: center; margin: 0; z-index: 5; /* text-shadow: 0px 0px 11px #00000029; */ } #intro-page #intro h1 em { font-style: initial; font-weight: 300; } #intro-page #intro #desc-wrapper { height: 15vh; display: flex; align-items: center; } #intro-page #intro #desc-wrapper img { width: 700px; max-width: 85vw; } #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: 50px 0; } #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 #fourthpart p { padding-bottom: 100px; } #storytelling #fifthpart h2 { width: fit-content; margin: 0 auto; padding-bottom: 40px; font-family: 'montserrat-light', sans-serif; } #storytelling #fifthpart h2 b { font-family: 'montserrat-bold', sans-serif; } #storytelling h1 { font-size: 2.7em; } #storytelling .white-bg h1 { font-size: 7vw; margin-block-end: 0; } #storytelling #threebacsec .white-bg h1 { font-family: 'montserrat-light', sans-serif; font-size: 5em; } #storytelling .white-bg .bact { font-style: italic; } #storytelling .white-bg .cause { height: 100px; } #storytelling #sixthpart h1 { font-size: 6em; text-align: left; width: 65vw; padding: 0 0 50px 0; font-family: 'montserrat-light', sans-serif; margin-block-start: 0; } #storytelling #sixthpart { padding-bottom: 0; } #storytelling #seventhpart { padding-top: 0; } #storytelling #seventhpart p { padding-top: 0; margin-top: 0; } #storytelling #sixthpart h1 b { font-family: 'montserrat-bold', sans-serif; } #storytelling #threebacsec .black-bg h1 { font-family: 'montserrat-light', sans-serif; font-size: 4em; line-height: 1.2; } #storytelling #threebacsec .black-bg h1 b { font-family: 'montserrat-black', sans-serif; } .black { color: #121212; } .white { color: #fafafc; } #storytelling #secondpart, #storytelling #fourthpart, #storytelling #seventhpart, #storytelling #fish-symptoms { height: fit-content; display: flex; flex-direction: column; text-align: center !important; } #secondpart .icon { max-width: 500px; width: 60% } .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; align-items: end; padding-top: 0px; padding-bottom: 100px; } #storytelling #statistics p { text-align: center; margin: 0 10px; font-size: 1.5em; align-self: baseline; width: 40vh; margin: 0 auto; } #storytelling #statistics h1 { color: #6281ef; font-size: 7em; font-family: 'montserrat-black', sans-serif; margin-block-end: 0em; margin-block-start: 0em; line-height: 1.1; } #thirdpart, #fourthpart, #seventhpart { width: 80%; margin: 0 auto; } #storytelling #fifthpart { text-align: center !important; } #fifthpart .list { width: 40vh; margin: 0 auto } #fifthpart .list .list-item { height: fit-content; padding: 10px; display: flex; align-items: center; } #fifthpart .list .list-item div { width: 90px; } #fifthpart .list .list-item div img { width: 85px; height: auto; padding: 5px; } #fifthpart .list .list-item p { width: calc(70% - 60px); float: right; margin: 0 auto; padding: 5px; color: #fafafc; font-size: 1.6em; align-self: center; } #sixthpart { flex-direction: column; } .milkWave { z-index: 2; width: 100%; top: 4px; 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); top: -4px; } .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% } #fixedOverlay nav #header #logo[visible=true] { opacity: 0; } #links { padding-bottom: 30px; } #links .section { padding: 0px; } b.emphasize { font-size: 1.5em; } .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; } #sick-fish.animation svg { height: 30vh !important; } #sick-fish { padding: 50px 0; } .animation#ras-sick svg, .animation#ras-healthy svg { width: 35vw !important; height: 40vh !important; } .animation#ras-sick svg { width: 50vw !important; } .animation#fish-doodle svg { width: 53vw !important; height: 50vh !important; } .animation#threeBac svg { width: 30vw !important; height: 27vh !important; } .animation#bacHorizontal svg { width: 100vw !important; } .white-bg.smallWaves { background-color: transparent; margin-top: -150px; } #storytelling .wdt-60 { max-width: 500px; width: 40vw; } #storytelling .wd-60 { max-width: 700px; width: 40vw; } #storytelling .wd-50 { max-width: 800px; width: 50vw; } #storytelling .wdt-80 { width: 80vw; margin: 0 auto; } .animation#threeBac { display: flex; justify-content: center; } #storytelling #threebacsec .milkWave:last-of-type { top: 3px; } #storytelling #die-offs { flex-direction: column; padding-bottom: 0; } #storytelling #die-offs .wd-60 { padding-bottom: 50px; } #storytelling #die-offs img { width: 40vw; max-width: 400px; } @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#dive svg { width: 65vw !important; height: 23vh !important; } .animation#sick-fish svg { width: 70vw !important; height: 16vh !important; } .animation#threeBac svg { width: 59vw !important; height: 18vh !important; } #storytelling .black-bg:first-of-type .section { padding-top: 30px; padding-bottom: 10px; } } @media (max-width:768px) { #intro-page #intro h1 { font-size: 20vw; } #intro-header svg { height: 100vh; } #intro-page #intro #title-wrapper { height: 55vh; } #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; } #storytelling .white-bg .bact { font-size: 1em; } #storytelling .white-bg .cause { height: 65px; } #storytelling #fifthpart .half { width: 100%; } #storytelling #fifthpart .half h2 { font-size: 1.8em; } #fifthpart .list .list-item div { width: 60px; } #fifthpart .list .list-item div img { width: 55px; } #fifthpart .list .list-item p { font-size: 1em; width: calc(90% - 60px); } #storytelling #sixthpart h1 { font-size: 2.4em; text-align: left !important; padding: 50px 0 100px 0; } .half p { width: initial } .two-parts { flex-direction: column; } .white-bg .row { width: 90%; } #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: 1em } #storytelling .wd-50, #storytelling .wd-60, #storytelling .wdt-60 { width: 80% } #storytelling .section { max-width: calc(100% - 50px); } #fishIcon { position: initial; top: initial; } #storytelling #statistics { grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(4, 1fr); } #storytelling #statistics h1 { font-size: 4em; } #storytelling #statistics p { font-size: 1em; } #statistics *:nth-of-type(1) { order: 1; } #statistics *:nth-of-type(2) { order: 3; } #statistics *:nth-of-type(3) { order: 2; } #statistics *:nth-of-type(4) { order: 4; } #storytelling #threebacsec .white-bg h1 { font-size: 3em; } #storytelling #threebacsec .black-bg h1 { font-size: 2.5em; } }