HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div class="glass-container">
<div class="glass">
<div class="glass__lens">
<div class="glass__lens-left">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="oval-5"></div>
<div class="tangent-4-5"></div>
<div class="oval-7"></div>
<div class="filler-1"></div>
<div class="filler-2"></div>
</div>
<div class="glass__lens-right">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="oval-5"></div>
<div class="tangent-4-5"></div>
<div class="oval-7"></div>
<div class="filler-1"></div>
<div class="filler-2"></div>
</div>
</div>
<div class="glass__tube">
<div class="circle-6"></div>
</div>
</div>
<div class="shadow">
<div class="shadow__left"></div>
<div class="shadow__right"></div>
</div>
</div>
<div class="rain noselect" translate="no" aria-hidden="true">
<div class="rain__cols" id="sl-4"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-24"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-18"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-12"><span>ル</span><span>ツ</span><span>ナ</span><span>タ</span><span>カ</span><span>ル</span><span>マ</span><span>サ</span><span>ロ</span><span>ワ</span><span>ア</span><span>ソ</span><span>セ</span><span>オ</span><span>ヒ</span><span>ザ</span></div>
<div class="rain__cols" id="sl-14"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-9"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-10"><span>ル</span><span>ツ</span><span>ナ</span><span>タ</span><span>カ</span><span>ル</span><span>マ</span><span>サ</span><span>ロ</span><span>ワ</span><span>ア</span><span>ソ</span><span>セ</span><span>オ</span><span>ヒ</span><span>ザ</span></div>
<div class="rain__cols" id="sl-1"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-17"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-20"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-5"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-6"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-8"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-13"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-19"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-2"><span>サ</span><span>タ</span><span>カ</span><span>ア</span><span>ナ</span><span>ニ</span><span>ツ</span><span>ロ</span><span>ヒ</span><span>ル</span><span>マ</span><span>ル</span><span>セ</span><span>ワ</span><span>オ</span><span>メ</span></div>
<div class="rain__cols" id="sl-25"><span>ル</span><span>ツ</span><span>ナ</span><span>タ</span><span>カ</span><span>ル</span><span>マ</span><span>サ</span><span>ロ</span><span>ワ</span><span>ア</span><span>ソ</span><span>セ</span><span>オ</span><span>ヒ</span><span>ザ</span></div>
<div class="rain__cols" id="sl-23"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-11"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-21"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-16"><span>ル</span><span>ア</span><span>ナ</span><span>ワ</span><span>ツ</span><span>マ</span><span>ロ</span><span>オ</span><span>サ</span><span>タ</span><span>ソ</span><span>ヒ</span><span>セ</span><span>デ</span><span>ル</span><span>ザ</span></div>
<div class="rain__cols" id="sl-3"><span>サ</span><span>タ</span><span>ナ</span><span>ル</span><span>ソ</span><span>セ</span><span>ア</span><span>マ</span><span>ワ</span><span>ロ</span><span>デ</span><span>オ</span><span>ザ</span><span>ツ</span><span>プ</span><span>ル</span></div>
<div class="rain__cols" id="sl-22"><span>カ</span><span>サ</span><span>ル</span><span>ツ</span><span>ナ</span><span>ア</span><span>タ</span><span>ニ</span><span>マ</span><span>ヒ</span><span>ロ</span><span>ル</span><span>ワ</span><span>セ</span><span>ソ</span><span>メ</span></div>
<div class="rain__cols" id="sl-15"><span>ル</span><span>ツ</span><span>ナ</span><span>タ</span><span>カ</span><span>ル</span><span>マ</span><span>サ</span><span>ロ</span><span>ワ</span><span>ア</span><span>ソ</span><span>セ</span><span>オ</span><span>ヒ</span><span>ザ</span></div>
<div class="rain__cols" id="sl-7"><span>サ</span><span>タ</span><span>カ</span><span>ア</span><span>ナ</span><span>ニ</span><span>ツ</span><span>ロ</span><span>ヒ</span><span>ル</span><span>マ</span><span>ル</span><span>セ</span><span>ワ</span><span>オ</span><span>メ</span></div>
</div>
<div class="skeleton">
<div class="skeleton__lens-left">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="oval-5"></div>
<div class="tangent-4-5"></div>
<div class="oval-7"></div>
<div class="filler-1"></div>
<div class="filler-2"></div>
</div>
<div class="skeleton__lens-right">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="oval-5"></div>
<div class="tangent-4-5"></div>
<div class="oval-7"></div>
<div class="filler-1"></div>
<div class="filler-2"></div>
</div>
</div>
/*
So I say 3900 lines, but I actually manually wrote like 800 lines.
Rest of it was compiled to CSS via Sass.
I have commented the whole file for your ease, no need to panic.
If you are speedrunning, uncomment line 3765 to get the gist.
Else, enjoy... I guess.
*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
/* Custom properties */
:root {
/* Colors */
--bgColor: #000;
--lens: #0f0f0f;
--red: #cf2020;
--blue: #2b2bc5;
--black: #111010;
--fontColor: #2aff2a;
/* Values */
--scaleFactor: 50px;
--glowTime: 2000ms;
--timingFunction: ease;
}
*,
*::before,
*::after {
padding: 0;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "M PLUS 1p", sans-serif;
background-color: var(--bgColor);
/* Flexbox for centering content */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
/* I use 'em' as the standard unit so changing this will scale the sketch */
font-size: var(--scaleFactor);
overflow: hidden;
/*
Learnt about this from Amit's article, link in the barren file.
Get it? Barren file? sketch.js? because, you know, it has no code? Right??
You get it right?? Barren because... Alright I should stop, I know you get it.
*/
-webkit-perspective: 15em;
perspective: 15em;
}
.noselect {
/* For rain text, would have been bad if it were selectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Some helper classes for modelling the sunglass */
.bordered {
border: #fff 1px solid;
}
.circle-1 {
position: absolute;
border-radius: 50%;
width: 1em;
height: 1em;
}
.circle-2 {
position: absolute;
border-radius: 50%;
width: 2.9em;
height: 2.9em;
}
.circle-3 {
position: absolute;
border-radius: 50%;
width: 7.1em;
height: 7.1em;
}
.circle-4 {
position: absolute;
border-radius: 50%;
width: 0.7em;
height: 0.7em;
}
.oval-5 {
position: absolute;
border-radius: 50%;
width: 1.87em;
aspect-ratio: 0.831521;
}
.tangent-4-5 {
position: absolute;
width: 0.5em;
height: 0.5em;
}
.oval-7 {
position: absolute;
border-radius: 50%;
width: 3.556em;
aspect-ratio: 1.160442;
}
.filler-1 {
position: absolute;
width: 1.7em;
height: 2em;
}
.filler-2 {
position: absolute;
border-radius: 50%;
width: 1.5em;
aspect-ratio: 4;
}
/* Animations */
@-webkit-keyframes glow-animation {
0% {
opacity: 0;
font-weight: 200;
}
49.9% {
opacity: 0;
font-weight: 300;
}
50% {
opacity: 1;
font-weight: 300;
}
100% {
opacity: 0;
font-weight: 900;
}
}
@keyframes glow-animation {
0% {
opacity: 0;
font-weight: 200;
}
49.9% {
opacity: 0;
font-weight: 300;
}
50% {
opacity: 1;
font-weight: 300;
}
100% {
opacity: 0;
font-weight: 900;
}
}
/* Rain animation section */
.rain {
position: absolute;
width: 100vmin;
height: 100vmin;
color: var(--fontColor);
top: 0%;
left: 50%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
display: -ms-grid;
display: grid;
-ms-grid-rows: 1fr;
grid-template-rows: 1fr;
/* 25 columns of letter */
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.rain__cols {
display: -ms-inline-grid;
display: inline-grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
/* 16 rows of letters */
-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
}
.rain__cols > span {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
font-size: 5vmin;
/* we will add delay animation to this element to create the rain effect */
-webkit-animation: glow-animation var(--glowTime) var(--timingFunction)
infinite;
animation: glow-animation var(--glowTime) var(--timingFunction) infinite;
opacity: 0;
text-align: center;
}
/*
Okay, so next part is to add delays to each of the 400 (ie, 25 cols * 16 rows)
elements. I didn't actually do this manually, would have been sick if I did though,
but then I remembered I have a life and some self-esteem.
I used Sass to do a for loop to add delays and then I compiled it to regular CSS.
I don't think it counts as cheating.
Skip to line 3380 for the next section.
There may or may not be some Easter eggs in between. Just saying.
*/
#sl-1 > span:nth-child(1) {
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
#sl-1 > span:nth-child(2) {
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
}
#sl-1 > span:nth-child(3) {
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
#sl-1 > span:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#sl-1 > span:nth-child(5) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#sl-1 > span:nth-child(6) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-1 > span:nth-child(7) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-1 > span:nth-child(8) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-1 > span:nth-child(9) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-1 > span:nth-child(10) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-1 > span:nth-child(11) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-1 > span:nth-child(12) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-1 > span:nth-child(13) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-1 > span:nth-child(14) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-1 > span:nth-child(15) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-1 > span:nth-child(16) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-1 > span:nth-child(17) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-1 > span:nth-child(18) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-1 > span:nth-child(19) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-1 > span:nth-child(20) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-1 > span:nth-child(21) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-1 > span:nth-child(22) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-1 > span:nth-child(23) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-1 > span:nth-child(24) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-1 > span:nth-child(25) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-2 > span:nth-child(1) {
-webkit-animation-delay: 0.24s;
animation-delay: 0.24s;
}
#sl-2 > span:nth-child(2) {
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
#sl-2 > span:nth-child(3) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#sl-2 > span:nth-child(4) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#sl-2 > span:nth-child(5) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-2 > span:nth-child(6) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-2 > span:nth-child(7) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-2 > span:nth-child(8) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-2 > span:nth-child(9) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-2 > span:nth-child(10) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-2 > span:nth-child(11) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-2 > span:nth-child(12) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-2 > span:nth-child(13) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-2 > span:nth-child(14) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-2 > span:nth-child(15) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-2 > span:nth-child(16) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-2 > span:nth-child(17) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-2 > span:nth-child(18) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-2 > span:nth-child(19) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-2 > span:nth-child(20) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-2 > span:nth-child(21) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-2 > span:nth-child(22) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-2 > span:nth-child(23) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-2 > span:nth-child(24) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-2 > span:nth-child(25) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-3 > span:nth-child(1) {
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
#sl-3 > span:nth-child(2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#sl-3 > span:nth-child(3) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#sl-3 > span:nth-child(4) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-3 > span:nth-child(5) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-3 > span:nth-child(6) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-3 > span:nth-child(7) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-3 > span:nth-child(8) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-3 > span:nth-child(9) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-3 > span:nth-child(10) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-3 > span:nth-child(11) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-3 > span:nth-child(12) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-3 > span:nth-child(13) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-3 > span:nth-child(14) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-3 > span:nth-child(15) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-3 > span:nth-child(16) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-3 > span:nth-child(17) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-3 > span:nth-child(18) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-3 > span:nth-child(19) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-3 > span:nth-child(20) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-3 > span:nth-child(21) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-3 > span:nth-child(22) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-3 > span:nth-child(23) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-3 > span:nth-child(24) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-3 > span:nth-child(25) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-4 > span:nth-child(1) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#sl-4 > span:nth-child(2) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#sl-4 > span:nth-child(3) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-4 > span:nth-child(4) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-4 > span:nth-child(5) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-4 > span:nth-child(6) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-4 > span:nth-child(7) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-4 > span:nth-child(8) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-4 > span:nth-child(9) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-4 > span:nth-child(10) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-4 > span:nth-child(11) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-4 > span:nth-child(12) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-4 > span:nth-child(13) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-4 > span:nth-child(14) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-4 > span:nth-child(15) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-4 > span:nth-child(16) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-4 > span:nth-child(17) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-4 > span:nth-child(18) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-4 > span:nth-child(19) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-4 > span:nth-child(20) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-4 > span:nth-child(21) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-4 > span:nth-child(22) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-4 > span:nth-child(23) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-4 > span:nth-child(24) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-4 > span:nth-child(25) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-5 > span:nth-child(1) {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
#sl-5 > span:nth-child(2) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-5 > span:nth-child(3) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-5 > span:nth-child(4) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-5 > span:nth-child(5) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-5 > span:nth-child(6) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-5 > span:nth-child(7) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-5 > span:nth-child(8) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-5 > span:nth-child(9) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-5 > span:nth-child(10) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-5 > span:nth-child(11) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-5 > span:nth-child(12) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-5 > span:nth-child(13) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-5 > span:nth-child(14) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-5 > span:nth-child(15) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-5 > span:nth-child(16) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-5 > span:nth-child(17) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-5 > span:nth-child(18) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-5 > span:nth-child(19) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-5 > span:nth-child(20) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-5 > span:nth-child(21) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-5 > span:nth-child(22) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-5 > span:nth-child(23) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-5 > span:nth-child(24) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-5 > span:nth-child(25) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-6 > span:nth-child(1) {
-webkit-animation-delay: 0.56s;
animation-delay: 0.56s;
}
#sl-6 > span:nth-child(2) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-6 > span:nth-child(3) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-6 > span:nth-child(4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-6 > span:nth-child(5) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-6 > span:nth-child(6) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-6 > span:nth-child(7) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-6 > span:nth-child(8) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-6 > span:nth-child(9) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-6 > span:nth-child(10) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-6 > span:nth-child(11) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-6 > span:nth-child(12) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-6 > span:nth-child(13) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-6 > span:nth-child(14) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-6 > span:nth-child(15) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-6 > span:nth-child(16) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-6 > span:nth-child(17) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-6 > span:nth-child(18) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-6 > span:nth-child(19) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-6 > span:nth-child(20) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-6 > span:nth-child(21) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-6 > span:nth-child(22) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-6 > span:nth-child(23) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-6 > span:nth-child(24) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-6 > span:nth-child(25) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-7 > span:nth-child(1) {
-webkit-animation-delay: 0.64s;
animation-delay: 0.64s;
}
#sl-7 > span:nth-child(2) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-7 > span:nth-child(3) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-7 > span:nth-child(4) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-7 > span:nth-child(5) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-7 > span:nth-child(6) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-7 > span:nth-child(7) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-7 > span:nth-child(8) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-7 > span:nth-child(9) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-7 > span:nth-child(10) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-7 > span:nth-child(11) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-7 > span:nth-child(12) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-7 > span:nth-child(13) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-7 > span:nth-child(14) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-7 > span:nth-child(15) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-7 > span:nth-child(16) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-7 > span:nth-child(17) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-7 > span:nth-child(18) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-7 > span:nth-child(19) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-7 > span:nth-child(20) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-7 > span:nth-child(21) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-7 > span:nth-child(22) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-7 > span:nth-child(23) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-7 > span:nth-child(24) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-7 > span:nth-child(25) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-8 > span:nth-child(1) {
-webkit-animation-delay: 0.72s;
animation-delay: 0.72s;
}
#sl-8 > span:nth-child(2) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-8 > span:nth-child(3) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-8 > span:nth-child(4) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-8 > span:nth-child(5) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-8 > span:nth-child(6) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-8 > span:nth-child(7) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-8 > span:nth-child(8) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-8 > span:nth-child(9) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-8 > span:nth-child(10) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-8 > span:nth-child(11) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-8 > span:nth-child(12) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-8 > span:nth-child(13) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-8 > span:nth-child(14) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-8 > span:nth-child(15) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-8 > span:nth-child(16) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-8 > span:nth-child(17) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-8 > span:nth-child(18) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-8 > span:nth-child(19) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-8 > span:nth-child(20) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-8 > span:nth-child(21) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-8 > span:nth-child(22) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-8 > span:nth-child(23) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-8 > span:nth-child(24) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-8 > span:nth-child(25) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-9 > span:nth-child(1) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#sl-9 > span:nth-child(2) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-9 > span:nth-child(3) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-9 > span:nth-child(4) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-9 > span:nth-child(5) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-9 > span:nth-child(6) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-9 > span:nth-child(7) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-9 > span:nth-child(8) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-9 > span:nth-child(9) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-9 > span:nth-child(10) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-9 > span:nth-child(11) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-9 > span:nth-child(12) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-9 > span:nth-child(13) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-9 > span:nth-child(14) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-9 > span:nth-child(15) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-9 > span:nth-child(16) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-9 > span:nth-child(17) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-9 > span:nth-child(18) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-9 > span:nth-child(19) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-9 > span:nth-child(20) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-9 > span:nth-child(21) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-9 > span:nth-child(22) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-9 > span:nth-child(23) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-9 > span:nth-child(24) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-9 > span:nth-child(25) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-10 > span:nth-child(1) {
-webkit-animation-delay: 0.88s;
animation-delay: 0.88s;
}
#sl-10 > span:nth-child(2) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-10 > span:nth-child(3) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-10 > span:nth-child(4) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-10 > span:nth-child(5) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-10 > span:nth-child(6) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-10 > span:nth-child(7) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-10 > span:nth-child(8) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-10 > span:nth-child(9) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-10 > span:nth-child(10) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-10 > span:nth-child(11) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-10 > span:nth-child(12) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-10 > span:nth-child(13) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-10 > span:nth-child(14) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-10 > span:nth-child(15) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-10 > span:nth-child(16) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-10 > span:nth-child(17) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-10 > span:nth-child(18) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-10 > span:nth-child(19) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-10 > span:nth-child(20) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-10 > span:nth-child(21) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-10 > span:nth-child(22) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-10 > span:nth-child(23) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-10 > span:nth-child(24) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-10 > span:nth-child(25) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-11 > span:nth-child(1) {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
#sl-11 > span:nth-child(2) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-11 > span:nth-child(3) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-11 > span:nth-child(4) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-11 > span:nth-child(5) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-11 > span:nth-child(6) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-11 > span:nth-child(7) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-11 > span:nth-child(8) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-11 > span:nth-child(9) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-11 > span:nth-child(10) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-11 > span:nth-child(11) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-11 > span:nth-child(12) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-11 > span:nth-child(13) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-11 > span:nth-child(14) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-11 > span:nth-child(15) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-11 > span:nth-child(16) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-11 > span:nth-child(17) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-11 > span:nth-child(18) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-11 > span:nth-child(19) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-11 > span:nth-child(20) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-11 > span:nth-child(21) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-11 > span:nth-child(22) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-11 > span:nth-child(23) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-11 > span:nth-child(24) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-11 > span:nth-child(25) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-12 > span:nth-child(1) {
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
#sl-12 > span:nth-child(2) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-12 > span:nth-child(3) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-12 > span:nth-child(4) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-12 > span:nth-child(5) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-12 > span:nth-child(6) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-12 > span:nth-child(7) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-12 > span:nth-child(8) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-12 > span:nth-child(9) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-12 > span:nth-child(10) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-12 > span:nth-child(11) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-12 > span:nth-child(12) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-12 > span:nth-child(13) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-12 > span:nth-child(14) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-12 > span:nth-child(15) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-12 > span:nth-child(16) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-12 > span:nth-child(17) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-12 > span:nth-child(18) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-12 > span:nth-child(19) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-12 > span:nth-child(20) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-12 > span:nth-child(21) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-12 > span:nth-child(22) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-12 > span:nth-child(23) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-12 > span:nth-child(24) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-12 > span:nth-child(25) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-13 > span:nth-child(1) {
-webkit-animation-delay: 1.12s;
animation-delay: 1.12s;
}
#sl-13 > span:nth-child(2) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-13 > span:nth-child(3) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-13 > span:nth-child(4) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-13 > span:nth-child(5) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-13 > span:nth-child(6) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-13 > span:nth-child(7) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-13 > span:nth-child(8) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-13 > span:nth-child(9) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-13 > span:nth-child(10) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-13 > span:nth-child(11) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-13 > span:nth-child(12) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-13 > span:nth-child(13) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-13 > span:nth-child(14) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-13 > span:nth-child(15) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-13 > span:nth-child(16) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-13 > span:nth-child(17) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-13 > span:nth-child(18) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-13 > span:nth-child(19) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-13 > span:nth-child(20) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-13 > span:nth-child(21) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-13 > span:nth-child(22) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-13 > span:nth-child(23) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-13 > span:nth-child(24) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-13 > span:nth-child(25) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-14 > span:nth-child(1) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#sl-14 > span:nth-child(2) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-14 > span:nth-child(3) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-14 > span:nth-child(4) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-14 > span:nth-child(5) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-14 > span:nth-child(6) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-14 > span:nth-child(7) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-14 > span:nth-child(8) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-14 > span:nth-child(9) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-14 > span:nth-child(10) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-14 > span:nth-child(11) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-14 > span:nth-child(12) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-14 > span:nth-child(13) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-14 > span:nth-child(14) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-14 > span:nth-child(15) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-14 > span:nth-child(16) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-14 > span:nth-child(17) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-14 > span:nth-child(18) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-14 > span:nth-child(19) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-14 > span:nth-child(20) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-14 > span:nth-child(21) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-14 > span:nth-child(22) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-14 > span:nth-child(23) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-14 > span:nth-child(24) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-14 > span:nth-child(25) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-15 > span:nth-child(1) {
-webkit-animation-delay: 1.28s;
animation-delay: 1.28s;
}
#sl-15 > span:nth-child(2) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-15 > span:nth-child(3) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-15 > span:nth-child(4) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-15 > span:nth-child(5) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-15 > span:nth-child(6) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-15 > span:nth-child(7) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-15 > span:nth-child(8) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-15 > span:nth-child(9) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-15 > span:nth-child(10) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-15 > span:nth-child(11) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-15 > span:nth-child(12) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-15 > span:nth-child(13) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-15 > span:nth-child(14) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-15 > span:nth-child(15) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-15 > span:nth-child(16) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-15 > span:nth-child(17) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-15 > span:nth-child(18) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-15 > span:nth-child(19) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-15 > span:nth-child(20) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-15 > span:nth-child(21) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-15 > span:nth-child(22) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-15 > span:nth-child(23) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-15 > span:nth-child(24) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-15 > span:nth-child(25) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-16 > span:nth-child(1) {
-webkit-animation-delay: 1.36s;
animation-delay: 1.36s;
}
#sl-16 > span:nth-child(2) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-16 > span:nth-child(3) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-16 > span:nth-child(4) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-16 > span:nth-child(5) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-16 > span:nth-child(6) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-16 > span:nth-child(7) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-16 > span:nth-child(8) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-16 > span:nth-child(9) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-16 > span:nth-child(10) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-16 > span:nth-child(11) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-16 > span:nth-child(12) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-16 > span:nth-child(13) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-16 > span:nth-child(14) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-16 > span:nth-child(15) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-16 > span:nth-child(16) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-16 > span:nth-child(17) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-16 > span:nth-child(18) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-16 > span:nth-child(19) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-16 > span:nth-child(20) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-16 > span:nth-child(21) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-16 > span:nth-child(22) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-16 > span:nth-child(23) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-16 > span:nth-child(24) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-16 > span:nth-child(25) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-17 > span:nth-child(1) {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
#sl-17 > span:nth-child(2) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-17 > span:nth-child(3) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-17 > span:nth-child(4) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-17 > span:nth-child(5) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-17 > span:nth-child(6) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-17 > span:nth-child(7) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-17 > span:nth-child(8) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-17 > span:nth-child(9) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-17 > span:nth-child(10) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-17 > span:nth-child(11) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-17 > span:nth-child(12) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-17 > span:nth-child(13) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-17 > span:nth-child(14) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-17 > span:nth-child(15) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-17 > span:nth-child(16) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-17 > span:nth-child(17) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-17 > span:nth-child(18) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-17 > span:nth-child(19) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-17 > span:nth-child(20) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-17 > span:nth-child(21) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-17 > span:nth-child(22) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-17 > span:nth-child(23) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-17 > span:nth-child(24) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-17 > span:nth-child(25) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-18 > span:nth-child(1) {
-webkit-animation-delay: 1.52s;
animation-delay: 1.52s;
}
#sl-18 > span:nth-child(2) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-18 > span:nth-child(3) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-18 > span:nth-child(4) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-18 > span:nth-child(5) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-18 > span:nth-child(6) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-18 > span:nth-child(7) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-18 > span:nth-child(8) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-18 > span:nth-child(9) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-18 > span:nth-child(10) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-18 > span:nth-child(11) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-18 > span:nth-child(12) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-18 > span:nth-child(13) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-18 > span:nth-child(14) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-18 > span:nth-child(15) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-18 > span:nth-child(16) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-18 > span:nth-child(17) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-18 > span:nth-child(18) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-18 > span:nth-child(19) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-18 > span:nth-child(20) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-18 > span:nth-child(21) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-18 > span:nth-child(22) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-18 > span:nth-child(23) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-18 > span:nth-child(24) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-18 > span:nth-child(25) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-19 > span:nth-child(1) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#sl-19 > span:nth-child(2) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-19 > span:nth-child(3) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-19 > span:nth-child(4) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-19 > span:nth-child(5) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-19 > span:nth-child(6) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-19 > span:nth-child(7) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-19 > span:nth-child(8) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-19 > span:nth-child(9) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-19 > span:nth-child(10) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-19 > span:nth-child(11) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-19 > span:nth-child(12) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-19 > span:nth-child(13) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-19 > span:nth-child(14) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-19 > span:nth-child(15) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-19 > span:nth-child(16) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-19 > span:nth-child(17) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-19 > span:nth-child(18) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-19 > span:nth-child(19) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-19 > span:nth-child(20) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-19 > span:nth-child(21) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-19 > span:nth-child(22) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-19 > span:nth-child(23) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-19 > span:nth-child(24) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-19 > span:nth-child(25) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-20 > span:nth-child(1) {
-webkit-animation-delay: 1.68s;
animation-delay: 1.68s;
}
#sl-20 > span:nth-child(2) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-20 > span:nth-child(3) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-20 > span:nth-child(4) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-20 > span:nth-child(5) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-20 > span:nth-child(6) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-20 > span:nth-child(7) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-20 > span:nth-child(8) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-20 > span:nth-child(9) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-20 > span:nth-child(10) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-20 > span:nth-child(11) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-20 > span:nth-child(12) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-20 > span:nth-child(13) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-20 > span:nth-child(14) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-20 > span:nth-child(15) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-20 > span:nth-child(16) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-20 > span:nth-child(17) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-20 > span:nth-child(18) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-20 > span:nth-child(19) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-20 > span:nth-child(20) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-20 > span:nth-child(21) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-20 > span:nth-child(22) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-20 > span:nth-child(23) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-20 > span:nth-child(24) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-20 > span:nth-child(25) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-21 > span:nth-child(1) {
-webkit-animation-delay: 1.76s;
animation-delay: 1.76s;
}
#sl-21 > span:nth-child(2) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-21 > span:nth-child(3) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-21 > span:nth-child(4) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-21 > span:nth-child(5) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-21 > span:nth-child(6) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-21 > span:nth-child(7) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-21 > span:nth-child(8) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-21 > span:nth-child(9) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-21 > span:nth-child(10) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-21 > span:nth-child(11) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-21 > span:nth-child(12) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-21 > span:nth-child(13) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-21 > span:nth-child(14) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-21 > span:nth-child(15) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-21 > span:nth-child(16) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-21 > span:nth-child(17) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-21 > span:nth-child(18) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-21 > span:nth-child(19) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-21 > span:nth-child(20) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-21 > span:nth-child(21) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-21 > span:nth-child(22) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-21 > span:nth-child(23) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-21 > span:nth-child(24) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-21 > span:nth-child(25) {
-webkit-animation-delay: 3.68s;
animation-delay: 3.68s;
}
#sl-22 > span:nth-child(1) {
-webkit-animation-delay: 1.84s;
animation-delay: 1.84s;
}
#sl-22 > span:nth-child(2) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-22 > span:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-22 > span:nth-child(4) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-22 > span:nth-child(5) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-22 > span:nth-child(6) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-22 > span:nth-child(7) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-22 > span:nth-child(8) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-22 > span:nth-child(9) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-22 > span:nth-child(10) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-22 > span:nth-child(11) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-22 > span:nth-child(12) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-22 > span:nth-child(13) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-22 > span:nth-child(14) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-22 > span:nth-child(15) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-22 > span:nth-child(16) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-22 > span:nth-child(17) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-22 > span:nth-child(18) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-22 > span:nth-child(19) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-22 > span:nth-child(20) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-22 > span:nth-child(21) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-22 > span:nth-child(22) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-22 > span:nth-child(23) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-22 > span:nth-child(24) {
-webkit-animation-delay: 3.68s;
animation-delay: 3.68s;
}
#sl-22 > span:nth-child(25) {
-webkit-animation-delay: 3.76s;
animation-delay: 3.76s;
}
#sl-23 > span:nth-child(1) {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
#sl-23 > span:nth-child(2) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-23 > span:nth-child(3) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-23 > span:nth-child(4) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-23 > span:nth-child(5) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-23 > span:nth-child(6) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-23 > span:nth-child(7) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-23 > span:nth-child(8) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-23 > span:nth-child(9) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-23 > span:nth-child(10) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-23 > span:nth-child(11) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-23 > span:nth-child(12) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-23 > span:nth-child(13) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-23 > span:nth-child(14) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-23 > span:nth-child(15) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-23 > span:nth-child(16) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-23 > span:nth-child(17) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-23 > span:nth-child(18) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-23 > span:nth-child(19) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-23 > span:nth-child(20) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-23 > span:nth-child(21) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-23 > span:nth-child(22) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-23 > span:nth-child(23) {
-webkit-animation-delay: 3.68s;
animation-delay: 3.68s;
}
#sl-23 > span:nth-child(24) {
-webkit-animation-delay: 3.76s;
animation-delay: 3.76s;
}
#sl-23 > span:nth-child(25) {
-webkit-animation-delay: 3.84s;
animation-delay: 3.84s;
}
#sl-24 > span:nth-child(1) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#sl-24 > span:nth-child(2) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-24 > span:nth-child(3) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-24 > span:nth-child(4) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-24 > span:nth-child(5) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-24 > span:nth-child(6) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-24 > span:nth-child(7) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-24 > span:nth-child(8) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-24 > span:nth-child(9) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-24 > span:nth-child(10) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-24 > span:nth-child(11) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-24 > span:nth-child(12) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-24 > span:nth-child(13) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-24 > span:nth-child(14) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-24 > span:nth-child(15) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-24 > span:nth-child(16) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-24 > span:nth-child(17) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-24 > span:nth-child(18) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-24 > span:nth-child(19) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-24 > span:nth-child(20) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-24 > span:nth-child(21) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-24 > span:nth-child(22) {
-webkit-animation-delay: 3.68s;
animation-delay: 3.68s;
}
#sl-24 > span:nth-child(23) {
-webkit-animation-delay: 3.76s;
animation-delay: 3.76s;
}
#sl-24 > span:nth-child(24) {
-webkit-animation-delay: 3.84s;
animation-delay: 3.84s;
}
#sl-24 > span:nth-child(25) {
-webkit-animation-delay: 3.92s;
animation-delay: 3.92s;
}
#sl-25 > span:nth-child(1) {
-webkit-animation-delay: 2.08s;
animation-delay: 2.08s;
}
#sl-25 > span:nth-child(2) {
-webkit-animation-delay: 2.16s;
animation-delay: 2.16s;
}
#sl-25 > span:nth-child(3) {
-webkit-animation-delay: 2.24s;
animation-delay: 2.24s;
}
#sl-25 > span:nth-child(4) {
-webkit-animation-delay: 2.32s;
animation-delay: 2.32s;
}
#sl-25 > span:nth-child(5) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#sl-25 > span:nth-child(6) {
-webkit-animation-delay: 2.48s;
animation-delay: 2.48s;
}
#sl-25 > span:nth-child(7) {
-webkit-animation-delay: 2.56s;
animation-delay: 2.56s;
}
#sl-25 > span:nth-child(8) {
-webkit-animation-delay: 2.64s;
animation-delay: 2.64s;
}
#sl-25 > span:nth-child(9) {
-webkit-animation-delay: 2.72s;
animation-delay: 2.72s;
}
#sl-25 > span:nth-child(10) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
#sl-25 > span:nth-child(11) {
-webkit-animation-delay: 2.88s;
animation-delay: 2.88s;
}
#sl-25 > span:nth-child(12) {
-webkit-animation-delay: 2.96s;
animation-delay: 2.96s;
}
#sl-25 > span:nth-child(13) {
-webkit-animation-delay: 3.04s;
animation-delay: 3.04s;
}
#sl-25 > span:nth-child(14) {
-webkit-animation-delay: 3.12s;
animation-delay: 3.12s;
}
#sl-25 > span:nth-child(15) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
#sl-25 > span:nth-child(16) {
-webkit-animation-delay: 3.28s;
animation-delay: 3.28s;
}
#sl-25 > span:nth-child(17) {
-webkit-animation-delay: 3.36s;
animation-delay: 3.36s;
}
#sl-25 > span:nth-child(18) {
-webkit-animation-delay: 3.44s;
animation-delay: 3.44s;
}
#sl-25 > span:nth-child(19) {
-webkit-animation-delay: 3.52s;
animation-delay: 3.52s;
}
#sl-25 > span:nth-child(20) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s;
}
#sl-25 > span:nth-child(21) {
-webkit-animation-delay: 3.68s;
animation-delay: 3.68s;
}
#sl-25 > span:nth-child(22) {
-webkit-animation-delay: 3.76s;
animation-delay: 3.76s;
}
#sl-25 > span:nth-child(23) {
-webkit-animation-delay: 3.84s;
animation-delay: 3.84s;
}
#sl-25 > span:nth-child(24) {
-webkit-animation-delay: 3.92s;
animation-delay: 3.92s;
}
#sl-25 > span:nth-child(25) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
/*
Okay, you made it! There wasn't actually any Easter eggs, by the way.
Did you look for them?! I hope you didn't.
The next 500 lines are regarding modeling the sunglass
and other stuff that isn't rain.
*/
.glass-container {
position: absolute;
width: 8em;
height: 5em;
/* But what is preserve-3d? Well, read Amit's blog to find out */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 100;
overflow: hidden;
}
.glass-container .glass {
position: relative;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotateX(10deg);
transform: rotateX(10deg);
-webkit-filter: brightness(50%) grayscale(100%);
filter: brightness(50%) grayscale(100%);
-webkit-transition: -webkit-transform 500ms ease-in-out,
-webkit-filter 450ms ease-in-out;
transition: -webkit-transform 500ms ease-in-out,
-webkit-filter 450ms ease-in-out;
transition: transform 500ms ease-in-out, filter 450ms ease-in-out;
transition: transform 500ms ease-in-out, filter 450ms ease-in-out,
-webkit-transform 500ms ease-in-out, -webkit-filter 450ms ease-in-out;
top: 50%;
left: 50%;
}
/*
Modeling the sunglass! The most frustrating experience of my life.
Uncomment line 3765 to see the pain.
*/
.glass-container .glass__lens {
opacity: 0.6;
}
/* Left Lens */
.glass-container .glass__lens-left .circle-1 {
top: -1.12em;
left: -3.7em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--red)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--red) 100%,
transparent 100% 100%
);
}
.glass-container .glass__lens-left .circle-2 {
top: -1.395em;
left: -3.95em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(19%, var(--red)),
color-stop(19%, transparent)
);
background-image: linear-gradient(
180deg,
var(--red) 19%,
transparent 19% 100%
);
}
.glass-container .glass__lens-left .circle-3 {
top: -1.39em;
left: -6em;
background-image: linear-gradient(
190deg,
var(--red) 8%,
transparent 8% 100%
),
linear-gradient(200.5deg, var(--red) 11.85%, transparent 11.85% 100%);
}
.glass-container .glass__lens-left .circle-4 {
top: -0.93em;
left: -1.16em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--red)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--red) 100%,
transparent 100% 100%
);
}
.glass-container .glass__lens-left .oval-5 {
top: -1.34em;
left: -2.5em;
background-image: -webkit-gradient(
linear,
right top,
left top,
color-stop(46%, var(--red)),
color-stop(46%, transparent)
);
background-image: linear-gradient(
270deg,
var(--red) 46%,
transparent 46% 100%
);
-webkit-transform: rotateZ(46deg);
transform: rotateZ(46deg);
}
.glass-container .glass__lens-left .tangent-4-5 {
top: -0.6em;
left: -1.022em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--red)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--red) 100%,
transparent 100% 100%
);
-webkit-transform: rotateZ(15.9deg);
transform: rotateZ(15.9deg);
}
.glass-container .glass__lens-left .oval-7 {
top: -2.28em;
left: -3.71em;
background-image: linear-gradient(
30deg,
var(--red) 26%,
transparent 26% 100%
);
}
.glass-container .glass__lens-left .filler-1 {
top: -1.5em;
left: -3em;
background-image: linear-gradient(
-30deg,
var(--red) 75%,
transparent 75% 100%
);
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
}
.glass-container .glass__lens-left .filler-2 {
top: -1.14em;
left: -2em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--red)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--red) 100%,
transparent 100% 100%
);
-webkit-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
/* Right Lens */
.glass-container .glass__lens-right .circle-1 {
top: -1.12em;
left: 2.7em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--blue)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--blue) 100%,
transparent 100% 100%
);
}
.glass-container .glass__lens-right .circle-2 {
top: -1.417em;
left: 1.05em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(19%, var(--blue)),
color-stop(19%, transparent)
);
background-image: linear-gradient(
180deg,
var(--blue) 19%,
transparent 19% 100%
);
}
.glass-container .glass__lens-right .circle-3 {
top: -1.39em;
left: -1.1em;
background-image: linear-gradient(
170deg,
var(--blue) 8%,
transparent 8% 100%
),
linear-gradient(159.5deg, var(--blue) 11.85%, transparent 11.85% 100%);
}
.glass-container .glass__lens-right .circle-4 {
top: -0.93em;
left: 0.46em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--blue)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--blue) 100%,
transparent 100% 100%
);
}
.glass-container .glass__lens-right .oval-5 {
top: -1.34em;
left: 0.63em;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(46%, var(--blue)),
color-stop(46%, transparent)
);
background-image: linear-gradient(
90deg,
var(--blue) 46%,
transparent 46% 100%
);
-webkit-transform: rotateZ(-46deg);
transform: rotateZ(-46deg);
}
.glass-container .glass__lens-right .tangent-4-5 {
top: -0.6em;
left: 0.522em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--blue)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--blue) 100%,
transparent 100% 100%
);
-webkit-transform: rotateZ(-15.9deg);
transform: rotateZ(-15.9deg);
}
.glass-container .glass__lens-right .oval-7 {
top: -2.28em;
left: 0.154em;
background-image: linear-gradient(
-30deg,
var(--blue) 26%,
transparent 26% 100%
);
}
.glass-container .glass__lens-right .filler-1 {
top: -1.5em;
left: 1.3em;
background-image: linear-gradient(
30deg,
var(--blue) 75%,
transparent 75% 100%
);
-webkit-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.glass-container .glass__lens-right .filler-2 {
top: -1.14em;
left: 0.5em;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(100%, var(--blue)),
to(transparent)
);
background-image: linear-gradient(
180deg,
var(--blue) 100%,
transparent 100% 100%
);
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
/* The thing in the middle */
.glass-container .glass__tube {
position: absolute;
width: 1em;
height: 1em;
-webkit-transform: translate(-50%, -70%);
transform: translate(-50%, -70%);
overflow: hidden;
}
.glass-container .glass__tube .circle-6 {
position: absolute;
border-radius: 50%;
width: 6.42em;
height: 6.42em;
top: 0.09em;
left: -2.7em;
background-image: radial-gradient(transparent 68%, var(--black) 68.3% 100%);
}
/* The hover state */
.glass-container:hover .glass {
-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);
-webkit-filter: brightness(150%) grayscale(30%);
filter: brightness(150%) grayscale(30%);
}
/* Shadows in hover */
.glass-container:hover .shadow__left {
opacity: 0.3;
}
.glass-container:hover .shadow__right {
opacity: 0.3;
}
/* The skeleton */
.skeleton {
/* comment this to see actual pain */
visibility: hidden;
position: absolute;
}
.skeleton .circle-1,
.skeleton .circle-2,
.skeleton .circle-3,
.skeleton .circle-4,
.skeleton .oval-5,
.skeleton .tangent4-5,
.skeleton .oval-7,
.skeleton .filler-1,
.skeleton .filler-2 {
border: white 1px solid;
background: none;
z-index: 400;
pointer-events: none;
}
.skeleton__lens-left .circle-1 {
top: -1.12em;
left: -3.7em;
}
.skeleton__lens-left .circle-2 {
top: -1.395em;
left: -3.95em;
}
.skeleton__lens-left .circle-3 {
top: -1.39em;
left: -6em;
}
.skeleton__lens-left .circle-4 {
top: -0.93em;
left: -1.16em;
}
.skeleton__lens-left .oval-5 {
top: -1.34em;
left: -2.5em;
-webkit-transform: rotateZ(46deg);
transform: rotateZ(46deg);
}
.skeleton__lens-left .tangent4-5 {
top: -0.6em;
left: -1.022em;
-webkit-transform: rotateZ(15.9deg);
transform: rotateZ(15.9deg);
}
.skeleton__lens-left .oval-7 {
top: -2.28em;
left: -3.71em;
}
.skeleton__lens-left .filler-1 {
top: -1.5em;
left: -3em;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
}
.skeleton__lens-left .filler-2 {
top: -1.14em;
left: -2em;
-webkit-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
.skeleton__lens-right .circle-1 {
top: -1.12em;
left: 2.7em;
}
.skeleton__lens-right .circle-2 {
top: -1.417em;
left: 1.05em;
}
.skeleton__lens-right .circle-3 {
top: -1.39em;
left: -1.1em;
}
.skeleton__lens-right .circle-4 {
top: -0.93em;
left: 0.46em;
}
.skeleton__lens-right .oval-5 {
top: -1.34em;
left: 0.63em;
-webkit-transform: rotateZ(-46deg);
transform: rotateZ(-46deg);
}
.skeleton__lens-right .tangent4-5 {
top: -0.6em;
left: 0.522em;
-webkit-transform: rotateZ(-15.9deg);
transform: rotateZ(-15.9deg);
}
.skeleton__lens-right .oval-7 {
top: -2.28em;
left: 0.154em;
}
.skeleton__lens-right .filler-1 {
top: -1.5em;
left: 1.3em;
-webkit-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
}
.skeleton__lens-right .filler-2 {
top: -1.14em;
left: 0.5em;
-webkit-transform: rotateZ(-20deg);
transform: rotateZ(-20deg);
}
/* Modeling The Shadows */
.shadow {
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
top: 2.5em;
left: 4em;
}
.shadow__left {
opacity: 0;
position: absolute;
width: 12em;
height: 12em;
top: -5em;
left: -8.2em;
z-index: -1;
background-image: radial-gradient(var(--red), transparent 16%);
-webkit-transition: opacity 300ms 200ms ease-in-out;
transition: opacity 300ms 200ms ease-in-out;
-webkit-transform: rotateX(90deg) translateZ(-1em);
transform: rotateX(90deg) translateZ(-1em);
}
.shadow__right {
opacity: 0;
position: absolute;
width: 12em;
height: 12em;
top: -5em;
left: -4em;
z-index: -1;
background-image: radial-gradient(var(--blue), transparent 16%);
-webkit-transition: opacity 300ms 200ms ease-in-out;
transition: opacity 300ms 200ms ease-in-out;
-webkit-transform: rotateX(90deg) translateZ(-1em);
transform: rotateX(90deg) translateZ(-1em);
}
// No JS
/*
Follow me on Twitter:
https://twitter.com/DenisovichPy
Got inspired to do something like this from
the works of Amit Sheen.
Follow Amit on twitter for more CSS only works:
https://twitter.com/amit_sheen
Amit's article on CSS perspective property:
https://css-tricks.com/how-css-perspective-works/
Follow Raph: twitch.tv/sableRaph
*/
Also see: Tab Triggers