(43 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | body, | + | body, |
− | html { | + | 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: 65vh; | ||
+ | display: flex; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | #intro-page #intro h1 { | ||
+ | color: rgb(103, 155, 244); | ||
+ | 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 4px #fafafc; | ||
+ | } | ||
+ | |||
+ | #intro-page #intro h1 em { | ||
+ | font-style: initial; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #intro-page #intro #desc-wrapper { | ||
+ | height: 20vh; | ||
+ | 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; | ||
+ | font-size: 3vw; | ||
+ | } | ||
+ | |||
+ | #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; | ||
+ | max-width: 40vh; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | #storytelling #statistics h1 { | ||
+ | color: #6281ef; | ||
+ | font-size: 8vw; | ||
+ | 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 { | ||
+ | max-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: 6vw; | ||
+ | height: 6vw; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list .list-item div img { | ||
+ | width: 6vw; | ||
+ | height: auto; | ||
+ | padding: 5px; | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | #fifthpart .list .list-item p { | ||
+ | width: calc(100% - 7vw); | ||
+ | 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: 95vw !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: 85vh; | ||
+ | } | ||
+ | #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; | ||
+ | } | ||
+ | } | ||
− | .container { | + | .awards-container img { |
− | + | position: absolute; | |
− | + | top: 50px; | |
− | + | left: 50px; | |
− | + | height: 200px; | |
− | + | z-index: 2; | |
− | + | } | |
− | + | ||
− | + | @media screen and (max-width: 767px) { | |
− | + | .awards-container img { | |
− | + | position: absolute; | |
− | + | top: 10px; | |
− | + | left: 10px; | |
− | + | height: initial; | |
− | + | max-width: 120px; | |
− | + | width: 40vw; | |
− | + | z-index: 2; | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + |
Latest revision as of 23:23, 18 December 2020
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: 65vh; display: flex; align-items: center; } #intro-page #intro h1 { color: rgb(103, 155, 244); 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 4px #fafafc; } #intro-page #intro h1 em { font-style: initial; font-weight: 300; } #intro-page #intro #desc-wrapper { height: 20vh; 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; font-size: 3vw; } #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; max-width: 40vh; margin: 0 auto; } #storytelling #statistics h1 { color: #6281ef; font-size: 8vw; 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 { max-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: 6vw; height: 6vw; } #fifthpart .list .list-item div img { width: 6vw; height: auto; padding: 5px; box-sizing: border-box; } #fifthpart .list .list-item p { width: calc(100% - 7vw); 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: 95vw !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: 85vh; } #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; } }
.awards-container img { position: absolute; top: 50px; left: 50px; height: 200px; z-index: 2; } @media screen and (max-width: 767px) { .awards-container img { position: absolute; top: 10px; left: 10px; height: initial; max-width: 120px; width: 40vw; z-index: 2; } }