#tetralyre
{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;

position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 0.40vmin;
text-align: center;
white-space: nowrap;
filter: drop-shadow(0 0 5em black);
}
#tetralyre div
{
display: inline-block;
width: 27.5em;
height: 27.5em;
margin-right: -13em;
margin-bottom: -16.5em;
background: url(0.svg) no-repeat center;
background-size: contain;
opacity: 0;
transform: scale(1.5);
transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
#tetralyre span
{
display: inline-block;
width: 12.5em;
height: 19.75em;
background-size: auto 80%;
background-position: center;
background-repeat: no-repeat;
color: transparent;
background-position: center 500%;
filter: blur(1.5em);
}
#tetralyre span:nth-of-type(1) {background-image: url(1.svg); transition: background-position 1s 0.0s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(2) {background-image: url(2.svg); transition: background-position 1s 0.1s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(3) {background-image: url(3.svg); transition: background-position 1s 0.2s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(4) {background-image: url(4.svg); transition: background-position 1s 0.3s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(5) {background-image: url(5.svg); transition: background-position 1s 0.4s, filter 1s 0.0s; margin-left: 1.25em;}
#tetralyre span:nth-of-type(6) {background-image: url(6.svg); transition: background-position 1s 0.5s, filter 1s 0.0s; margin-right: -3.75em;}
#tetralyre span:nth-of-type(7) {background-image: url(7.svg); transition: background-position 1s 0.6s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(8) {background-image: url(8.svg); transition: background-position 1s 0.7s, filter 1s 0.0s;}
#tetralyre span:nth-of-type(9) {background-image: url(9.svg); transition: background-position 1s 0.8s, filter 1s 0.0s;}
#tetralyre em
{
display: block;
width: 121em;
height: 11em;
margin: auto;
background: url(10.svg) no-repeat right;
background-size: contain;
color: transparent;
opacity: 0;
transform: translateX(10em);
transition: opacity 1s 0.75s, transform 1s 0.75s;
}

/* ANIMATION */

#tetralyre.on div
{
opacity: 1;
transform: scale(1);
}
#tetralyre.on span
{
background-position: center 50%;
filter: blur(0em);
}
#tetralyre.on em
{
opacity: 1;
transform: translateX(0em);
}