body, html { display: block; position: absolute; width:100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #000000; z-index: -999; font-family: 'Open Sans', Sans-serif; }

.earth { display: block; position: absolute; top: 0px; left: 0px; width: 300px; height: 188px; z-index: 9; background: center / contain no-repeat url(../assets/earth.png); }
.logo { display: block; position: absolute; top: 30px; left: 30px; width: 175px; height: 50px; z-index: 10; }
.logo img { display: block; width: 175px; height: 50px; }



.zzCanvas2 { position:absolute; left:0px; right: 0px; top: 0px; bottom: 0xp; z-index: -100; opacity: 0.8; }
.zzCanvas1 { position:absolute; left:0px; right: 0px; top: 0px; bottom: 0xp; z-index: -90; }

.tooltiper { position: absolute; display: none; background: #ffffff; color: #000000; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px;  border-radius: 3px; font-size: 16px; pointer-events: none; }
.zzFormContainer { display: block; width: 600px; height: 300px; color: #ffffff; border-radius: 20px; background-color: #1170b7; position: fixed; bottom: -250px; left: 50%; transform: translateX(-50%); transition: all 0.5s ease; z-index: 10; opacity: 0.95; }
.zzFormContainer.active { bottom: 50px; }
.zzToggleButton { text-align: center; padding: 10px 10px; font-size: 20px; cursor: pointer; }
.star { position: absolute; width: 100px; height: 100px; pointer-events: none; z-index: 5; will-change: transform; filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.7)); transform-origin: center; }
.starname { box-shadow: none !important; border: none !important; outline: none !important; }
.page-container { display: block; color: white; padding: 1em; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); text-align: center; }
.zzToggleButton i {  transform: translate3d(0, - 100%, 0); animation: spin 0.8s infinite linear; }
.background { display: block; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background: url(../assets/bkg.jpg); z-index: -110; }

@keyframes spin
{
    0% { transform: translate3d(0, -30%, 0); }
    50% { transform: translate3d(0, 30%, 0); }
    100% { transform: translate3d(0, -30%, 0); }
}

@media only screen and (min-width: 480px)
{
    .zzFormContainer { width: 400px; height: 600px; }
    .zzFormContainer.active { bottom: 50px; }
}

@media only screen and (min-width: 778px)
{
    .zzFormContainer { width: 500px; height: 300px; }
    .zzFormContainer.active { bottom: 50px; }
}

@media only screen and (min-width: 1024px)
{
    .zzFormContainer { width: 600px; height: 300px; }
    .zzFormContainer.active { bottom: 50px; }
}

@media only screen and (min-width: 1200px)
{
    .zzFormContainer { width: 600px; height: 300px; }
    .zzFormContainer.active { bottom: 50px; }
}