body {
    margin: 0;
}
#mdx-banner {
    position: absolute;
    right: 0;
    overflow: hidden;
}
#mdx-banner #canvas{
    z-index: 1;
}
.mdx-logo {
    z-index: 2;
    opacity: 0;
    position: absolute;
    top: 35px;
    left: 290px;
    width: 469px;
    animation: fadein 2s 2s forwards;
    -moz-animation: fadein 2s 2s forwards; /* Firefox */
    -webkit-animation: fadein 2s 2s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s 2s forwards; /* Opera */
}
.mdx-logo img {
    width: 100%;
}
.cta {
    z-index: 2;
    position: absolute;
    top: 285px;
    left: 315px;
}
.cta .copy {
    z-index: 2;
    position: absolute;
    top: -35px;
    opacity: 0;
    animation: fadein 1.5s 2.5s forwards;
    -moz-animation: fadein 1.5s 2.5s forwards; /* Firefox */
    -webkit-animation: fadein 1.5s 2.5s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.5s 2.5s forwards; /* Opera */
}
.cta .button {
    z-index: 2;
    text-decoration: none;
    opacity: 0;
    animation: fadein 1.5s 3s forwards;
    -moz-animation: fadein 1.5s 3s forwards; /* Firefox */
    -webkit-animation: fadein 1.5s 3s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.5s 3s forwards; /* Opera */
}
.cta .disclaimer{
    z-index: 2;
    opacity: 0;
    margin-left: 350px;
    margin-bottom: 30px;
    animation: fadein 1.5s 3.25s forwards;
    -moz-animation: fadein 1.5s 3.25s forwards; /* Firefox */
    -webkit-animation: fadein 1.5s 3.25s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.5s 3.25s forwards; /* Opera */
}

  /* LEGAL */

.hide-text,
.hide-text > * {
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

    .legal {
        position: absolute;
    width: 30px;
    height: 10px;
    bottom: 50px;
    right: 330px;
    margin: 0;
    opacity: 0;
    background: url("../images/legal.png") 0 0 no-repeat;
    animation: fadein 1.5s 3.25s forwards;
    -moz-animation: fadein 1.5s 3.25s forwards; /* Firefox */
    -webkit-animation: fadein 1.5s 3.25s forwards; /* Safari and Chrome */
    -o-animation: fadein 1.5s 3.25s forwards; /* Opera */
    }

    .legal-container {
        position: absolute;
        width: 900px;
        bottom: -300px;
    z-index: 290;
        left: 300px;

        background: rgba(0,0,0,0.8);
    -webkit-transition: bottom 350ms ease-out;
       -moz-transition: bottom 350ms ease-out;
         -o-transition: bottom 350ms ease-out;
            transition: bottom 350ms ease-out;
    }

        .legal-container > p {
            font-family: Arial, Helvetica, sans-serif;
            color: #eeeeee;
            font-size: 10px;
            line-height: 14px;
            margin: 8px;
        }

    .legal:hover + .legal-container,
    .legal-container:hover {
        bottom: 0;
        z-index: 210;
    }

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}