html,body {
    background: #0f0d1a;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto';

}
.mdl-grid{
height: 100%;
}
.logo-container,.img{
    position: relative;
    height: 90%;
    width: 90%;
    margin: 0 auto;
    padding-top: 4em;
    display: block;


}
.overlay{
    position: absolute;
    /* center the element */
    right: 0;
    left: 0;
    z-index: 100;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */

    height: 100%;
    width: 100%;
    max-width: 1387px;
    background: url("../src/triangle-overlay.png") no-repeat;
    background-position: center top;
    background-size: contain;

}

.legal-head{
    padding: 24px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}
.legal-text{
    text-align: justify;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
padding: 2em;
}
.legal-impress{
    text-align: center;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
padding: 2em;
}
.logo-container{
    max-width: 500px;
    max-height: 500px;

}
.img{

    max-width: 200px;
    max-height: 200px;
}

.games{
min-height: 80%;
}

.headline{
    padding: 24px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}
.content{
    text-align: center;
    color: #777;
    max-width: 300px;
    margin: 0 auto;
padding: 2em;
}
.information{
height: 20%;
min-height: 300px;
padding: 3em;
    text-align: center;
    color: #777;
background: #000;
overflow: hidden;
    margin: 0 auto;


}
.information span{
height: 2em;
}

.mill{
    background: url("../src/swiftmill-bg.png");
    display: block;

    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: auto;

}
.logo{
    background: url("../src/swiftmill-logo.png");
    display: block;
    position: absolute;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat;
    bottom:-35em;
    left:15%;
    max-width: 500px
    height:100vh;
    width: 100%;
}


.wheel{
    background: url("../src/wheel_anim.gif");
    display: block;
    position: absolute;
    z-index: 100;
    background-size: contain;
    background-repeat: no-repeat;
    top:4em;
    left: 0;

    height:100vh;
    width: 100%;
}

@-webkit-keyframes fadeIn { from { opacity:0;transform: translate3d(0, 40px, 0); } to { opacity:1; transform: translate3d(0, 0px, 0); } }
@-moz-keyframes fadeIn  { from { opacity:0;transform: translate3d(0, 40px, 0); } to { opacity:1; transform: translate3d(0, 0px, 0); } }
@keyframes fadeIn { from { opacity:0;transform: translate3d(0, 40px, 0); } to { opacity:1; transform: translate3d(0, 0px, 0); } }

.fadeInUp {
    opacity:0;  /* make things invisible upon start */
  	-webkit-animation:fadeIn;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  	-moz-animation:fadeIn;
  	animation:fadeIn;

  	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  	-moz-animation-fill-mode:forwards;
  	animation-fill-mode:forwards;

  	-webkit-animation-duration:1s;
  	-moz-animation-duration:1s;
  	animation-duration:1s;


    -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */

-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
   -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
        transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */


}

.one{
    -webkit-animation-delay: .2s; /* Chrome, Safari, Opera */
    animation-delay: .2s;
}
.two{
    -webkit-animation-delay: .4s; /* Chrome, Safari, Opera */
    animation-delay: .4s;
}
.three{
    -webkit-animation-delay: .6s; /* Chrome, Safari, Opera */
    animation-delay: .6s;
}
.four{
    -webkit-animation-delay: .8s; /* Chrome, Safari, Opera */
    animation-delay: .8s;
}
@media (max-width: 1387px) {.overlay{background-size: cover;}}
@media (max-width: 500px) {.overlay{height:30em;} .logo-container{max-height: 350px;padding-top: 1em}.wheel{top:1em;}  }