body {
overflow-y: hidden;
}
body.home #footer {
opacity: 0;
animation: opacStart 1.5s forwards;
animation-delay: 2.5s;
animation-iteration-count: 1;
}
body.home #header {
opacity: 0;
animation: opacStart 1.5s forwards;
animation-delay: 2.5s;
animation-iteration-count: 1;
}  #trans-container {
position: fixed;
left: 50%;
transform: translate(-50%, -50%) scale(1);
top: 50%;
width: 140%;
max-width: 800px;
margin: 0 auto;
margin-top:270px;
animation: nimatezoom 8s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#trans-container:after {
content:"";
display: block;
position: absolute;
left:0;
top:0;
opacity: 0;
width: 100vw;
height: 100vh;
background:#000;
animation:bg 8s;
}
#rim {
left:0; top:0;
margin-left: -10%;
margin-top: -10%;
position: absolute;
width: 120%;
opacity: 0.35;
z-index: -4;
animation: rotatingReverse 40s linear infinite;
user-select: none;
}
@keyframes nimatezoom {
from {
transform: translate(-50%, -50%) scale(5);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes bg {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotatingReverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@keyframes child1 {
from {
transform: translate(-50%,0) rotate(0deg);
}
to {
transform: translate(-50%,0) rotate(-360deg);
}
}
@keyframes child3 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@keyframes child4 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#main {
position: relative;left:0;top:0;
width:100%;
animation: rotatingReverse 140s linear infinite;
z-index: -1;
user-select: none;
}
#inner {
position: absolute;left:0;top:0;
width:100%;
z-index: 2;
animation: rotating 120s linear infinite;
user-select: none;
}
#outer {
position: absolute;left:0;top:0;
width: 100%;
animation: rotating 160s linear infinite;
user-select: none;
}
#children {
position: absolute;left:0;top:0;
animation: rotatingReverse 200s linear infinite;
width: 120%;
height: 120%;
margin-left: -10%;
margin-top: -10%;
}
#child01 {
transform: translate(-50%,0);
top: -11%;
left:50%; opacity: 0.5;
animation: child1 80s linear infinite;
margin-left:1px;
margin-top: 1px;
} #child03 {
bottom: 2%;
left: 2%;
opacity: 0.5;
animation: child3 90s linear infinite;
margin-left: 1px;
margin-bottom: 1px;
}
#child04 {
bottom: 30%;
right: -10.9%;
animation: child4 50s linear infinite;
margin-right: 1px;
margin-bottom: 1px;
}
#children div {
position: absolute;
width: 33%;
height: 33%;
opacity: 0.5;
background-image: url(//alchemist.dk/wp-content/themes/alchemist.dk/resources/child.svg);
}