Template:CSMU Taiwan/HP/HomepageAnimations

1. SOSMorph,

div#Fsos {

   font-family: ProjectTitle

}

.HPBlock-container {

   position: relative

}

1. Curve1,
2. InfoBlob {

   position: absolute

}

1. Curve1 {

   display: block;
   width: calc(100% - 50px);
   max-width: 800px;
   left: 0;
   right: 0;
   margin: 0 auto;
   opacity: 1;
   top: 300px;
   height: calc(18 * 600px)

}

1. InfoBlob {

   top: -115px;
   right: -70px;
   width: 300px;
   height: 280px;
   border-radius: 50%;
   background: var(--accent1);
   color: var(--whiteish);
   text-align: center

}

1. InfoBlob #infotext {

   display: block;
   width: 180px;
   font-size: 19px;
   text-align: right;
   position: absolute;
   top: 47%;
   right: 30%

}

.HPblock {

   position: relative;
   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;
   opacity: 0;
   -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 {

   position: relative;
   background: var(--whiteish);
   border: 7px solid var(--main);
   border-radius: 50%;
   width: auto;
   height: 400px;
   text-align: center;
   padding: 0 18px

}

1. SOSMorph,
2. dyingpeoplesBox {

   width: -webkit-max-content;
   width: -moz-max-content;
   position: relative

}

.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: 200px 100px auto

} .HPblockSchool:{

   grid-template-columns: 70px 300px auto

} .HPblockSchool .fig {

   grid-column: 2;
   grid-row: 1

}

.HPblock:nth-of-type(2n+1) .text {

   grid-column: 3;
   grid-row: 1

}

.HPblock:nth-of-type(2n+1) .fig {

   grid-column: 1;
   grid-row: 1

}

.HPblock:nth-of-type(2n+2) {

   grid-template-columns: auto 100px 200px

}

.HPblock:nth-of-type(2n+2) .text {

   grid-column: 1;
   grid-row: 1;
   margin-left: auto

}

.HPblock:nth-of-type(2n+2) .fig {

   grid-column: 3;
   grid-row: 1

}

.fig {

   position: relative

}

1. graphlines {

   width: 90%;
   height: auto;
   max-height: 400px;
   margin: 0 auto

}

1. graphlines .decrease,
2. graphlines .increase {

   opacity: 0

}

.active #graphlines .decrease, .active #graphlines .increase {

   -webkit-transition: all .5s;
   transition: all .5s;
   opacity: 1

}

1. graphlines .decrease {

   stroke-dasharray: 414;
   stroke-dashoffset: 414;
   -webkit-animation-delay: 4.5s;
   animation-delay: 4.5s

}

1. 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
   }

}

1. dyingpeoplesBox {

   margin: auto;
   width: max-content;
   display: block

}

1. dyingpeoples {

   height: 200px;
   width: 300px;
   background: url()

}

1. dyingpeoples::after {

   content: attr(data-after);
   font-size: 20px;
   position: absolute;
   bottom: 5px;
   left: 25px

}

1. dyingpeoplesMap {

   position: absolute;
   width: 180%;
   top: -15%;
   left: -40%;
   z-index: -1

}

1. dyingpeoplesMap::after {

   content: ;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(247, 247, 247, .6)

}

1. SOSMorph {

   width: max-content;
   max-width: 50vw;
   margin: 0 auto;
   font-size: 40px

}

1. SOSMorph .new,
2. SOSMorph .original {

   display: inline-block

}

1. SOSMorph .new {

   position: absolute;
   opacity: 0;
   bottom: 0

}

1. SOSMorph .new.fifty {

   left: 26%

}

1. SOSMorph .new.s1 {

   left: 0

}

1. SOSMorph .new.o {

   left: -2px

}

1. 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;
   -webkit-transition: left 3s 7s;
   transition: left 3s 7s;
   left: 45%

}

.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

}

1. 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
   }

}

