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

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