#jpreOverlay,
#jpreSlide,
#jpreLoader,
#jpreBar,
#jprePercentage,
#jSplash {
    display: none;
    visible: none;
}

#splash {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#splash .bottom,
#splash .top {
    background: #000;
    flex-grow: 1;
    width: 100vw;
}

#splash .bottom {
    margin-top: -86px;
}

#splash .left,
#splash .right {
    background: #000;
    flex-grow: 1;
    height: 100%;
}

#splash .left {
    margin-right: -55px;
}
#splash .right {
    margin-left: -55px;
}

#splash .bottom,
#splash .left,
#splash .right {
    -webkit-transition: margin-left .5s ease-out 2s, margin-right .5s ease-out 2s, margin-top .5s ease-out 2.5s;
    -moz-transition: margin-left .5s ease-out 2s, margin-right .5s ease-out 2s, margin-top .5s ease-out 2.5s;
    -o-transition: margin-left .5s ease-out 2s, margin-right .5s ease-out 2s, margin-top .5s ease-out 2.5s;
    transition: margin-left .5s ease-out 2s, margin-right .5s ease-out 2s, margin-top .5s ease-out 2.5s;
}

#splash .middle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
}

#splash .center {
    position: relative;
    width: 329px;
    height: 300px;
    max-width: 329px;
    max-height: 300px;
    background: rgba(0, 0, 0, 1);
    -webkit-transition: background .5s ease-out, width 1s ease-out 1s, max-width 1s ease-out 1.5s, height 1s ease-out 2.5s, max-height 1s ease-out 2.5s;
    -moz-transition: background .5s ease-out, width 1s ease-out 1s, max-width 1s ease-out 1.5s, height 1s ease-out 2.5s, max-height 1s ease-out 2.5s;
    -o-transition: background .5s ease-out, width 1s ease-out 1s, max-width 1s ease-out 1.5s, height 1s ease-out 2.5s, max-height 1s ease-out 2.5s;
    transition: background .5s ease-out, width 1s ease-out 1s, max-width 1s ease-out 1.5s, height 1s ease-out 2.5s, max-height 1s ease-out 2.5s;
}

#splash .center img {
    position: absolute;
    top: -38px;
    width: 329px;
    height: 289px;
    max-width: 329px;
    max-height: 289px;
    opacity: 1;
    -webkit-transition: opacity .5s ease-out 2s;
    -moz-transition: opacity .5s ease-out 2s;
    -o-transition: opacity .5s ease-out 2s;
    transition: opacity .5s ease-out 2s;
}

#splash .center img.outer-letters {
    top: -45px;
    left: -13px;
    max-width: 340px;
    max-height: 300px;
    width: 340px;
    height: 300px;
    opacity: 1;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

#splash .center img.logo-left {
    left: 0;
}

#splash .center img.logo-right {
    right: 0;
}

@media only screen and (max-width: 1360px) {
    #splash .center img.outer-letters {
        display: none;
    }
}

#splash .center img.logo-center {
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}

#splash.out .center {
    background:rgba(0, 0, 0, 0);
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
}

#splash.out .bottom,
#splash.out .left,
#splash.out .right {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

#splash.out .center img {
    opacity: 0;
}