body {
  width: 100vw;
  height: 100vh; 
  overflow:hidden;
  margin:0;
  -webkit-animation: loadingblur 1.5s;
  animation: loadingblur 1.5s;
}
@keyframes loadingblur {
  0%	{ filter: grayscale(100%) contrast(100%) invert(100%) blur(100px);}
  50%	{ filter: grayscale(none) contrast(none) invert(none) blur(none);}
  100%	{ filter: grayscale(none) contrast(none) invert(none) blur(none);}
}
.aurora {
  background: #101010;
  position: relative;

}
.aurora:before,
.aurora:after {
  content: '';
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 100%;
  opacity: 0.18;

}
.aurora:before {
  box-shadow: 0 0 50vmax 50vmax #f00;
  animation: hue 4s 0s linear infinite, move1 9s 0s linear infinite;
}
.aurora:after {
  box-shadow: 0 0 35vmax 35vmax #0ff;
  animation: hue 8s 0s linear infinite, move2 18s 0s linear infinite;
}
#main {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1;
	
}
#logo {
	width: 100%;
    height: 100%;
    background-image: url(../img/logo.png);
    background-size: 25%;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
	
	-webkit-animation: logoloadingblur 2s;
	animation: logoloadingblur 2s;
	-webkit-animation: pulsingsize 10s infinite;
	animation: pulsingsize 10s infinite;
}
@keyframes logoloadingblur {
  0%	{ filter: grayscale(100%) contrast(100%) invert(100%) blur(100px); background-size: 5%;}
  25%	{ filter: grayscale(25%) contrast(25%) invert(25%) blur(25%); background-size: 20%;}
  100%	{ filter: grayscale(none) contrast(none) invert(none) blur(none); background-size: 25%;}
}
@keyframes pulsingsize {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.log {
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    letter-spacing: 0.1em;
    font-size: 12px;
    font-weight: normal;
    text-shadow: 1px 1px 5px 3px #ff0;
    color: rgba(255, 255, 255, 0.46);
    position: absolute;
    left: 24px;
    top: 24px;
	width: 460px;
	height: 140px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);

	align-items: center;
	padding: 8px;
	border-radius: 4px;
	background-color: rgba(12,12,12,.25);
}
.log-top-right {
    top: 20px;
    right: 20px;
    text-align: right;
    display: none;
}
#music {
	padding-right:24px;
	padding-top:8px;
	filter: grayscale(100%) contrast(70%) invert(100%) opacity(60%);
}
#music:focus {
	outline: none;
}
.loading-text, loading-text:after {
  margin: 0 16px 14px 0;
  font-size: 24px;
  text-align:right;
  color: rgba(255,255,255,0.7);
  font: 300 2em/150% Montserrat;
  animation: flickerAnimation 2s infinite;
}
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:.7; }
  100% { opacity:1; }
}

.loading-text:after {
  content: ' .';
  animation: dots 2s steps(5, end) infinite;
}

@keyframes dots {
  0%, 19% {
    color: rgba(0,0,0,0);
    text-shadow:
      .0em 0 0 rgba(0,0,0,0),
      .4em 0 0 rgba(0,0,0,0);}
  38% {
    color: rgba(255,255,255,0.7);
    text-shadow:
      .1em 0 0 rgba(0,0,0,0),
      .4em 0 0 rgba(0,0,0,0);}
  57% {
	color: rgba(255,255,255,0.7);
    text-shadow:
      .4em 0 0 rgba(255,255,255,0.7),
      .5em 0 0 rgba(0,0,0,0);}
  76%, 95% {
	color: rgba(255,255,255,0.7);
    text-shadow:
      .4em  0 0 rgba(255, 255, 255, 0.7),
      .8em 0 0 rgba(255,255,255,0.7);}
	100% {
    color: rgba(0,0,0,0);
    text-shadow:
      .4em 0 0 rgba(0,0,0,.1),
      .8em 0 0 rgba(0,0,0,.1);}}

.loading-container {
    position: absolute;
    left: 80;
    right: 80;
    bottom: 60;
	margin:0;
	padding:0;
    z-index: 5;
	padding-right:1%;
    color: #fff;

    font-family: Arial;
}

.loading-labels {
    width: 100%;
    height: 20px;

    margin-left: 2px;
    margin-right: 3px;

    margin-top: 5px;
    margin-bottom: 12px;

    padding: 5px;
    text-align: center;
    position: relative;
    display: inline;
    white-space: nowrap;
	
}
.loading-labels div {
    display: none;
	font-family: "Segoe UI", sans-serif;
    text-align: center;
    font-size: 16px;
    position: relative;
	font-weight: 500;
    font-style: italic;
    text-shadow:
    -1px -1px 1px rgba(0,0,0,.07),
    1px -1px 1px rgba(0,0,0,.07),
    -1px 1px 1px rgba(0,0,0,.07),
    1px 1px 1px rgba(0,0,0,.07);
}
.loading-bar-container {
    width: 100%;
    background-color: rgba(140, 140, 140, .9);
    height: 20px;

    margin: 5px;

    box-shadow: 0 1px 5px #111 inset, 0 1px 0 #444;
    background-color: #333;

    border-radius: 6px;
    padding: 5px;
    text-align: left;
    overflow: hidden;
    position: relative;
    display: block;
    white-space: nowrap;
}
.loading-bar {
    color: rgba(255,255,255,0.85);
    font-size:14px;
    margin-bottom:-6px;
	padding-left: 5px;
	padding-top: 1px;
    display: none;
	
    width: 0%;
    height: 20px;
    border-radius: 4px;
    background-size: 60px 60px;      
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-animation: animate-stripes 3s linear infinite;

    transition: width 0.3s;
    transition-timing-function: ease-out;
}
.bgcolor-first  {
    background-color: rgba(200, 80, 115, 1);
}
.bgcolor-second {
    background-color: rgba(160, 100, 200, 1);
}
.bgcolor-third {
    background-color: rgba(95, 130, 220, 1);
}
.bgcolor-fourth {
	background-color: rgba(80, 180, 110, 1);
}
@keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@-webkit-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@-o-keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@-moz-keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@-webkit-keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@-o-keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@keyframes move1 {
  0% {
    top: 0vh;
    left: 50vw;
  }
  25% {
    left: 0vw;
  }
  50% {
    top: 100vh;
  }
  75% {
    left: 100vw;
  }
  100% {
    top: 0vh;
    left: 50vw;
  }
}
@-moz-keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@-webkit-keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@-o-keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}
@keyframes move2 {
  0% {
    top: 50vh;
    left: 100vw;
  }
  25% {
    top: 100vh;
  }
  50% {
    left: 0vw;
  }
  75% {
    top: 0vh;
  }
  100% {
    top: 50vh;
    left: 100vw;
  }
}