#wrapper{
   height : 100%;
   width : 100%;
   text-align:center;
}
svg { 
   width: 100vw;
    max-height: 100vh;
    max-width: 100vw;
   margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.bat > *{
    animation: fly 50s linear infinite;
    top: 0;
	left: 0;
	position: fixed;
	z-index: 999;
	pointer-events: none;
}
.bat img {
   max-width : 300px;
   max-height : 300px;
}
@keyframes fly {
   	0% {

		transform: translate(-200%,110vh) rotateZ(0deg);opacity: 1;
	}

	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: 1;
	}
}
a.button { 
   outline : 1px solid;
   animation: morph 10s linear infinite;
}
.button { 
   font-size : 2em;
   margin : 20px;
   padding : 10px;
}
.hide { 
   display : none !important;
}
#beta, .beta { 
   background-color : black;
   position:absolute;
   width : 80vw;
   height : 80vh;
   left : 10vw;
   top:10vh;
}
#beta img, .beta .img {
   margin : 5px;
   max-width:70vw;
   max-height : 65vh;
}
#beta .description, .beta .description{ 
   text-align:center;
   color:orange;
   padding:10px;
   font-size : 1rem;
}
#beta .close, .beta .close{
   position:absolute;
   right:0;
   top:0;
   margin:10px;
   background-color : red;
   font-size:2em;
}
.return {
   position:absolute;
   left:0;
   top:0;
   margin:10px;
}
.mplink {
   position:absolute;
   left:0;
   bottom:10px;
   margin:10px;
}


@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}

.lds-default {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
body, html{ 
   padding:0;
   margin:0;
   width : 100vw;
   height : 100vh;
   overflow:auto;
   text-align:center;
   background: linear-gradient(120deg, #ffb6c1, #7fffd4);
}
#home { 
   padding:10px;
   padding-bottom:50px;
   font-family: 'Arial', sans-serif;
}
.colorchange { 
   animation: colorchange 4s linear infinite;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(0,0,0,.3);
   font-weight:bold;
}
a.button { 
   outline : 1px solid;
   animation: morph 10s linear infinite;
   font-weight:bold;
   border-radius: 12px;
   background-color: #ff6df5;
   color: white;
   text-decoration: none;
}
a.button:hover {
   background-color: #ff00ff;
   transform: scale(1.05);
}
.snowflake {
  color: #ff1493;
  font-size: 2.5em;
  text-shadow: 0 0 5px #fff, 0 0 10px #ff69b4;
}
.neon-bg h1 {
   text-shadow: 0 0 10px #fff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
}
@keyframes colorchange {
   0% {color: #ff6d6d;}
   20% {color: #f5acff;}
   40% {color: #8aff8e;}
   60% {color: #df86ff;}
   80% {color: #f3ff16;}
   100% {color: #ff6d6d;}
}
@keyframes morph {
   0% { outline-color: #ff6d6d; outline-width: 6px;}
   25% { outline-color: #f5acff; outline-width: 20px;}
   50% { outline-color: #8aff8e; outline-width: 6px;}
   75% { outline-color: #df86ff; outline-width: 20px;}
   100% { outline-color: #ff6d6d; outline-width: 6px;}
}