#muzica { position: absolute; left: 31%; top: 235%; padding: 0 20px; width: 35%; text-align: center; } .video-background { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: -99; } .bild-flyg { animation: fly 25s linear infinite; top: 0; left: 0; position: fixed; z-index: 999; pointer-events: none; } .bild-flyg2 { animation: fly 25s linear infinite; top: 0; left: 0; position: fixed; z-index: 999; pointer-events: none; } .unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @keyframes fly { 0% { transform: translate(-200%,110vh) rotateZ(0deg);opacity: .5; } 12.5% { transform: translate(120vw,-120%) rotateZ(20deg); } 25% { transform: translate(-200%,50vh) scale(1.75) rotateZ(-20deg); } 37.5% { transform: translate(-200%,-120%) rotateZ(-40deg);opacity: .5; } 50% { transform: translate(100vw,50vh) rotateZ(0deg); } 62.5% { transform: translate(20vw,100vh) rotateZ(20deg); } 75% { transform: translate(200%,100vh) rotateZ(20deg);opacity: .25; } 87.5% { transform: translate(50vw,-200%) scale(1.75) rotateZ(20deg); } 100% { transform: translate(-200%,110vh) rotateZ(0deg);opacity: .5; } } @keyframes fly2 { 0% { transform: translate(-150%,110vh) rotateZ(0deg);opacity: .5; } 12.5% { transform: translate(130vw,-120%) rotateZ(23deg); } 25% { transform: translate(-120%,50vh) scale(1.75) rotateZ(-23deg); } 37.5% { transform: translate(-120%,-170%) rotateZ(-44deg);opacity: .5; } 50% { transform: translate(100vw,50vh) rotateZ(1deg); } 62.5% { transform: translate(20vw,100vh) rotateZ(22deg); } 75% { transform: translate(200%,100vh) rotateZ(27deg);opacity: .25; } 87.5% { transform: translate(55vw,-200%) scale(1.72) rotateZ(23deg); } 100% { transform: translate(-200%,110vh) rotateZ(0deg);opacity: .5; } } #load { position:absolute; width:600px; height:36px; left:50%; top:80%; margin-left:-300px; overflow:visible; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:default; } #load div { position:absolute; width:30px; height:36px; opacity:0; font-family:Helvetica, Arial, sans-serif; animation:move 3s linear infinite; -o-animation:move 3s linear infinite; -moz-animation:move 3s linear infinite; -webkit-animation:move 3s linear infinite; transform:rotate(180deg); -o-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); color:#FFFFFF; font-size: 20px; box-shadow: 2px 2px 2px pruple; } #load div:nth-child(2) { animation-delay:0.2s; -o-animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; } #load div:nth-child(3) { animation-delay:0.4s; -o-animation-delay:0.4s; -webkit-animation-delay:0.4s; -webkit-animation-delay:0.4s; } #load div:nth-child(4) { animation-delay:0.6s; -o-animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; } #load div:nth-child(5) { animation-delay:0.8s; -o-animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; } #load div:nth-child(6) { animation-delay:1s; -o-animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; } #load div:nth-child(7) { animation-delay:1.2s; -o-animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; } @keyframes move { 0% { left:0; opacity:0; } 35% { left: 41%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -moz-transform:rotate(-180deg); -webkit-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-moz-keyframes move { 0% { left:0; opacity:0; } 35% { left:41%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -moz-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -moz-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-webkit-keyframes move { 0% { left:0; opacity:0; } 35% { left:41%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -webkit-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -webkit-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } @-o-keyframes move { 0% { left:0; opacity:0; } 35% { left:41%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 65% { left:59%; -o-transform:rotate(0deg); transform:rotate(0deg); opacity:1; } 100% { left:100%; -o-transform:rotate(-180deg); transform:rotate(-180deg); opacity:0; } } /*.loader { border: 15px solid rgba(0, 0, 0, .0); /* Light grey */ /* border-top: 15px solid #5a1e96; /* Blue */ /* border-radius: 50%; position: relative; left: 44.5%; width: 100px; top: -41.42069%; height: 100px; animation: spin 1.5s linear infinite; } */ .loader, .loader:after { border-radius: 50%; width: 10em; height: 10em; } .loader { margin: 60px auto; font-size: 10px; position: relative; top: -46.5%; left: -50px; text-indent: -9999em; border-top: 1.1em solid rgba(67,0,112, 0); border-right: 1.1em solid rgba(67,0,112, 0); border-bottom: 1.1em solid rgba(67,0,112, 0); border-left: 1.1em solid #430070; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } } @keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } }