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

Latest revision as of 17:45, 13 October 2018

.fonas { background-color: #F2F2F2; } .headeris{ } .i11 { font-family: "ikaros"; font-style: normal; font-size: 3vw; margin-left: 5%; } .i12 { font-family: "ikaros"; font-style: normal; font-size: 3vw; margin-left: 30%; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .introtxt5 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 13.56px; text-align: center; margin-left: 80%; margin-top: -10%; z-index: 1; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .introtxt10 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 30%; margin-left: -15%; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; z-index: 1 } .introtxt16 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 85%; margin-left: 50%; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; z-index: 1 } .introtxt22 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 130%; margin-left: 0%; z-index: 1; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0 } .introtxt26 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 190%; margin-left: 40%; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; z-index: 1; } .introtxt28 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 200%; margin-left: 65%; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; z-index: 1; } .introtxt32 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 245%; margin-left: -10%; z-index: 1; white-space:nowrap; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0 } .introtxt35 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 255%; margin-left: 5%; z-index: 1; white-space:nowrap; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0 } .i111 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 320%; margin-left: 7%; z-index: 1; white-space:nowrap; } .i112 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 2vw; text-align: center; margin-top: 330%; margin-left: 32%; z-index: 1; white-space:nowrap; } .i113 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 3vw; text-align: center; margin-top: 350%; width: 100%; z-index: 1; white-space:nowrap; } .poslink{ text-indent: 100em; } .matuoklis1{ position:relative; top: -50em; } .matuoklis2{ position:relative; margin-top: 200%; } .overflowcontrol{ margin: auto; width: 1200px; } .container{ margin: auto; width: 1200px; } .intro1{ white-space:nowrap; position:relative; width: 80%; margin: auto; margin-top: 10%; margin-bottom: 320%; } @media only screen and (min-width: 800px) { .introlib{ white-space:nowrap; position:relative; width: 60%; margin: auto; } } .introxxx{ position:absolute; width: 70%; } .margin{ margin-left:5%; margin-right:5%; } .igmA { position: absolute; z-index: 1; } .igmB { position: absolute; z-index: 6; } .igmB5 { position: absolute; -webkit-clip-path: inset(0% 2% 80% 66%); clip-path: inset(0% 2% 80% 66%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB10 { position: absolute; -webkit-clip-path: inset(12% 47% 70% 5%); clip-path: inset(12% 47% 70% 5%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB16 { position: absolute; -webkit-clip-path: inset(20% 10% 55% 50%); clip-path: inset(20% 10% 55% 50%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB22 { position: absolute; -webkit-clip-path: inset(45% 47% 38% 5%); clip-path: inset(45% 47% 38% 5%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB26 { position: absolute; -webkit-clip-path: inset(62% 40% 27% 25%); clip-path: inset(62% 40% 27% 25%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB28 { position: absolute; -webkit-clip-path: inset(62% 10% 23% 50%); clip-path: inset(62% 10% 23% 50%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB32 { position: absolute; -webkit-clip-path: inset(77% 10% 10% 50%); clip-path: inset(77% 10% 10% 50%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmB35 { position: absolute; -webkit-clip-path: inset(80% 30% 0% 0%); clip-path: inset(80% 30% 0% 0%); z-index: 6; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA0 { position: absolute; -webkit-clip-path: inset(0% 83% 97% 0%); clip-path: inset(0% 83% 97% 0%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA1 { position: absolute; -webkit-clip-path: inset(0% 83% 97% 0%); clip-path: inset(0% 83% 97% 0%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA2 { position: absolute; -webkit-clip-path: inset(3% 66% 95% 18%); clip-path: inset(3% 66% 95% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA3 { position: absolute; -webkit-clip-path: inset(5% 49% 92% 34%); clip-path: inset(5% 49% 92% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA4 { position: absolute; -webkit-clip-path: inset(7% 22% 90.5% 50%); clip-path: inset(7% 22% 90.5% 50%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA5 { position: absolute; -webkit-clip-path: inset(9% 5% 88% 66%); clip-path: inset(9% 5% 88% 66%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA6 { position: absolute; -webkit-clip-path: inset(11% 0% 84% 84%); clip-path: inset(11% 0% 84% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA7 { position: absolute; -webkit-clip-path: inset(16% 0% 80% 84%); clip-path: inset(16% 0% 80% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA8 { position: absolute; -webkit-clip-path: inset(20% 5% 76% 67%); clip-path: inset(20% 5% 76% 67%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA9 { position: absolute; -webkit-clip-path: inset(22% 22% 74% 51%); clip-path: inset(22% 22% 74% 51%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA10 { position: absolute; -webkit-clip-path: inset(24% 47% 73% 34%); clip-path: inset(24% 47% 73% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA11 { position: absolute; -webkit-clip-path: inset(26% 65% 71% 18%); clip-path: inset(26% 65% 71% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA12 { position: absolute; -webkit-clip-path: inset(28% 82% 67.5% 4%); clip-path: inset(28% 82% 67.5% 4%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA13 { position: absolute; -webkit-clip-path: inset(32.5% 83% 64% 4%); clip-path: inset(32.5% 83% 64% 4%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA14 { position: absolute; -webkit-clip-path: inset(34.5% 66% 60.5% 18%); clip-path: inset(34.5% 66% 60.5% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA15 { position: absolute; -webkit-clip-path: inset(36.5% 49% 58.5% 34%); clip-path: inset(36.5% 49% 58.5% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA16 { position: absolute; -webkit-clip-path: inset(38.5% 24% 57% 51%); clip-path: inset(38.5% 24% 57% 51%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA17 { position: absolute; -webkit-clip-path: inset(40.5% 7% 55% 67%); clip-path: inset(40.5% 7% 55% 67%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA18 { position: absolute; -webkit-clip-path: inset(44.5% 2% 51% 84%); clip-path: inset(44.5% 2% 51% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA19 { position: absolute; -webkit-clip-path: inset(49.5% 2% 47% 84%); clip-path: inset(49.5% 2% 47% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA20 { position: absolute; -webkit-clip-path: inset(53% 7% 43% 66%); clip-path: inset(53% 7% 43% 66%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA21 { position: absolute; -webkit-clip-path: inset(55% 31% 39% 50%); clip-path: inset(55% 31% 39% 50%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA22 { position: absolute; -webkit-clip-path: inset(57% 49% 36.5% 34%); clip-path: inset(57% 49% 36.5% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA23 { position: absolute; -webkit-clip-path: inset(59% 66% 33.5% 18%); clip-path: inset(59% 66% 33.5% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA24 { position: absolute; -webkit-clip-path: inset(61% 83% 34% 2%); clip-path: inset(61% 83% 34% 2%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA25 { position: absolute; -webkit-clip-path: inset(65.5% 83% 31% 2%); clip-path: inset(65.5% 83% 31% 2%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA26 { position: absolute; -webkit-clip-path: inset(67.5% 65% 28% 18%); clip-path: inset(67.5% 65% 28% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA27 { position: absolute; -webkit-clip-path: inset(69.5% 48% 26% 35%); clip-path: inset(69.5% 48% 26% 35%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA28 { position: absolute; -webkit-clip-path: inset(71.5% 31% 24% 52%); clip-path: inset(71.5% 31% 24% 52%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA29 { position: absolute; -webkit-clip-path: inset(73.5% 14% 21.5% 68%); clip-path: inset(73.5% 14% 21.5% 68%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA30 { position: absolute; -webkit-clip-path: inset(75.5% 2% 18% 84%); clip-path: inset(75.5% 2% 18% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA31 { position: absolute; -webkit-clip-path: inset(82% 2% 13% 84%); clip-path: inset(82% 2% 13% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA32 { position: absolute; -webkit-clip-path: inset(85% 15% 8% 68%); clip-path: inset(85% 15% 8% 68%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA33 { position: absolute; -webkit-clip-path: inset(87% 32% 6% 52%); clip-path: inset(87% 32% 6% 52%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA34 { position: absolute; -webkit-clip-path: inset(89% 49% 4% 35%); clip-path: inset(89% 49% 4% 35%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA35 { position: absolute; -webkit-clip-path: inset(91% 66% 2% 18%); clip-path: inset(91% 66% 2% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmA36 { position: absolute; -webkit-clip-path: inset(93% 83% 0% 2%); clip-path: inset(93% 83% 0% 2%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .txt1{ font-family: "ikaros"; font-style: normal; font-size: 150%; margin-left: 60%; display: none; z-index: 10; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-delay: 4s; animation-delay: 4s; } .i21 { font-family: "ikaros"; font-style: normal; font-size: 250%; text-align: center; visibility: hidden; z-index: 5; margin-bottom: 10%; } .i22 { font-family: "ikaros"; font-style: normal; font-size: 250%; text-align: center; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; visibility: hidden } .startext{ visibility: hidden; position: absolute; top: 20%; text-align: center; width: 100%; font-family: "ikaros"; font-style: normal; font-size: 2vh; text-align: center; color: #ffffffda; z-index: 10; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .startrash{ position: relative; top:20%; font-family: "ikaros"; font-style: normal; font-size: 200%; text-align: center; color: #ffffffda; z-index: 0; opacity: 0; } .klipis{ position: relative; -webkit-clip-path: inset(0% 65% 80% 20%); clip-path: inset(0% 65% 80% 20%); } .i24 { font-family: "ikaros"; font-style: normal; font-size: 200%; text-align: center; margin-bottom: 5%; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; visibility: hidden } .i25 { font-family: "ikaros"; font-style: normal; font-size: 200%; text-align: center; margin-top: 5%; margin-bottom: 3%; visibility: hidden; } .i26 { font-family: "ikaros"; font-style: normal; font-size: 200%; text-align: center; margin-top: 10%; margin-bottom: 3%; visibility: hidden; -webkit-animation-delay: 1s; animation-delay: 1s; } .prothold{ position: relative; overflow: hidden; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; margin-bottom: 10%; visibility: hidden; z-index: 1; } .logogrey{ display: block; margin-left: auto; margin-right: auto; margin-bottom: 15%; width: 30%; visibility: hidden; -webkit-animation-delay: 1s; animation-delay: 1s; } .libraryholder{ position: relative; display: block; margin-left: auto; margin-right: auto; width: 60%; margin-bottom: 110%; } .dnalibrarytxt { font-family: "ikaros"; font-style: normal; font-size: 25px; text-align: center; margin-top: 5%; visibility: hidden; } .dnalibrary{ -webkit-clip-path: inset(0% 0% 80% 0%); clip-path: inset(0% 0% 80% 0%); position: absolute; visibility: hidden; } .dnalibraryleft{ -webkit-clip-path: inset(0% 0% 80% 0%); clip-path: inset(0% 0% 80% 0%); } .dnalibraryright{ -webkit-clip-path: inset(0% 0% 80% 0%); clip-path: inset(0% 0% 80% 0%); } .dna11{ -webkit-clip-path: inset(15% 80% 80% 5%); clip-path: inset(15% 80% 80% 5%); visibility: hidden; position: absolute; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-name: dna11; animation-name: dna11; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; /*when the spec is finished*/ } @-webkit-keyframes dna11{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(34.5%,10%) ; transform: translate(34.5%,10%) ; } 100% { -webkit-transform: translate(34.5%,25%) ; transform: translate(34.5%,25%) ; } } @keyframes dna11{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(34.5%,10%) ; transform: translate(34.5%,10%) ; } 100% { -webkit-transform: translate(34.5%,25%) ; transform: translate(34.5%,25%) ; } } .dna12{ -webkit-clip-path: inset(15% 40% 80% 40%); clip-path: inset(15% 40% 80% 40%); visibility: hidden; position: absolute; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; /*when the spec is finished*/ } @-webkit-keyframes dna12{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(-2.4%,10%) ; transform: translate(-2.4%,10%) ; } 100% { -webkit-transform: translate(-2.4%,22%) ; transform: translate(-2.4%,22%) ; } } @keyframes dna12{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(-2.4%,10%) ; transform: translate(-2.4%,10%) ; } 100% { -webkit-transform: translate(-2.4%,22%) ; transform: translate(-2.4%,22%) ; } } .dna13{ -webkit-clip-path: inset(15% 5% 80% 75%); clip-path: inset(15% 5% 80% 75%); visibility: hidden; position: absolute; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; /*when the spec is finished*/ } @-webkit-keyframes dna13{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(-38%,10%) ; transform: translate(-38%,10%) ; } 100% { -webkit-transform: translate(-38%,18.5%) ; transform: translate(-38%,18.5%) ; } } @keyframes dna13{ 0% { -webkit-transform: translate(0px,0px) ; transform: translate(0px,0px) ; } 50% { -webkit-transform: translate(-38%,10%) ; transform: translate(-38%,10%) ; } 100% { -webkit-transform: translate(-38%,18.5%) ; transform: translate(-38%,18.5%) ; } } .chippng{ -webkit-clip-path: inset(25% 10% 20% 10%); clip-path: inset(25% 10% 20% 10%); position: absolute; visibility: hidden; z-index: 5; } .dnaarr1{ -webkit-clip-path: inset(10% 30% 65% 30%); clip-path: inset(10% 30% 65% 30%); position: absolute; visibility: hidden; -webkit-animation-delay: 5.5s; animation-delay: 5.5s; } .encapsulationtxt { position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 20px; margin-top: 60%; margin-left: 60%; white-space: nowrap; visibility: hidden; } @-webkit-keyframes dna112{ 0% { -webkit-transform: translate(34.5%,25%) ; transform: translate(34.5%,25%) ; } 100% { -webkit-transform: translate(35.5%,46%) ; transform: translate(35.5%,46%) ; } } @keyframes dna112{ 0% { -webkit-transform: translate(34.5%,25%) ; transform: translate(34.5%,25%) ; } 100% { -webkit-transform: translate(35.5%,46%) ; transform: translate(35.5%,46%) ; } } .dnaarr21{ -webkit-clip-path: inset(40% 50% 30% 10%); clip-path: inset(40% 50% 30% 10%); visibility: hidden; position: absolute; } .dnaarr22{ -webkit-clip-path: inset(40% 10% 30% 50%); clip-path: inset(40% 10% 30% 50%); visibility: hidden; position: absolute; } .droplet1{ -webkit-clip-path: inset(30% 40% 30% 40%); clip-path: inset(30% 40% 30% 40%); position: absolute; visibility: hidden; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; /*when the spec is finished*/ } @-webkit-keyframes droplet1{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; opacity:0.1; } 25% { opacity:0.8; } 100% { -webkit-transform: translate(0%,10%) ; transform: translate(0%,10%) ; opacity:1; } } @keyframes droplet1{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; opacity:0.1; } 25% { opacity:0.8; } 100% { -webkit-transform: translate(0%,10%) ; transform: translate(0%,10%) ; opacity:1; } } .droplet2{ -webkit-clip-path: inset(70% 10% 0% 10%); clip-path: inset(70% 10% 0% 10%); visibility: hidden; position: absolute; } .recmodholder{ position: relative; display: block; margin-left: auto; margin-right: auto; width: 60%; margin-bottom: 120%; } .droplet21{ -webkit-clip-path: inset(0% 29% 62% 30%); clip-path: inset(0% 29% 62% 30%); visibility: hidden; position: absolute; } .droparr1{ -webkit-clip-path: inset(0% 29% 62% 30%); clip-path: inset(0% 29% 62% 30%); visibility: hidden; position: absolute; } .biomolecule1{ -webkit-clip-path: inset(0% 29% 62% 30%); clip-path: inset(0% 29% 62% 30%); visibility: hidden; position: absolute; } .outarrow1{ -webkit-clip-path: inset(26% 29% 50% 25%); clip-path: inset(26% 29% 50% 25%); visibility: hidden; position: absolute; } .droplet22{ -webkit-clip-path: inset(30% 55% 25% 0%); clip-path: inset(30% 55% 25% 0%); visibility: hidden; position: absolute; } .droparr2{ -webkit-clip-path: inset(30% 55% 25% 0%); clip-path: inset(30% 55% 25% 0%); visibility: hidden; position: absolute; } .recmod{ -webkit-clip-path: inset(30% 55% 25% 0%); clip-path: inset(30% 55% 25% 0%); visibility: hidden; position: absolute; } .outarrow2{ -webkit-clip-path: inset(50% 20% 20% 0%); clip-path: inset(50% 20% 20% 0%); visibility: hidden; position: absolute; } .droplet23{ -webkit-clip-path: inset(55% 0% 0% 40%); clip-path: inset(55% 0% 0% 40%); visibility: hidden; position: absolute; } .droparr3{ -webkit-clip-path: inset(55% 0% 0% 40%); clip-path: inset(55% 0% 0% 40%); visibility: hidden; position: absolute; } .modif{ -webkit-clip-path: inset(55% 0% 0% 40%); clip-path: inset(55% 0% 0% 40%); visibility: hidden; position: absolute; } .moddna{ -webkit-clip-path: inset(65% 30% 15% 55%); clip-path: inset(65% 30% 15% 55%); visibility: hidden; position: absolute; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; z-index: 6; } .moddnacolor{ -webkit-clip-path: inset(65% 30% 15% 55%); clip-path: inset(65% 30% 15% 55%); visibility: hidden; position: absolute; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; z-index: 7; opacity: 0; } .nanoarr1{ visibility: hidden; position: absolute; } @-webkit-keyframes nanoporeseq{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; } 40% { -webkit-transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:1 } 100% { -webkit-transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:0 } } @keyframes nanoporeseq{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; } 40% { -webkit-transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:1 } 100% { -webkit-transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:0 } } @-webkit-keyframes nanoporeseqcolor{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; } 40% { -webkit-transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:0; } 100% { -webkit-transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:1; } } @keyframes nanoporeseqcolor{ 0% { -webkit-transform: translate(0%,0%) ; transform: translate(0%,0%) ; } 40% { -webkit-transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,65%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:0; } 100% { -webkit-transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; transform: translate(-46%,132%) rotate(-38deg) scaleX(1.5) scaleY(1.5) ; opacity:1; } } .nanodiv{ margin-top: 130%; bottom:200%; } .nanoporeseq{ visibility: hidden; position: absolute; } .nanoarr4{ visibility: hidden; position: absolute; } #mygtukas1{ border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; font-family: "ikaros"; width: 25%; left: 89%; top: 5%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; z-index: 6; visibility: hidden; position: absolute; } .mygtukas1txt{ position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 25px; top: 5%; left: 70%; visibility: hidden; white-space: nowrap; } #mygtukas1:hover, #mygtukas2:hover, #mygtukas3:hover, #mygtukas01:hover { background-color: #ffffff; } #mygtukas2{ border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; font-family: "ikaros"; width: 25%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; visibility: hidden; position: absolute; top: 46%; left: 89%; } .mygtukas2txt{ position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 25px; top: 35%; left: 72%; visibility: hidden; white-space: nowrap; } #mygtukas3{ visibility: hidden; border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; font-family: "ikaros"; width: 25%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; top: 79%; position: absolute; left: 89%; } .mygtukas3txt{ position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 25px; top: 85%; left: 72%; visibility: hidden; white-space: nowrap; } #mygtukas4{ visibility: hidden; border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; font-family: "ikaros"; width: 25%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; top: 105%; position: absolute; left: 89%; } .mygtukas4txt{ position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 25px; white-space: nowrap; top: 110%; left: 66%; visibility: hidden; } .mygtukas4txt2{ position: absolute; visibility: hidden; font-family: "ikaros"; font-style: normal; font-size: 25px; text-align: center; margin-top: 108%; } #mygtukas01{ border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; width: 25%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; z-index: 6; visibility: visible; } .mygtukas01 { position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 2vw; margin-top: 75%; width: 73%; left: 87%; } .sudastekstas{ visibility: hidden; } .sudastekstas2{ visibility: hidden; } .image-wrapperis { width: 170%; position:relative; left: -34%; } .moddnacoloract{ -webkit-clip-path: inset(65% 30% 15% 55%); clip-path: inset(65% 30% 15% 55%); position: absolute; margin-top: -6%; margin-left: -21.5%; -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); -ms-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); z-index: 7; opacity: 0; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .moddnacoloract2{ -webkit-clip-path: inset(65% 30% 15% 55%); clip-path: inset(65% 30% 15% 55%); position: absolute; margin-top: -6%; margin-left: -21.5%; -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); -ms-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); z-index: 8; opacity: 0; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .gnk1{ position: absolute; margin-top: 85%; -webkit-clip-path: inset(0% 90% 90% 0%); clip-path: inset(0% 90% 90% 0%); opacity: 0; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .gnk1bar{ position: absolute; margin-top: 85%; -webkit-clip-path: inset(0% 100% 90% 0%); clip-path: inset(0% 100% 90% 0%); -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes gnk1bar { 0% { -webkit-clip-path: inset(0% 100% 90% 0%); clip-path: inset(0% 100% 90% 0%); } 100% { -webkit-clip-path: inset(0% 90% 90% 0%); clip-path: inset(0% 90% 90% 0%); } } @keyframes gnk1bar { 0% { -webkit-clip-path: inset(0% 100% 90% 0%); clip-path: inset(0% 100% 90% 0%); } 100% { -webkit-clip-path: inset(0% 90% 90% 0%); clip-path: inset(0% 90% 90% 0%); } } @-webkit-keyframes moddnacoloract1{ 0% { -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); opacity: 0.8; } 100% { -webkit-transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); opacity: 0; } } @keyframes moddnacoloract1{ 0% { -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); opacity: 0.8; } 100% { -webkit-transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); opacity: 0; } } @-webkit-keyframes moddnacoloract2{ 0% { -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); opacity: 0; } 100% { -webkit-transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); opacity: 1; } } @keyframes moddnacoloract2{ 0% { -webkit-transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); transform: rotate(-38deg) scaleX(0.7) scaleY(0.7); opacity: 0; } 100% { -webkit-transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); transform: translate(-22.2%,21.2%) rotate(52deg) scaleX(0.20) scaleY(0.20); opacity: 1; } } #mygtukas5{ visibility: visible; border-radius: 5px; padding: 2% 6%; font-size: 1.2vw; font-family: "ikaros"; width: 25%; background-color: #f5f5f5; -webkit-box-shadow: 0px 5px 0px 0px #f5f5f5e8; box-shadow: 0px 5px 0px 0px #f5f5f5e8; top: 175%; left: 89%; position: absolute; } .mygtukas5txt{ position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 25px; white-space: nowrap; width:90%; margin-left: 5%; margin-top: 115%; opacity: 1; -webkit-animation-delay: 8s; animation-delay: 8s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; visibility: hidden; } .genukaiblack{ position: absolute; margin-top: 85%; opacity: 0; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .genukaibar{ position: absolute; margin-top: 85%; opacity: 0; -webkit-animation-delay: 6s; animation-delay: 6s; -webkit-animation-duration: 3.5s; animation-duration: 3.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-clip-path: inset(0% 100% 0% 0%); clip-path: inset(0% 100% 0% 0%); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; z-index: 1; } .genukaicolor{ position: absolute; margin-top: 85%; opacity: 0; -webkit-animation-delay: 6s; animation-delay: 6s; -webkit-animation-duration: 3.5s; animation-duration: 3.5s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; z-index: 2; } @-webkit-keyframes genukaibar { 0% { -webkit-clip-path: ellipse(0% 51% at 0% 50%); clip-path: ellipse(0% 51% at 0% 50%); opacity: 1; } 100% { -webkit-clip-path: ellipse(120% 80% at 0% 50%); clip-path: ellipse(120% 80% at 0% 50%); opacity: 1; } } @keyframes genukaibar { 0% { -webkit-clip-path: ellipse(0% 51% at 0% 50%); clip-path: ellipse(0% 51% at 0% 50%); opacity: 1; } 100% { -webkit-clip-path: ellipse(120% 80% at 0% 50%); clip-path: ellipse(120% 80% at 0% 50%); opacity: 1; } } @-webkit-keyframes genukaicolor { 0% { -webkit-clip-path: ellipse(0% 51% at 100% 50%); clip-path: ellipse(0% 51% at 100% 50%); opacity: 1; } 100% { -webkit-clip-path: ellipse(120% 80% at 100% 50%); clip-path: ellipse(120% 80% at 100% 50%); opacity: 1; } } @keyframes genukaicolor { 0% { -webkit-clip-path: ellipse(0% 51% at 100% 50%); clip-path: ellipse(0% 51% at 100% 50%); opacity: 1; } 100% { -webkit-clip-path: ellipse(120% 80% at 100% 50%); clip-path: ellipse(120% 80% at 100% 50%); opacity: 1; } } .outrodiv{ visibility: hidden; white-space:nowrap; position:relative; width: 80%; margin: auto; margin-bottom: -50%; } .sudastekstas3{ visibility: hidden; } .outrotxt1{ -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; -webkit-animation-delay: 9s; animation-delay: 9s; position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; font-size: 3vw; width: 90%; left: -5%; margin-top: 10%; } .outrotxt2{ -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; -webkit-animation-delay: 9s; animation-delay: 9s; position: absolute; text-align: center; font-family: "ikaros"; font-style: normal; width: 90%; margin-top: 5%; font-size: 3vw; left: 5%; margin-top: 20%; } .igmY4{ margin-top: 35%; clip-path: inset(0% 5% 82% 55%); position:absolute; z-index: 6; -webkit-animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .igmY10{ margin-top: 50%; clip-path: inset(10% 50% 73% 10%); position:absolute; z-index: 6; -webkit-animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .igmY15{ margin-top: 50%; clip-path: inset(20% 20% 55% 20%); position:absolute; z-index: 6; -webkit-animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .igmY23{ margin-top: 50%; clip-path: inset(40% 40% 34% 5%); position:absolute; z-index: 6; -webkit-animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .igmX1{ margin-top: 50%; position:absolute; } .igmXA{ clip-path: inset(0% 0% 34% 0%); margin-top: 50%; position:absolute; } .igmY .igmX0 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(0% 83% 97% 0%); clip-path: inset(0% 83% 97% 0%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX1 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(0% 83% 97% 0%); clip-path: inset(0% 83% 97% 0%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX2 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(3% 66% 95% 18%); clip-path: inset(3% 66% 95% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX3 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(5% 49% 92% 34%); clip-path: inset(5% 49% 92% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX4 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(7% 22% 90.5% 50%); clip-path: inset(7% 22% 90.5% 50%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX5 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(9% 5% 88% 66%); clip-path: inset(9% 5% 88% 66%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX6 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(11% 0% 84% 84%); clip-path: inset(11% 0% 84% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX7 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(16% 0% 80% 84%); clip-path: inset(16% 0% 80% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX8 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(20% 5% 76% 67%); clip-path: inset(20% 5% 76% 67%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX9 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(22% 22% 74% 51%); clip-path: inset(22% 22% 74% 51%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX10 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(24% 47% 73% 34%); clip-path: inset(24% 47% 73% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX11 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(26% 65% 71% 18%); clip-path: inset(26% 65% 71% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX12 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(28% 82% 67.5% 4%); clip-path: inset(28% 82% 67.5% 4%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX13 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(32.5% 83% 64% 4%); clip-path: inset(32.5% 83% 64% 4%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX14 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(34.5% 66% 60.5% 18%); clip-path: inset(34.5% 66% 60.5% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX15 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(36.5% 49% 58.5% 34%); clip-path: inset(36.5% 49% 58.5% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX16 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(38.5% 24% 57% 51%); clip-path: inset(38.5% 24% 57% 51%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX17 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(40.5% 7% 55% 67%); clip-path: inset(40.5% 7% 55% 67%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX18 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(44.5% 2% 51% 84%); clip-path: inset(44.5% 2% 51% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX19 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(49.5% 2% 47% 84%); clip-path: inset(49.5% 2% 47% 84%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX20 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(53% 7% 43% 66%); clip-path: inset(53% 7% 43% 66%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX21 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(55% 31% 39% 50%); clip-path: inset(55% 31% 39% 50%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX22 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(57% 49% 36.5% 34%); clip-path: inset(57% 49% 36.5% 34%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX23 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(59% 66% 33.5% 18%); clip-path: inset(59% 66% 33.5% 18%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .igmX24 { position: absolute; margin-top: 50%; -webkit-clip-path: inset(61% 83% 34% 2%); clip-path: inset(61% 83% 34% 2%); z-index: 2; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; opacity: 0; } .outrotxt4 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 13.56px; text-align: center; margin-left: 0%; margin-top: 35%; z-index: 1; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .outrotxt10 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 13.56px; text-align: center; margin-left: -10%; margin-top: 75%; z-index: 1; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .outrotxt15 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 13.56px; text-align: center; margin-left: 75%; margin-top: 140%; z-index: 1; white-space: nowrap; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .outrotxt23 { position: absolute; font-family: "ikaros"; font-style: normal; font-size: 13.56px; text-align: center; margin-left: 5%; margin-top: 180%; z-index: 1; white-space: nowrap; animation-duration: 1s; animation-fill-mode: forwards; opacity: 0; } .sdnadiv{ margin-bottom: 40%; position:relative; } .slowdnablack{ position: absolute; } .sdna1{ position:absolute;clip-path: inset(0% 92.3% 89% 0%); opacity: 0; animation-fill-mode: forwards; animation-delay: 10s;} .sdna2{ position:absolute;clip-path: inset(11% 92.3% 78% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna3{ position:absolute;clip-path: inset(22% 92.3% 67% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna4{ position:absolute;clip-path: inset(33% 92.3% 56% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna5{ position:absolute;clip-path: inset(44% 92.3% 45% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna6{ position:absolute;clip-path: inset(55% 92.3% 34% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna7{ position:absolute;clip-path: inset(66% 92.3% 23% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna8{ position:absolute;clip-path: inset(77% 92.3% 12% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna9{ position:absolute;clip-path: inset(88% 92.3% 1% 0%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna10{ position:absolute;clip-path: inset(0% 84.6% 89% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna11{ position:absolute;clip-path: inset(11% 84.6% 78% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna12{ position:absolute;clip-path: inset(22% 84.6% 67% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna13{ position:absolute;clip-path: inset(33% 84.6% 56% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna14{ position:absolute;clip-path: inset(44% 84.6% 45% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna15{ position:absolute;clip-path: inset(55% 84.6% 34% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna16{ position:absolute;clip-path: inset(66% 84.6% 23% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna17{ position:absolute;clip-path: inset(77% 84.6% 12% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna18{ position:absolute;clip-path: inset(88% 84.6% 1% 7.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna19{ position:absolute;clip-path: inset(0% 76.9% 89% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna20{ position:absolute;clip-path: inset(11% 76.9% 78% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna21{ position:absolute;clip-path: inset(22% 76.9% 67% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna22{ position:absolute;clip-path: inset(33% 76.9% 56% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna23{ position:absolute;clip-path: inset(44% 76.9% 45% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna24{ position:absolute;clip-path: inset(55% 76.9% 34% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna25{ position:absolute;clip-path: inset(66% 76.9% 23% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna26{ position:absolute;clip-path: inset(77% 76.9% 12% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna27{ position:absolute;clip-path: inset(88% 76.9% 1% 15.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna28{ position:absolute;clip-path: inset(0% 69.2% 89% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna29{ position:absolute;clip-path: inset(11% 69.2% 78% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna30{ position:absolute;clip-path: inset(22% 69.2% 67% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna31{ position:absolute;clip-path: inset(33% 69.2% 56% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna32{ position:absolute;clip-path: inset(44% 69.2% 45% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna33{ position:absolute;clip-path: inset(55% 69.2% 34% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna34{ position:absolute;clip-path: inset(66% 69.2% 23% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna35{ position:absolute;clip-path: inset(77% 69.2% 12% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna36{ position:absolute;clip-path: inset(88% 69.2% 1% 23.1%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna37{ position:absolute;clip-path: inset(0% 61.5% 89% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna38{ position:absolute;clip-path: inset(11% 61.5% 78% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna39{ position:absolute;clip-path: inset(22% 61.5% 67% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna40{ position:absolute;clip-path: inset(33% 61.5% 56% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna41{ position:absolute;clip-path: inset(44% 61.5% 45% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna42{ position:absolute;clip-path: inset(55% 61.5% 34% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna43{ position:absolute;clip-path: inset(66% 61.5% 23% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna44{ position:absolute;clip-path: inset(77% 61.5% 12% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna45{ position:absolute;clip-path: inset(88% 61.5% 1% 30.8%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna46{ position:absolute;clip-path: inset(0% 53.8% 89% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna47{ position:absolute;clip-path: inset(11% 53.8% 78% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna48{ position:absolute;clip-path: inset(22% 53.8% 67% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna49{ position:absolute;clip-path: inset(33% 53.8% 56% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna50{ position:absolute;clip-path: inset(44% 53.8% 45% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna51{ position:absolute;clip-path: inset(55% 53.8% 34% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna52{ position:absolute;clip-path: inset(66% 53.8% 23% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna53{ position:absolute;clip-path: inset(77% 53.8% 12% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna54{ position:absolute;clip-path: inset(88% 53.8% 1% 38.5%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna55{ position:absolute;clip-path: inset(0% 46.1% 89% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna56{ position:absolute;clip-path: inset(11% 46.1% 78% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna57{ position:absolute;clip-path: inset(22% 46.1% 67% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna58{ position:absolute;clip-path: inset(33% 46.1% 56% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna59{ position:absolute;clip-path: inset(44% 46.1% 45% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna60{ position:absolute;clip-path: inset(55% 46.1% 34% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna61{ position:absolute;clip-path: inset(66% 46.1% 23% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna62{ position:absolute;clip-path: inset(77% 46.1% 12% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna63{ position:absolute;clip-path: inset(88% 46.1% 1% 46.2%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna64{ position:absolute;clip-path: inset(0% 38.4% 89% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna65{ position:absolute;clip-path: inset(11% 38.4% 78% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna66{ position:absolute;clip-path: inset(22% 38.4% 67% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna67{ position:absolute;clip-path: inset(33% 38.4% 56% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna68{ position:absolute;clip-path: inset(44% 38.4% 45% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna69{ position:absolute;clip-path: inset(55% 38.4% 34% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna70{ position:absolute;clip-path: inset(66% 38.4% 23% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna71{ position:absolute;clip-path: inset(77% 38.4% 12% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna72{ position:absolute;clip-path: inset(88% 38.4% 1% 53.9%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna73{ position:absolute;clip-path: inset(0% 30.7% 89% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna74{ position:absolute;clip-path: inset(11% 30.7% 78% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna75{ position:absolute;clip-path: inset(22% 30.7% 67% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna76{ position:absolute;clip-path: inset(33% 30.7% 56% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna77{ position:absolute;clip-path: inset(44% 30.7% 45% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna78{ position:absolute;clip-path: inset(55% 30.7% 34% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna79{ position:absolute;clip-path: inset(66% 30.7% 23% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna80{ position:absolute;clip-path: inset(77% 30.7% 12% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna81{ position:absolute;clip-path: inset(88% 30.7% 1% 61.6%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna82{ position:absolute;clip-path: inset(0% 23% 89% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna83{ position:absolute;clip-path: inset(11% 23% 78% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna84{ position:absolute;clip-path: inset(22% 23% 67% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna85{ position:absolute;clip-path: inset(33% 23% 56% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna86{ position:absolute;clip-path: inset(44% 23% 45% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna87{ position:absolute;clip-path: inset(55% 23% 34% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna88{ position:absolute;clip-path: inset(66% 23% 23% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna89{ position:absolute;clip-path: inset(77% 23% 12% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna90{ position:absolute;clip-path: inset(88% 23% 1% 69.3%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna91{ position:absolute;clip-path: inset(0% 15.3% 89% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna92{ position:absolute;clip-path: inset(11% 15.3% 78% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna93{ position:absolute;clip-path: inset(22% 15.3% 67% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna94{ position:absolute;clip-path: inset(33% 15.3% 56% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna95{ position:absolute;clip-path: inset(44% 15.3% 45% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna96{ position:absolute;clip-path: inset(55% 15.3% 34% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna97{ position:absolute;clip-path: inset(66% 15.3% 23% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna98{ position:absolute;clip-path: inset(77% 15.3% 12% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna99{ position:absolute;clip-path: inset(88% 15.3% 1% 77%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna100{ position:absolute;clip-path: inset(0% 7.6% 89% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna101{ position:absolute;clip-path: inset(11% 7.6% 78% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna102{ position:absolute;clip-path: inset(22% 7.6% 67% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna103{ position:absolute;clip-path: inset(33% 7.6% 56% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna104{ position:absolute;clip-path: inset(44% 7.6% 45% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna105{ position:absolute;clip-path: inset(55% 7.6% 34% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna106{ position:absolute;clip-path: inset(66% 7.6% 23% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna107{ position:absolute;clip-path: inset(77% 7.6% 12% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna108{ position:absolute;clip-path: inset(88% 7.6% 1% 84.7%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna109{ position:absolute;clip-path: inset(0% 0% 89% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna110{ position:absolute;clip-path: inset(11% 0% 78% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna111{ position:absolute;clip-path: inset(22% 0% 67% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna112{ position:absolute;clip-path: inset(33% 0% 56% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna113{ position:absolute;clip-path: inset(44% 0% 45% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna114{ position:absolute;clip-path: inset(55% 0% 34% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna115{ position:absolute;clip-path: inset(66% 0% 23% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna116{ position:absolute;clip-path: inset(77% 0% 12% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .sdna117{ position:absolute;clip-path: inset(88% 0% 1% 92.4%); opacity: 0; animation-fill-mode: forwards; atsargai,} .logo-hd{ margin-top: 270%; display: block; margin-left: auto; margin-right: auto; width: 80%; margin-bottom: 120%; }