1. PicIcebergContainer {

   width: 100%;
   max-width: 650px;
   overflow: hidden;
   position: relative;
   border-radius: 25px

}

1. PicIceberg {

   position: relative;
   width: 120%;
   left: -10%

}

1. Iceberg .shadowTop {

   fill: #DCEBEF

}

1. Iceberg .lighterTop {

   fill: #FFF

}

1. Iceberg .UnderwaterIceberg {

   fill: #395a77

}

1. Iceberg .lighterBottom {

   fill: #4D789E

}

1. 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)
   }

}

1. CombiTherapy #threshold {

   fill: none;
   stroke: #555;
   stroke-width: .5;
   stroke-linecap: round;
   stroke-miterlimit: 10

}

1. CombiTherapy .textGrey {

   fill: #555

}

1. CombiTherapy .Block1,
2. CombiTherapy .Block2,
3. 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)
   }

}

1. ShortenTimeline .timelinearrow {

   fill: var(--accent4)

}

1. ShortenTimeline .timelineCircle {

   fill: var(--main)

}

1. ShortenTimeline .text {

   -webkit-transform: translateY(0);
   transform: translateY(0)

}

1. ShortenTimeline #DiscoveryBox,
2. 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%)

}

1. SOSmechanism .DNA,

.DNAconnection {

   fill: none;
   stroke: var(--blackish);
   stroke-miterlimit: 10

}

1. SOSmechanism .DNA {

   stroke-width: 2

}

1. SOSmechanism .explosionwires {

   fill: none;
   stroke: var(--blackish);
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 10

}

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

}

1. 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%)
   }

}

1. PlateContainer {

   overflow: hidden

}

1. Plate_4Bacs {

   width: 100%;
   max-height: 600px;
   overflow: visible;
   position: relative;
   top: 0

}

1. Plate_4Bacs g.bac1,
2. Plate_4Bacs g.bac2,
3. Plate_4Bacs g.bac3,
4. 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
   }

}

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

}

1. Plate_4Bacs .bacOutline {

   fill-rule: evenodd;
   clip-rule: evenodd;
   fill: #FFF;
   stroke: var(--blackish);
   stroke-width: 1.5

}

1. Plate_4Bacs .DNA {

   fill-rule: evenodd;
   clip-rule: evenodd;
   stroke-width: 2

}

1. Plate_4Bacs .DNA.orange {

   fill: #fff;
   stroke: var(--main)

}

1. Plate_4Bacs .DNA.cyan {

   fill: #fff;
   stroke: var(--accentCyan)

}

1. Plate_4Bacs .DNA.red {

   fill: #fff;
   stroke: var(--accentRed)

}

1. Plate_4Bacs .circle {

   fill: none;
   stroke: var(--blackish);
   stroke-width: 2;
   stroke-miterlimit: 10

}

1. Plate_4Bacs .totalBox {

   fill: none

}

1. HighThroughput {

   position: absolute;
   bottom: 0;
   left: 0;
   margin: auto;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: translate(-12.3%, 45.5%) scale(6.16);
   transform: translate(-12.3%, 45.5%) scale(6.16);
   opacity: 0

}

1. 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
   }

}

1. HighThroughput .wellPlate {

   fill: none;
   stroke: var(--blackish);
   stroke-width: .25;
   stroke-miterlimit: 10

}

1. HighThroughput .wellPlateWells {

   fill: url(#circlefill)

}

1. counterBox {

   background: var(--accent1);
   color: var(--whiteish);
   padding: 25px 40px;
   border-radius: 20px;
   margin: 0 30px;
   text-align: center;
   font-size: 27px

}

1. counterBox span.grouped {

   display: block;
   padding: 10px 0;
   font-size: 35px

}

1. counterBox span.counter {

   font-size: 50px;
   padding-right: 10px

}

1. 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%

}

1. LogoSVG #EyesMouth,
2. LogoSVG #Leiden,
3. LogoSVG #NewBac {

   opacity: 0

}

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

}

1. 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)

}

