a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, td, video, tt, u, ul, var {
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: top
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

table, table td {
    padding: 0;
    border: none;
    border-collapse: collapse
}

img {
    vertical-align: top
}

embed {
    vertical-align: top
}

* {
    border: none
}

input, textarea {
    outline: none !important
}

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
    display: block
}

mark, rp, rt, ruby, summary, time {
    display: inline
}

.left {
    float: left
}

.right {
    float: right
}

.wrapper {
    width: 100%;
    overflow: hidden;
    position: relative
}

.box {
    overflow: hidden
}

.clear {
    clear: both;
    width: 100%
}

.last {
    background: none !important;
    margin: 0 !important
}


body {
    background: #FEA500;
    height: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: 1px;
    overflow-x: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

footer {
    height: 60px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 6000px;
    height: 100vh;
}

#wrapper {
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
}

#bg {
    background-color: #0099DB;
    /*#eb5512*/
    /*-webkit-animation: color-change-5x 12s linear infinite alternate both;
    animation: color-change-5x 12s linear infinite alternate both;*/
}
/*.ready #bg {
    transition: 0.7s ease;
    transition-delay: 0.55s;

}*/

#content {
    height: 0px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align:justify;
}

#hover {
}

#mask {
    background-image: url(../images/mask.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    height: calc(100vh - 80px);
    /*-webkit-animation: wobble-hor-bottom 0.8s both;
    animation: wobble-hor-bottom 0.8s both;*/
}

#bg.scroll #mask {
    height: calc(60vh - 80px);
    transition: 0.7s ease;
}

#bg.scroll + #content {
    width: 70vw;
    max-width: 800px;
    height: 300px;
    transition: 0.7s ease;
    -webkit-animation: wobble-hor-bottom 0.8s both;
    animation: wobble-hor-bottom 0.8s both;
    margin: 0 auto;
}

.wobble-hor-bottom {
    -webkit-animation: wobble-hor-bottom 0.8s both;
    animation: wobble-hor-bottom 0.8s both;
}


@-webkit-keyframes wobble-hor-bottom {
    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}

@keyframes wobble-hor-bottom {
    0%, 100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
    }

    15% {
        -webkit-transform: translateX(-30px) rotate(-6deg);
        transform: translateX(-30px) rotate(-6deg);
    }

    30% {
        -webkit-transform: translateX(15px) rotate(6deg);
        transform: translateX(15px) rotate(6deg);
    }

    45% {
        -webkit-transform: translateX(-15px) rotate(-3.6deg);
        transform: translateX(-15px) rotate(-3.6deg);
    }

    60% {
        -webkit-transform: translateX(9px) rotate(2.4deg);
        transform: translateX(9px) rotate(2.4deg);
    }

    75% {
        -webkit-transform: translateX(-6px) rotate(-1.2deg);
        transform: translateX(-6px) rotate(-1.2deg);
    }
}