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

Revision as of 16:03, 16 October 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;
   }
   
   #intro-header {
       height: 100vh
   }
   
   #intro-header svg {
       height: 90%;
   }
   
   #intro-page #intro-header {
       width: 100%;
       margin: 0 auto;
       position: absolute;
       z-index: 4;
       pointer-events: none
   }
   
   #intro-page #intro {
       z-index: 4;
       height: calc(100vh - 14px);
       width: 100%;
       top: 0;
       position: absolute;
       pointer-events: none
   }
   
   #text-wrapper {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, 20%);
       width: 100%;
       z-index: 4;
       pointer-events: none
   }
   
   #desc-wrapper {
       padding-top: 30px;
       display: block;
       width: fit-content;
       margin: 0 auto;
   }
   
   #center-desc {
       display: flex;
       justify-content: center;
       width: -webkit-fit-content;
   }
   
   #desc-wrapper span {
       color: white;
       font-family: "lato-regular";
       font-size: 3em;
       text-align: right;
   }
   
   .container h1 {
       text-transform: uppercase;
       font-size: 70px;
       font-family: "lato-heavy";
       text-align: center;
       margin: 0;
   }
   
   #intro-page #intro h1 {
       color: #FAFAFC;
       font-size: 12em;
       font-family: 'raleway';
       text-transform: lowercase;
       font-weight: 600;
   }
   
   #intro-page #intro h1 em {
       font-style: initial;
       font-weight: 300;
   }
   
   #bubbles-container {
       height: 100vh;
       position: absolute;
       width: 100%;
       box-sizing: border-box;
   }
   
   .big-section {
       line-height: 1.7
   }
   
   .black-bg {
       background-color: #121212;
   }
   
   .white-bg {
       background-color: #fafafc;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }
   
   .smallWaves {
       position: relative;
       height: 200px;
   }
   
   .lightblue-bg {
       background-color: #6281ef;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }
   
   .lightblue-bg b em {
       font-style: normal;
       font-family: 'montserrat-bold', sans-serif;
   }
   
   .brightblue-bg {
       background-color: #3356ce;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }
   
   .darkblue-bg {
       background-color: #11348f;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
   }
   
   #storytelling .section {
       display: flex;
       padding: 20px;
       max-width: calc(100% - 330px);
       margin: 0 auto;
   }
   
   #storytelling .black-bg:first-of-type .section {
       padding-bottom: 50px;
       padding-top: 100px;
   }
   
   #storytelling p br {
       display: initial;
   }
   
   .half {
       width: 50%;
       padding: 20px;
       box-sizing: border-box;
   }
   
   #storytelling p.center {
       text-align: center !important;
   }
   
   #storytelling .centered {
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   #storytelling #fish-icon svg {
       height: 300px !important;
   }
   
   #storytelling p {
       font-family: 'montserrat-light';
       font-size: 1.9em;
       text-align: center;
       padding: 20px 0;
   }
   
   #storytelling .lightblue-bg p,
   #storytelling .brightblue-bg p,
   #storytelling .darkblue-bg p {
       text-align: left;
   }
   
   #storytelling p b,
   #storytelling h2,
   #storytelling h1 {
       font-family: 'montserrat-bold';
   }
   
   #storytelling h2,
   #storytelling h1 {
       text-align: center;
       font-size: 2.5em;
   }
   
   #storytelling h1 {
       font-size: 2.7em;
   }
   
   .black {
       color: #121212;
   }
   
   .white {
       color: #fafafc;
   }
   
   #storytelling #secondpart,
   #storytelling #fourthpart,
   #storytelling #fish-symptoms {
       height: fit-content;
       display: flex;
       flex-direction: column;
       text-align: center !important;
   }
   
   #secondpart .icon {
       max-width: 500px;
       width: 60%
   }
   
   .wdt-60 {
       max-width: 500px;
       width: 60vw;
   }
   
   .wd-60 {
       max-width: 700px;
       width: 60vw;
   }
   
   .wd-50 {
       max-width: 500px;
       width: 50vw;
   }
   
   .wdt-80 {
       width: 80vw;
       margin: 0 auto;
   }
   
   .icon {
       padding: 20px;
       box-sizing: border-box;
       height: 300px;
       width: 300px;
       border-radius: 50px;
       margin: 0 auto;
       max-width: 100%;
   }
   
   .icon.white {
       background-color: #fafafc;
       color: #121212;
   }
   
   .icon.dark {
       background-color: rgba(255, 255, 255, 0.1);
       color: #fafafc;
   }
   
   h1 {
       color: #fafafc;
   }
   
   #storytelling #firstpart {
       display: block;
   }
   
   #storytelling #firstpart .centered {
       margin: 0 auto;
   }
   
   #storytelling #statistics {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(2, 1fr);
       grid-column-gap: 0px;
       grid-row-gap: 0px;
   }
   
   #storytelling #statistics p {
       text-align: center;
       margin: 0 10px;
   }
   
   #storytelling #statistics h1 {
       color: #6281ef;
       font-size: 5em;
       font-family: 'montserrat-black', sans-serif;
       margin-block-end: 0em;
       margin-block-start: 0em;
       line-height: 1.1;
       opacity: 81%;
   }
   
   #thirdpart,
   #fourthpart,
   #seventhpart {
       width: 80%;
       margin: 0 auto;
   }
   
   #storytelling #fifthpart {
       text-align: center !important;
   }
   
   #fifthpart .list {
       width: 80%;
       margin: 0 auto
   }
   
   #fifthpart .list .list-item {
       height: fit-content;
       padding: 10px;
       display: flex;
       align-items: center;
   }
   
   #fifthpart .list .list-item div {
       width: 60px;
   }
   
   #fifthpart .list .list-item div img {
       width: 50px;
       height: 50px;
       padding: 5px;
   }
   
   #fifthpart .list .list-item p {
       width: calc(70% - 60px);
       float: right;
       margin: 0 auto;
       padding: 5px;
       color: #fafafc;
   }
   
   #sixthpart {
       flex-direction: column;
   }
   
   .milkWave {
       z-index: 2;
       width: 100%;
       top: 0px;
       position: relative;
       content: "";
       pointer-events: none;
       background-position: bottom;
       background-origin: border-box;
       background-size: 100%;
       background-repeat: no-repeat;
       background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
       height: 150px
   }
   
   .milkWave.rotate-wave {
       transform: rotate(180deg)
   }
   
   .milkWave svg {
       height: 150px;
   }
   
   .milkWave.small {
       position: absolute;
   }
   
   .yellow {
       color: #fcbd1b;
   }
   
   #storytelling #bact {
       flex-direction: column;
       text-align: center !important;
   }
   
   #storytelling #bact .half {
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   #bact .row {
       display: inherit;
   }
   
   .white-bg .wdt-60 {
       text-align: center;
   }
   
   #fish-symptoms .icon {
       margin: 0 auto
   }
   
   #fish-symptoms p {
       margin-top: 50px
   }
   
   #fish-symptoms p:first-child {
       margin-top: 0px
   }
   
   .title {
       text-transform: uppercase
   }
   
   #links .nf {
       display: inherit;
       padding-bottom: 10vh;
       transform: translateY(-100px);
   }
   
   #links .title {
       font-size: 2.5em;
   }
   
   #links .row {
       display: flex;
       justify-content: center;
   }
   
   #links .row object {
       height: 150px;
       padding: 40px 40px 0 40px;
       cursor: pointer;
   }
   
   #links .row .link h1 {
       text-transform: uppercase;
       line-height: 1;
       margin-block-end: 0;
       margin-block-start: 0;
       margin-top: -25px;
       font-family: 'montserrat-black', sans-serif;
   }
   
   .half p {
       width: 90%
   }
   
   @media (max-width:768px) {
       #intro-page #intro h1 {
           font-size: 4.5em;
       }
       #links .row object {
           height: 20vw;
           padding: 10px 10px 0 10px;
       }
       #links .row .link h1 {
           font-size: 0.8em;
           margin-top: -12px;
       }
       #intro-page #intro #title::after {
           font-size: 4em;
           transform: translate(-53%, -130%);
       }
       .content-header {
           padding-top: 50px
       }
       .content-index h1 {
           font-size: 3.3em;
       }
       .half {
           width: 100%;
       }
       .half p {
           width: initial
       }
       .two-parts {
           flex-direction: column;
       }
       #fifthpart .list {
           width: 80%
       }
       #links .row .icon {
           width: 100px;
           height: 100px;
           margin: 5px;
           padding: 10px;
       }
       #storytelling p,
       #storytelling h1,
       #storytelling h2,
       #storytelling h3 {
           text-align: center !important;
       }
       #storytelling p {
           font-size: 0.8em
       }
       .wd-50,
       .wdt-60 {
           width: 80%
       }
       #storytelling .section {
           max-width: calc(100% - 50px);
       }
       #fishIcon {
           position: initial;
           top: initial;
       }
   }
   
   #fixedOverlay nav #header #logo[visible=true] {
       opacity: 0;
   }
   
   #links {
       padding-bottom: 30px;
   }
   
   #links .section {
       padding: 0px;
   }
   
   .animation svg {
       width: 40vw !important;
       height: fit-content !important;
   }
   
   .animation#dive svg {
       width: 50vw !important;
       height: 30vh !important;
   }
   
   .animation#infection svg {
       width: 70vw !important;
       height: 70vh !important;
   }
   
   .animation#ras-sick svg,
   .animation#ras-healthy svg {
       width: 35vw !important;
       height: 40vh !important;
   }
   
   .animation#fish-doodle svg {
       width: 70vw !important;
       height: 50vh !important;
   }
   
   .white-bg.smallWaves {
       background-color: transparent;
       margin-top: -150px;
   }
   
   @media screen and (max-width: 767px) {
       .animation svg {
           width: 80vw !important;
       }
       .animation#infection svg {
           width: 70vw !important;
           height: 44vh !important;
       }
       .animation#ras-sick svg,
       .animation#ras-healthy svg {
           width: 70vw !important;
           height: 22vh !important;
       }
       .animation#fish-doodle svg {
           width: 70vw !important;
           height: 22vh !important;
       }
       .white-bg.smallWaves {
           background-color: transparent;
           margin-top: -150px;
       }
       .animation#sick-fish svg {
           width: 70vw !important;
           height: 16vh !important;
       }
       #storytelling .black-bg:first-of-type .section {
           padding-top: 30px;
           padding-bottom: 10px;
       }
   }