1. LogoSVG .darkGreen {

   color: #166837;
   fill: currentColor

}

1. LogoSVG .lightGreen {

   color: #98CB99;
   fill: currentColor

}

1. LogoSVG .red {

   color: #F26B68;
   fill: #838687

}

1. LogoSVG .main {

   color: #ffb375;
   fill: #838687

}

1. LogoSVG .yellow {

   color: #FAF281;
   fill: #838687

}

1. LogoSVG .accent2 {

   color: #49BEAA;
   fill: #838687

}

1. LogoSVG .lightBlue {

   color: #5FC8D8;
   fill: #838687;
   fill: currentColor

}

1. LogoSVG .oceanBlue {

   color: #64A3D7;
   fill: #838687;
   fill: currentColor

}

1. LogoSVG .darkBlue {

   color: #456990;
   fill: #838687;
   fill: currentColor

}

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

}

1. LogoSVG .grey {

   fill: #838687

}

1. LogoSVG #Cog {

   -webkit-transform-origin: 8.2881% 51.0033%;
   transform-origin: 8.2881% 51.0033%

}

1. LogoSVG .Eye:first-of-type {

   -webkit-transform-origin: 33.072% 28.0692%;
   transform-origin: 33.072% 28.0692%

}

1. 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)
   }

}

1. LogoSVG .Eye {

   fill: none;
   stroke: #000;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-miterlimit: 10

}

.WithFill {

   fill-rule: evenodd;
   clip-rule: evenodd

}

1. LogoSVG .FrutselOrange {

   fill: none;
   stroke: #F58460;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-miterlimit: 10

}

1. LogoSVG .FrutselBlue {

   fill: none;
   stroke: #5FC8D8;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 10

}

1. LogoSVG .FrutselPurple {

   fill: none;
   stroke: #933F98;
   stroke-width: 3;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-miterlimit: 10

}

div#Fsos {

   font-size: 50px;
   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: 550px;
       height: 420px;
   }

   .HPblock:nth-of-type(2n+1) {
       grid-template-columns: 300px auto
   }

   .HPblock:nth-of-type(2n+2) {
       grid-template-columns: auto 300px
   }
   .HPblock:nth-of-type(2n+1) .text {
        grid-column: 2;
        grid-row: 1
   }  
    .HPblock:nth-of-type(2n+1) .fig{
        grid-column: 1;
        grid-row: 1
   } 
    .HPblock:nth-of-type(2n+2) .fig{
        grid-column: 1;
        grid-row: 1
   } 
    .HPblock:nth-of-type(2n+2) .fig{
        grid-column: 2;
        grid-row: 1
   } 

.HPblock:nth-of-type(2n+1) .text {

   grid-column: 2;
   grid-row: 1

}

   #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: 550px;
       height: 420px;
   }

   .HPblock:nth-of-type(2n+1) {
       grid-template-columns: 130px auto
   }

   .HPblock:nth-of-type(2n+2) {
       grid-template-columns: auto 130px
   }
   .HPblock:nth-of-type(2n+1) .text {
        grid-column: 2;
        grid-row: 1
   } 

.HPblock:nth-of-type(2n+1) .fig{

   grid-column: 1;
   grid-row: 1

} .HPblock:nth-of-type(2n+2) .fig{

   grid-column: 2;
   grid-row: 1

}

   #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%;
   }
   .fig img{
       width: 200px;
   }
   .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)
   }
   .HPblock .text .innerText ul li p{
       text-align: left!important;
   }
   #SOSMorph {
       max-width: 90vw
   }

   .HPblock:nth-of-type(2n+1),
   .HPblock:nth-of-type(2n+2) {
       grid-template-columns: auto
   }
   .HPblockSchool{
       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
   }

} .combineImg{

   padding: 0px

} .combineImg figure{

   margin: 0px;
   padding:0px;

} .combineImg img{

   margin:0px!important;
   border-radius: 0px;

} .combineImg img hover{

   background: rgba(30%,0%,0%,0.6);

}