Difference between revisions of "Team:Leiden/css/HomepageAnimations"

Revision as of 09:28, 15 October 2018

.HPBlock-container{position:relative}#Curve1,#InfoBlob{position:absolute}#Curve1{display:block;width:calc(100% - 50px);max-width:600px;left:0;right:0;margin:0 auto;opacity:1;top:300px;height:calc(8 * 600px)}#graphlines .decrease,#graphlines .increase,.HPblock{opacity:0}#InfoBlob{top:-115px;right:-70px;width:300px;height:280px;border-radius:50%;background:var(--accent1);color:var(--whiteish);text-align:center}#InfoBlob #infotext{display:block;width:180px;font-size:19px;text-align:right;position:absolute;top:47%;right:30%}#SOSMorph,.HPblock,.HPblock .text,.fig{position:relative}.HPblock{width:80%;max-width:1200px;display:grid;grid-column-gap:50px;height:600px;margin:50px auto 0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity 1s,margin 1s,border-width .5s 1s;transition:opacity 1s,margin 1s,border-width .5s 1s}.HPblock.active,.HPblock:first-of-type,.HPblock:last-of-type{opacity:1;margin-top:0}.HPblock .text{background:var(--whiteish);border:7px solid var(--main);border-radius:50%;width:400px;height:400px;text-align:center;padding:0 18px}.HPblock .text .innerText{display:block;position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);ellipsis:auto}.HPblock:nth-of-type(2n+1){grid-template-columns:400px auto}.HPblock:nth-of-type(2n+1) .text{grid-column:1;grid-row:1}.HPblock:nth-of-type(2n+1) .fig{grid-column:2;grid-row:1}.HPblock:nth-of-type(2n+2){grid-template-columns:auto 400px}.HPblock:nth-of-type(2n+2) .text{grid-column:2;grid-row:1;margin-left:auto}.HPblock:nth-of-type(2n+2) .fig{grid-column:1;grid-row:1}#graphlines{width:90%;height:auto;max-height:400px;margin:0 auto}.active #graphlines .decrease,.active #graphlines .increase{-webkit-transition:all .5s;transition:all .5s;opacity:1}#graphlines .decrease{stroke-dasharray:414;stroke-dashoffset:414;-webkit-animation-delay:4.5s;animation-delay:4.5s}#graphlines .increase{stroke-dasharray:423;stroke-dashoffset:423;-webkit-animation-delay:1.5s;animation-delay:1.5s}.HPblock.active #graphlines .decrease,.HPblock.active #graphlines .increase{-webkit-animation-name:removeDashOffset;animation-name:removeDashOffset;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes removeDashOffset{to{stroke-dashoffset:0}}@keyframes removeDashOffset{to{stroke-dashoffset:0}}#dyingpeoples{margin:auto;height:200px;width:300px;background:url(https://static.igem.org/mediawiki/2018/e/ec/T--Leiden--DyingPeoples.png)}#dyingpeoples::after{content:attr(data-after);font-size:20px;position:absolute;bottom:5px;left:25px}#SOSMorph{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:50vw;margin:0 auto;font-family:ProjectTitle;font-size:40px}#SOSMorph .new,#SOSMorph .original{display:inline-block}#SOSMorph .new{position:absolute;opacity:0;bottom:0}#SOSMorph .new.fifty{left:26%}#SOSMorph .new.s1{left:0}#SOSMorph .new.o{left:-2px}#SOSMorph .new.s2{left:0}.active #SOSMorph .original.fifty{-webkit-animation:dissappear 2s 1s forwards;animation:dissappear 2s 1s forwards}.active #SOSMorph .new.fifty{animation:dissappear 2s 1s reverse forwards}.active #SOSMorph .original.sos{-webkit-animation:dissappear 2s 4s forwards;animation:dissappear 2s 4s forwards}.active #SOSMorph .new.sos{animation:dissappear 1s 4s reverse forwards}#SOSMorph .original{max-width:800px}.active #SOSMorph .original{-webkit-transition:max-width 5s 4.5s;transition:max-width 5s 4.5s;max-width:30px}.active #SOSMorph .original.fifty{max-width:70px}@-webkit-keyframes dissappear{from{opacity:1}to{opacity:0}}@keyframes dissappear{from{opacity:1}to{opacity:0}}#PicIcebergContainer{width:100%;max-width:650px;overflow:hidden;position:relative;border-radius:25px}#PicIceberg{position:relative;width:120%;left:-10%}#Iceberg .shadowTop{fill:#DCEBEF}#Iceberg .lighterTop{fill:#FFF}#Iceberg .UnderwaterIceberg{fill:#395a77}#Iceberg .lighterBottom{fill:#4D789E}#Iceberg .icebergText{fill:#111;-webkit-transform:scale(1.3) translateX(-2%);transform:scale(1.3) translateX(-2%)}.active #PicIceberg .icebergText.Lethal{-webkit-transform-origin:30% 30%;transform-origin:30% 30%;opacity:0;animation:dissappear 1s 2s reverse forwards}.active #PicIceberg .icebergText.Stressful{-webkit-transform-origin:30% 70%;transform-origin:30% 70%;opacity:0;animation:dissappear 1s 3.5s reverse forwards}.active #Iceberg{-webkit-animation:float 5s ease-in-out infinite;animation:float 5s ease-in-out infinite;position:relative;-webkit-transform:rotate(1.5deg);transform:rotate(1.5deg);-webkit-transform-origin:67% 50%;transform-origin:67% 50%}.active #PicIceberg #Wave_back,.active #Wave_front{-webkit-animation:waves 5s infinite ease-in-out;animation:waves 5s infinite ease-in-out}.active #PicIceberg #Wave_front{-webkit-animation-delay:-2s;animation-delay:-2s}.active #PicIceberg #Wave_back{-webkit-animation-delay:-3s;animation-delay:-3s}@-webkit-keyframes waves{0%,100%{-webkit-transform:translateX(-2%);transform:translateX(-2%)}50%{-webkit-transform:translateX(2%);transform:translateX(2%)}}@keyframes waves{0%,100%{-webkit-transform:translateX(-2%);transform:translateX(-2%)}50%{-webkit-transform:translateX(2%);transform:translateX(2%)}}@-webkit-keyframes float{0%,100%{-webkit-transform:rotate(1.5deg);transform:rotate(1.5deg)}50%{-webkit-transform:rotate(-1.5deg);transform:rotate(-1.5deg)}}@keyframes float{0%,100%{-webkit-transform:rotate(1.5deg);transform:rotate(1.5deg)}50%{-webkit-transform:rotate(-1.5deg);transform:rotate(-1.5deg)}}#CombiTherapy #threshold{fill:none;stroke:#555;stroke-width:.5;stroke-linecap:round;stroke-miterlimit:10}#CombiTherapy .textGrey{fill:#555}#CombiTherapy .Block1,#CombiTherapy .Block2,#CombiTherapy .Block3{-webkit-transform:translateY(-80%) rotate(0);transform:translateY(-80%) rotate(0)}.active #CombiTherapy .Block1{-webkit-transform-origin:68% 66%;transform-origin:68% 66%;-webkit-animation:bounce .8s 1s forwards;animation:bounce .8s 1s forwards}.active #CombiTherapy .Block2{-webkit-transform-origin:16% 57%;transform-origin:16% 57%;-webkit-animation:bounce2 .8s 1.5s forwards;animation:bounce2 .8s 1.5s forwards}.active #CombiTherapy .Block3{-webkit-transform-origin:64% 38%;transform-origin:64% 38%;-webkit-animation:bounce .8s 2s forwards;animation:bounce .8s 2s forwards}@-webkit-keyframes bounce{0%{-webkit-transform:translateY(-80%) rotate(-10deg);transform:translateY(-80%) rotate(-10deg)}100%,60%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}80%{-webkit-transform:translateY(-.5%) rotate(1deg);transform:translateY(-.5%) rotate(1deg)}}@keyframes bounce{0%{-webkit-transform:translateY(-80%) rotate(-10deg);transform:translateY(-80%) rotate(-10deg)}100%,60%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}80%{-webkit-transform:translateY(-.5%) rotate(1deg);transform:translateY(-.5%) rotate(1deg)}}@-webkit-keyframes bounce2{0%{-webkit-transform:translateY(-80%) rotate(10deg);transform:translateY(-80%) rotate(10deg)}100%,60%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}80%{-webkit-transform:translateY(-.5%) rotate(-1deg);transform:translateY(-.5%) rotate(-1deg)}}@keyframes bounce2{0%{-webkit-transform:translateY(-80%) rotate(10deg);transform:translateY(-80%) rotate(10deg)}100%,60%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0)}80%{-webkit-transform:translateY(-.5%) rotate(-1deg);transform:translateY(-.5%) rotate(-1deg)}}#ShortenTimeline .timelinearrow{fill:var(--accent4)}#ShortenTimeline .timelineCircle{fill:var(--main)}#ShortenTimeline .text{-webkit-transform:translateY(0);transform:translateY(0)}#ShortenTimeline #DiscoveryBox,#ShortenTimeline #lineEnd{-webkit-transform:translateX(0);transform:translateX(0)}.active #ShortenTimeline #DiscoveryBox{-webkit-transition:-webkit-transform 2s 2s;transition:-webkit-transform 2s 2s;transition:transform 2s 2s;transition:transform 2s 2s,-webkit-transform 2s 2s;-webkit-transform:translateX(7%);transform:translateX(7%)}.active #ShortenTimeline #lineEnd{-webkit-transition:-webkit-transform 2s 2s;transition:-webkit-transform 2s 2s;transition:transform 2s 2s;transition:transform 2s 2s,-webkit-transform 2s 2s;-webkit-transform:translateX(11%);transform:translateX(11%)}.active #ShortenTimeline #DiscoveryBox circle{-webkit-transition:transform 2s 2s;-webkit-transition:-webkit-transform 2s 2s;transition:-webkit-transform 2s 2s;transition:transform 2s 2s;transition:transform 2s 2s,-webkit-transform 2s 2s;-webkit-transform:scale(.6);transform:scale(.6);-webkit-transform-origin:24% 65%;transform-origin:24% 65%}.active #ShortenTimeline #DiscoveryBox .text{-webkit-transition:all 2s 2s;transition:all 2s 2s;-webkit-transform:translateY(7.5%);transform:translateY(7.5%)}.active #ShortenTimeline #PreclinicalBox{-webkit-transition:all 2s 2s;transition:all 2s 2s;-webkit-transform:translateX(1.5%);transform:translateX(1.5%)}.active #ShortenTimeline #PreclinicalBox circle{-webkit-transition:transform 2s 2s;-webkit-transition:-webkit-transform 2s 2s;transition:-webkit-transform 2s 2s;transition:transform 2s 2s;transition:transform 2s 2s,-webkit-transform 2s 2s;-webkit-transform:scale(.75);transform:scale(.75);-webkit-transform-origin:44% 65%;transform-origin:44% 65%}.active #ShortenTimeline #PreclinicalBox .text{-webkit-transition:all 2s 2s;transition:all 2s 2s;-webkit-transform:translateY(3.75%);transform:translateY(3.75%)}#SOSmechanism .DNA,.DNAconnection{fill:none;stroke:var(--blackish);stroke-miterlimit:10}#SOSmechanism .DNA{stroke-width:2}#SOSmechanism .explosionwires{fill:none;stroke:var(--blackish);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}#SOSmechanism .cyan{fill:var(--accentCyan)}.active #SOSmechanism #Explosion{-webkit-transform-origin:75% 74%;transform-origin:75% 74%;-webkit-transform:translate(-2%,0);transform:translate(-2%,0);stroke-dasharray:22;stroke-dashoffset:22;-webkit-animation:removeDashOffset .5s 1.5s forwards,removeTranslate 2.5s 1s forwards;animation:removeDashOffset .5s 1.5s forwards,removeTranslate 2.5s 1s forwards}.active #SOSmechanism #DNAright{-webkit-animation:breakDNA 3s 1s forwards;animation:breakDNA 3s 1s forwards;-webkit-transform-origin:69% 63%;transform-origin:69% 63%}.active #SOSmechanism #promotor{-webkit-animation:promotor 2s 4s 3;animation:promotor 2s 4s 3}.active #SOSmechanism .GFP{opacity:1;-webkit-transform-origin:28.5% 50%;transform-origin:28.5% 50%}.active #SOSmechanism .GFP:nth-of-type(1){-webkit-animation:animGFP 2s 5s forwards;animation:animGFP 2s 5s forwards}.active #SOSmechanism .GFP:nth-of-type(2){-webkit-animation:animGFP 2s 7s forwards;animation:animGFP 2s 7s forwards}.active #SOSmechanism .GFP:nth-of-type(3){-webkit-animation:animGFP 2s 9s forwards;animation:animGFP 2s 9s forwards}#SOSmechanism #outlineBac{color:var(--accentCyan);fill:var(--whiteish);fill-opacity:0}.active #SOSmechanism #outlineBac{-webkit-animation:colorChange 8s 5s forwards;animation:colorChange 8s 5s forwards}@-webkit-keyframes animGFP{from{opacity:1;-webkit-transform:translate(0,0) scale(.5);transform:translate(0,0) scale(.5)}to{opacity:0;-webkit-transform:translate(13%,-25%) scale(2);transform:translate(13%,-25%) scale(2)}}@keyframes animGFP{from{opacity:1;-webkit-transform:translate(0,0) scale(.5);transform:translate(0,0) scale(.5)}to{opacity:0;-webkit-transform:translate(13%,-25%) scale(2);transform:translate(13%,-25%) scale(2)}}@-webkit-keyframes promotor{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(14%);transform:translateX(14%)}}@keyframes promotor{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(14%);transform:translateX(14%)}}@-webkit-keyframes removeTranslate{to{-webkit-transform:translate(.5%,-.5%) rotate(-4deg);transform:translate(.5%,-.5%) rotate(-4deg)}}@keyframes removeTranslate{to{-webkit-transform:translate(.5%,-.5%) rotate(-4deg);transform:translate(.5%,-.5%) rotate(-4deg)}}@-webkit-keyframes breakDNA{to{-webkit-transform:rotate(-28deg) translate(4%,2%);transform:rotate(-28deg) translate(4%,2%)}}@keyframes breakDNA{to{-webkit-transform:rotate(-28deg) translate(4%,2%);transform:rotate(-28deg) translate(4%,2%)}}#PlateContainer{overflow:hidden}#Plate_4Bacs{width:100%;max-height:600px;overflow:visible;position:relative;top:0}#Plate_4Bacs g.bac1,#Plate_4Bacs g.bac2,#Plate_4Bacs g.bac3,#Plate_4Bacs g.bac4{opacity:0}.active #Plate_4Bacs{-webkit-animation:dissappear 1s 8s forwards;animation:dissappear 1s 8s forwards}.active #Plate_4Bacs g.bac1{-webkit-transform:scale(2) translate(-12%,-73%);transform:scale(2) translate(-12%,-73%);-webkit-animation:animBac1 2s 4s forwards,animBac2 5s 2s forwards;animation:animBac1 2s 4s forwards,animBac2 5s 2s forwards}.active #Plate_4Bacs g.bac2{-webkit-transform:scale(2) translate(-23%,-73%);transform:scale(2) translate(-23%,-73%);-webkit-animation:animBac1 2s 4.5s forwards,animBac2 5s 2.5s forwards;animation:animBac1 2s 4.5s forwards,animBac2 5s 2.5s forwards}.active #Plate_4Bacs g.bac3{-webkit-transform:scale(2) translate(-34%,-73%);transform:scale(2) translate(-34%,-73%);-webkit-animation:animBac1 2s 5s forwards,animBac2 5s 3s forwards;animation:animBac1 2s 5s forwards,animBac2 5s 3s forwards}.active #Plate_4Bacs g.bac4{-webkit-transform:scale(2) translate(-45%,-73%);transform:scale(2) translate(-45%,-73%);-webkit-animation:animBac1 2s 5.5s forwards,animBac2 5s 3.5s forwards;animation:animBac1 2s 5.5s forwards,animBac2 5s 3.5s forwards}@-webkit-keyframes animBac1{to{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@keyframes animBac1{to{-webkit-transform:scale(1) translate(0,0);transform:scale(1) translate(0,0)}}@-webkit-keyframes animBac2{0%,100%{opacity:0}25%,75%{opacity:1}}@keyframes animBac2{0%,100%{opacity:0}25%,75%{opacity:1}}#Plate_4Bacs .circle2{fill:var(--accent4);stroke:none;stroke-width:0;stroke-miterlimit:10;opacity:0}.active #Plate_4Bacs .circle2.cBac1{-webkit-transition:opacity 2s 7s;-webkit-transition:opacity 2s 5s;transition:opacity 2s 5s}.active #Plate_4Bacs .circle2.cBac2{-webkit-transition:opacity 2s 7.5s;-webkit-transition:opacity 2s 5.5s;transition:opacity 2s 5.5s}.active #Plate_4Bacs .circle2.cBac3{-webkit-transition:opacity 2s 8s;-webkit-transition:opacity 2s 6s;transition:opacity 2s 6s}.active #Plate_4Bacs .circle2.cBac4{-webkit-transition:opacity 2s 8.5s;-webkit-transition:opacity 2s 6.5s;transition:opacity 2s 6.5s}.active #Plate_4Bacs .circle2{opacity:.3}#Plate_4Bacs .bacOutline{fill-rule:evenodd;clip-rule:evenodd;fill:#FFF;stroke:var(--blackish);stroke-width:1.5}#Plate_4Bacs .DNA{fill-rule:evenodd;clip-rule:evenodd;stroke-width:2}#Plate_4Bacs .DNA.orange{fill:#fff;stroke:var(--main)}#Plate_4Bacs .DNA.cyan{fill:#fff;stroke:var(--accentCyan)}#Plate_4Bacs .DNA.red{fill:#fff;stroke:var(--accentRed)}#Plate_4Bacs .circle{fill:none;stroke:var(--blackish);stroke-width:2;stroke-miterlimit:10}#Plate_4Bacs .totalBox{fill:none}#HighThroughput{position:absolute;bottom:0;left:0;margin:auto;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate(-12.3%,47.4%) scale(6.16);transform:translate(-12.3%,47.4%) scale(6.16);opacity:0}#HighThroughput .circle{stroke:#888;stroke-width:.15;stroke-miterlimit:10;fill:var(--whiteish);fill-opacity:0}.active #HighThroughput{-webkit-transition:opacity 1s 8s;transition:opacity 1s 8s;opacity:1;-webkit-animation:revealPlate 3s 9s forwards;animation:revealPlate 3s 9s forwards}@-webkit-keyframes revealPlate{to{-webkit-transform:translate(0,7%) scale(.9);transform:translate(0,7%) scale(.9)}}@keyframes revealPlate{to{-webkit-transform:translate(0,7%) scale(.9);transform:translate(0,7%) scale(.9)}}.active #HighThroughput .circle.Red{color:var(--accentRed)}.active #HighThroughput .circle.Cyan{color:var(--accentCyan)}.active #HighThroughput .circle.Orange{color:var(--main)}.active #HighThroughput .circle:nth-of-type(6n+1){-webkit-animation:colorChange 1s 13s forwards;animation:colorChange 1s 13s forwards}.active #HighThroughput .circle:nth-of-type(6n+2){-webkit-animation:colorChange 1s 14s forwards;animation:colorChange 1s 14s forwards}.active #HighThroughput .circle:nth-of-type(6n+3){-webkit-animation:colorChange 1s 15s forwards;animation:colorChange 1s 15s forwards}.active #HighThroughput .circle:nth-of-type(6n+4){-webkit-animation:colorChange 1s 16s forwards;animation:colorChange 1s 16s forwards}.active #HighThroughput .circle:nth-of-type(6n+5){-webkit-animation:colorChange 1s 17s forwards;animation:colorChange 1s 17s forwards}.active #HighThroughput .circle:nth-of-type(6n+6){-webkit-animation:colorChange 1s 18s forwards;animation:colorChange 1s 18s forwards}@-webkit-keyframes colorChange{to{stroke:var(--blackish);fill:currentColor;fill-opacity:.7}}@keyframes colorChange{to{stroke:var(--blackish);fill:currentColor;fill-opacity:.7}}#HighThroughput .wellPlate{fill:none;stroke:var(--blackish);stroke-width:.25;stroke-miterlimit:10}#HighThroughput .wellPlateWells{fill:url(#circlefill)}#counterBox{background:var(--accent1);color:var(--whiteish);padding:25px 40px;border-radius:20px;margin:0 30px;text-align:center;font-size:27px}#counterBox span.grouped{display:block;padding:10px 0;font-size:35px}#counterBox span.counter{font-size:50px;padding-right:10px}#counterBox span.counter.newNumber{color:#fff;text-shadow:0 0 10px var(--main),0 0 20px var(--main),0 0 30px var(--main),0 0 40px var(--main),0 0 50px var(--main);-webkit-animation:removeTShadow 1s forwards;animation:removeTShadow 1s forwards}@-webkit-keyframes removeTShadow{to{text-shadow:none;color:var(--whiteish)}}@keyframes removeTShadow{to{text-shadow:none;color:var(--whiteish)}}.circles{background:url() 50% 50% no-repeat;background-size:cover;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-height:calc(70vh - 10px);position:relative;top:0;z-index:3}div#headercontent{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:-webkit-max-content;height:-moz-max-content;height:max-content;width:100%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}div.logo{height:calc(.9 * 50vw);min-height:100px;max-height:300px;width:-webkit-max-content;width:-moz-max-content;width:max-content;margin:auto;position:relative}div.logo #LogoSVG{height:100%}#LogoSVG #EyesMouth,#LogoSVG #Leiden,#LogoSVG #NewBac{opacity:0}#LogoSVG #Frutsels{stroke-dasharray:100;stroke-dashoffset:100}.active #LogoSVG #EyesMouth{animation:dissappear reverse 3s 5s forwards}.active #LogoSVG #NewBac{animation:dissappear reverse 1s 5.5s forwards}.active #LogoSVG #Frutsels{-webkit-animation:removeDashOffset 2s 6.5s forwards;animation:removeDashOffset 2s 6.5s forwards}.active #LogoSVG #Leiden{animation:dissappear reverse 1s 6s forwards}#LogoSVG #Tandwiel{-webkit-transform-origin:57.338% 58.2056%;transform-origin:57.338% 58.2056%;-webkit-transform:rotate(120deg);transform:rotate(120deg)}.active #LogoSVG #Tandwiel{-webkit-transition:-webkit-transform 7s 1s;transition:-webkit-transform 7s 1s;transition:transform 7s 1s;transition:transform 7s 1s,-webkit-transform 7s 1s;-webkit-transform:rotate(360deg);transform:rotate(360deg)}#LogoSVG .darkGreen{color:#166837;fill:currentColor}#LogoSVG .lightGreen{color:#98CB99;fill:currentColor}#LogoSVG .red{color:#F26B68;fill:#838687}#LogoSVG .main{color:#ffb375;fill:#838687}#LogoSVG .yellow{color:#FAF281;fill:#838687}#LogoSVG .accent2{color:#49BEAA;fill:#838687}#LogoSVG .lightBlue{color:#5FC8D8;fill:#838687;fill:currentColor}#LogoSVG .oceanBlue{color:#64A3D7;fill:#838687;fill:currentColor}#LogoSVG .darkBlue{color:#456990;fill:#838687;fill:currentColor}#LogoSVG .purple{color:#7458A7;fill:#838687;fill:currentColor}div#Fsos,div#UnderTitle{color:var(--blackish);display:block;width:-webkit-max-content;width:-moz-max-content;max-width:90vw;margin:auto;text-align:center;background:rgba(222,217,208,.7)}.active #LogoSVG .accent2,.active #LogoSVG .main,.active #LogoSVG .red,.active #LogoSVG .yellow{-webkit-transition:fill .1s 3s;transition:fill .1s 3s;fill:currentColor}#LogoSVG .grey{fill:#838687}#LogoSVG #Cog{-webkit-transform-origin:8.2881% 51.0033%;transform-origin:8.2881% 51.0033%}#LogoSVG .Eye:first-of-type{-webkit-transform-origin:33.072% 28.0692%;transform-origin:33.072% 28.0692%}#LogoSVG .Eye:last-of-type{-webkit-transform-origin:43.832% 31.6843%;transform-origin:43.832% 31.6843%}.active #LogoSVG #Cog,.active #LogoSVG .Eye{-webkit-animation:rotate 2s 1s 3 linear;animation:rotate 2s 1s 3 linear}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}#LogoSVG .Eye{fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10}.WithFill{fill-rule:evenodd;clip-rule:evenodd}#LogoSVG .FrutselOrange{fill:none;stroke:#F58460;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10}#LogoSVG .FrutselBlue{fill:none;stroke:#5FC8D8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}#LogoSVG .FrutselPurple{fill:none;stroke:#933F98;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}div#Fsos{font-size:50px;font-family:ProjectTitle;width:max-content;padding-top:20px;-webkit-box-shadow:0 0 20px 5px rgba(222,217,208,1);box-shadow:0 0 20px 5px rgba(222,217,208,1);border-radius:50px}div#UnderTitle{font-size:21.62px;font-family:UnderTitle;width:max-content;padding-left:2px;-webkit-box-shadow:0 0 20px 5px rgba(222,217,208,1);box-shadow:0 0 20px 5px rgba(222,217,208,1);border-radius:20px}@media (max-width:1100px){.largerText{font-size:21px}.HPblock .text{width:300px;height:300px}.HPblock:nth-of-type(2n+1){grid-template-columns:300px auto}.HPblock:nth-of-type(2n+2){grid-template-columns:auto 300px}#counterBox{font-size:24px}#counterBox span.grouped{font-size:32px}#counterBox span.counter{font-size:46px}}@media (max-width:900px){.HPblock{width:90vw}.largerText{font-size:18px}.HPblock .text{width:260px;height:260px}.HPblock:nth-of-type(2n+1){grid-template-columns:260px auto}.HPblock:nth-of-type(2n+2){grid-template-columns:auto 260px}#counterBox{font-size:20px}#counterBox span.grouped{font-size:28px}#counterBox span.counter{font-size:40px}}@media (max-width:768px){.HPblock,.HPblock:first-of-type{padding-top:50px}#counterBox,.largerText{font-size:17px}#InfoBlob{display:none}.HPblock{width:100%;height:auto}#graphlines,.fig{width:90%}.HPblock .text{width:90%;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:20px;position:relative;padding:30px}.HPblock .text .innerText{display:inline;top:0;-webkit-transform:translateY(0);transform:translateY(0)}#SOSMorph{max-width:90vw}.HPblock:nth-of-type(2n+1),.HPblock:nth-of-type(2n+2){grid-template-columns:auto}.HPblock:nth-of-type(2n+1) .text,.HPblock:nth-of-type(2n+2) .text{grid-column:1;grid-row:1;margin:auto}.HPblock:nth-of-type(2n+1) .fig,.HPblock:nth-of-type(2n+2) .fig{grid-column:1;grid-row:2}#counterBox span.grouped{font-size:24px}#counterBox span.counter{font-size:35px}#Curve1{display:none}.fig{margin:50px auto}#PicIcebergContainer{width:80%;margin:auto}#CombiTherapy,#SOSmechanism,#graphlines{max-height:60vh}#HighThroughput,#Plate_4Bacs{width:80%;left:10%}}@media (max-width:470px){div#Fsos{font-size:35px;width:95%;margin:auto}div#UnderTitle{font-size:15px;width:95%;margin:auto;padding:0}}