body {
 background-color: #202020;
}
@keyframes fadeinall {
    0% {
      opacity: 1;
    }
    97% {
      opacity: 0;
    }
    98% {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    99% {
      opacity: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
    100% {
      opacity: 0;
      z-index: -1;
    }
  }
  #loader {
    opacity: 1;
    position: fixed;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    background-color: #202020;
    z-index: 999;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation: fadeinall 1s normal both;
    animation: fadeinall 1s normal both;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #202020;
    overflow: hidden;
    z-index: -1;
}

.background span {
    width: 30vmin;
    height: 30vmin;
    border-radius: 30vmin;
    backface-visibility: hidden;
    position: absolute;
    animation: move;
    animation-duration: 40;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}


.background span:nth-child(0) {
    color: #ff2600;
    top: 25%;
    left: 73%;
    animation-duration: 50s;
    animation-delay: -9s;
    transform-origin: 5vw -7vh;
    box-shadow: -60vmin 0 7.705123048377539vmin currentColor;
}
.background span:nth-child(1) {
    color: #ff2600;
    top: 41%;
    left: 89%;
    animation-duration: 53s;
    animation-delay: -11s;
    transform-origin: 13vw -15vh;
    box-shadow: 60vmin 0 8.297880052317918vmin currentColor;
}
.background span:nth-child(2) {
    color: #0433ff;
    top: 51%;
    left: 18%;
    animation-duration: 44s;
    animation-delay: -84s;
    transform-origin: -4vw -21vh;
    box-shadow: -60vmin 0 7.941780443334078vmin currentColor;
}
.background span:nth-child(3) {
    color: #ff2600;
    top: 29%;
    left: 64%;
    animation-duration: 18s;
    animation-delay: -90s;
    transform-origin: 24vw 22vh;
    box-shadow: -60vmin 0 7.697051732238998vmin currentColor;
}
.background span:nth-child(4) {
    color: #ff2600;
    top: 63%;
    left: 44%;
    animation-duration: 85s;
    animation-delay: -92s;
    transform-origin: -14vw -10vh;
    box-shadow: -60vmin 0 7.536497643216988vmin currentColor;
}
.background span:nth-child(5) {
    color: #ff2600;
    top: 44%;
    left: 64%;
    animation-duration: 66s;
    animation-delay: -49s;
    transform-origin: -3vw 11vh;
    box-shadow: -60vmin 0 8.438531636202127vmin currentColor;
}
.background span:nth-child(6) {
    color: #ff2600;
    top: 73%;
    left: 79%;
    animation-duration: 51s;
    animation-delay: -38s;
    transform-origin: -2vw -23vh;
    box-shadow: -60vmin 0 7.92385241858955vmin currentColor;
}
.background span:nth-child(7) {
    color: #0433ff;
    top: 12%;
    left: 98%;
    animation-duration: 98s;
    animation-delay: -62s;
    transform-origin: 24vw -24vh;
    box-shadow: -60vmin 0 7.973658360697002vmin currentColor;
}
.background span:nth-child(8) {
    color: #000000;
    top: 91%;
    left: 72%;
    animation-duration: 92s;
    animation-delay: -14s;
    transform-origin: 18vw 22vh;
    box-shadow: -60vmin 0 8.439298759919591vmin currentColor;
}
.background span:nth-child(9) {
    color: #000000;
    top: 59%;
    left: 24%;
    animation-duration: 91s;
    animation-delay: -41s;
    transform-origin: 16vw 14vh;
    box-shadow: 60vmin 0 8.452269489788426vmin currentColor;
}
.background span:nth-child(10) {
    color: #000000;
    top: 25%;
    left: 91%;
    animation-duration: 92s;
    animation-delay: -88s;
    transform-origin: -23vw 9vh;
    box-shadow: -60vmin 0 7.90673236107515vmin currentColor;
}
.background span:nth-child(11) {
    color: #ff2600;
    top: 92%;
    left: 29%;
    animation-duration: 64s;
    animation-delay: -51s;
    transform-origin: -1vw -2vh;
    box-shadow: 60vmin 0 7.778906603754569vmin currentColor;
}
.background span:nth-child(12) {
    color: #0433ff;
    top: 3%;
    left: 19%;
    animation-duration: 80s;
    animation-delay: -84s;
    transform-origin: 18vw -2vh;
    box-shadow: 60vmin 0 7.709338681433124vmin currentColor;
}
.background span:nth-child(13) {
    color: #0433ff;
    top: 61%;
    left: 43%;
    animation-duration: 36s;
    animation-delay: -60s;
    transform-origin: 6vw 4vh;
    box-shadow: 60vmin 0 7.652185461359261vmin currentColor;
}
.background span:nth-child(14) {
    color: #0433ff;
    top: 54%;
    left: 70%;
    animation-duration: 33s;
    animation-delay: -62s;
    transform-origin: 8vw -12vh;
    box-shadow: -60vmin 0 7.9303367014125685vmin currentColor;
}
.background span:nth-child(15) {
    color: #ff2600;
    top: 31%;
    left: 96%;
    animation-duration: 81s;
    animation-delay: -99s;
    transform-origin: 10vw -23vh;
    box-shadow: -60vmin 0 8.369538048212094vmin currentColor;
}
.background span:nth-child(16) {
    color: #ff2600;
    top: 50%;
    left: 87%;
    animation-duration: 52s;
    animation-delay: -54s;
    transform-origin: -12vw 13vh;
    box-shadow: 60vmin 0 8.312917110236056vmin currentColor;
}
.background span:nth-child(17) {
    color: #0433ff;
    top: 25%;
    left: 56%;
    animation-duration: 97s;
    animation-delay: -92s;
    transform-origin: 13vw 2vh;
    box-shadow: 60vmin 0 7.737167320735479vmin currentColor;
}
.background span:nth-child(18) {
    color: #0433ff;
    top: 48%;
    left: 66%;
    animation-duration: 68s;
    animation-delay: -79s;
    transform-origin: -13vw -13vh;
    box-shadow: -60vmin 0 7.814358885853231vmin currentColor;
}
.background span:nth-child(19) {
    color: #000000;
    top: 29%;
    left: 16%;
    animation-duration: 73s;
    animation-delay: -22s;
    transform-origin: 10vw 9vh;
    box-shadow: 60vmin 0 8.209561948720943vmin currentColor;
}


  #unik-logo {
      height: 85vh;
      width: 95vw;
      margin: auto;
      text-indent: -9999px;
      background-image: url(unikmusik-logo-portr.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
  }

.button {
text-decoration: none;
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  margin: 10px;
  padding: 10px 20px;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 1.5em/normal Impact, Charcoal, sans-serif;
  color: #ffffff;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #b40000;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

  @media screen and (min-width: 640px) {
    #unik-logo {
        width: 80vw;
        background-image: url(unikmusik-logo.png);
    }
    .button {
      font: normal 2em/normal Impact, Charcoal, sans-serif;
	}
  }
  
#unikdemos {
  	display: flex;
	justify-content: center;
  }