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

Revision as of 17:00, 13 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;

}

problem-page,
links-page {

   background-color: #FAFAFC;

}

problem-page #problem-header h1,
links-page #links-header h1 {

   color: #6281EF

}

solution-page {

   background-color: #121212;

}

solution-page #solution-header h1 {

   color: #FFC43B

}

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

}

.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.3em;
   text-align: initial;

padding: 20px 0; }

storytelling p b,
storytelling h2,
storytelling h1 {

   font-family: 'montserrat-bold';

}

storytelling h2,
storytelling h1 {

   text-align: center;

}

.black {

   color: #121212;

}

.white {

   color: #fafafc;

}

storytelling #secondpart {

   height: fit-content;
   display: flex;
   flex-direction: column;
   text-align: center !important;

}

secondpart .icon {

   max-width: 500px;
   width: 60%

}

.wdt-60 {

   max-width: 400px;
   width: 60%;

}

.wd-60 {

   max-width: 700px;
   width: 60%;

}

.wd-50 {

   max-width: 500px;
   width: 50%;

}

.wdt-80 {

   width: 80%;
   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;

}

sick-fish,
ras-healthy {

   position: sticky;
   top: 20px;

}

h1 {

   color: #fafafc;

}

storytelling #firstpart {

   display: block;

}

storytelling #firstpart .centered {

   margin: 0 auto;

}

storytelling #statistics {

   padding: 20px;

}

storytelling #statistics p {

   text-align: center;
   margin: 0 auto;

}

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: 60px;
   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(100% - 60px);
   float: right;
   margin: 0;
   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;

}

storytelling #fish-symptoms,
storytelling #fourthpart {

   align-items: inherit !important;

}

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;

}

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: 70%

}

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

}

.animation svg {

   width: 40vw !important;
   height: fit-content !important;

}

.animation#dive svg {

   height: 20vh !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;
   }

}