Difference between revisions of "Template:Vilnius-Lithuania/index.css"

 
(91 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
    body,
−
<head>
+
    html {
−
<style>
+
        margin: 0;
−
.container {
+
        padding: 0;
−
  width: 100%;
+
        color: #121212;
−
  height: calc(100vh - 14px)
+
        font-family: 'lato-regular';
−
}
+
    }
−
#intro-page{
+
   
−
background-color: #121212;
+
    .container {
−
}
+
        width: 100%;
−
#intro-header{
+
        height: calc(100vh - 14px)
−
height:100vh
+
    }
−
}
+
   
−
#intro-header svg{
+
    #waves {
−
height: 50%;
+
        transform: rotate(180deg);
−
padding-top: 10em;
+
        background-color: #fafafc
−
}
+
    }
−
#intro-page #intro-header {
+
   
−
  width: 100%;
+
    #intro-page {
−
  margin: 0 auto;
+
        background-color: #121212;
−
  position:absolute;
+
        top: 6px;
−
  z-index:1;
+
        position: relative;
−
}
+
    }
−
#intro-page #intro-header img {
+
   
−
  width: 100%;
+
    #intro-header {
−
  position: relative;
+
        height: 100vh
−
}
+
    }
−
#intro-page #intro {
+
   
−
  z-index: 2;
+
    #intro-header svg {
−
  height: 70vh;
+
        height: 85%;
−
  width: 100%;
+
    }
−
bottom:100vh;
+
   
−
position:absolute;
+
    #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 h1{
+
      .awards-container img {
−
text-transform: uppercase;
+
            position: absolute;
−
font-size: 70px;
+
            top: 50px;
−
  font-family: "lato-heavy";
+
            left: 50px;
−
  text-align: center;
+
            height: 200px;
−
  margin: 0;
+
            z-index: 2;
−
}
+
        }
−
 
+
       
−
#intro-page #intro h1 {
+
        @media screen and (max-width: 767px) {
−
  color: #FAFAFC;
+
            .awards-container img {
−
}
+
                position: absolute;
−
#intro-page #intro #lower{
+
                top: 10px;
−
color: transparent;
+
                left: 10px;
−
stroke-color: rgba(255,255,255,0.4);
+
                height: initial;
−
transform: translate(-0.3em,-0.8em);
+
                max-width: 120px;
−
}
+
                width: 40vw;
−
 
+
                z-index: 2;
−
#problem-page {
+
            }
−
  background-color: #FAFAFC;
+
        }
−
}
+
−
#problem-page #problem-header h1{
+
−
color:#6281EF
+
−
}
+
−
</style></head</html>
+

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;
           }
       }