@-webkit-keyframes intro_logo_wrap_animation {
    0%   { top: 20px; opacity: 0; }
    100% { top: 0px; opacity: 1; }
}
@-moz-keyframes intro_logo_wrap_animation {
    0%   { top: 20px; opacity: 0; }
    100% { top: 0px; opacity: 1; }
}
@-o-keyframes intro_logo_wrap_animation {
    0%   { top: 20px; opacity: 0; }
    100% { top: 0px; opacity: 1; }
}
@keyframes intro_logo_wrap_animation {
    0%   { top: 20px; opacity: 0; }
    100% { top: 0px; opacity: 1; }
}


/*html, body {*/
    /*min-height: 100%;*/
    /*padding: 0;*/
    /*margin: 0;*/
/*}*/
.loading{
    display: none;
}
.loading .logo_container .loading_text{
    color: #e2214b;

    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 75px;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    height: auto;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.intro_wrap, .loading{
    /*background-image: url(http://placekitten.com/1920/1080);*/
    background: white;
    /*background-size: cover;*/
    /*background-position: center;*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 9999;
    transform: scaleY(1);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.intro_wrap:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 2;
}
.intro_wrap .logo_container, .loading .logo_container{
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 1;
    /*-webkit-animation-iteration-count: 1;*/
    /*-moz-animation-iteration-count: 1;*/
    /*-o-animation-iteration-count: 1;*/
    /*animation-iteration-count: 1;*/
    /*-webkit-animation: intro_logo_wrap_animation 1s; !* Safari 4+ *!*/
    /*-moz-animation:    intro_logo_wrap_animation 1s; !* Fx 5+ *!*/
    /*-o-animation:      intro_logo_wrap_animation 1s; !* Opera 12+ *!*/
    /*animation:         intro_logo_wrap_animation 1s; !* IE 10+, Fx 29+ *!*/
}
/*.intro_wrap.step_1 .logo_container{*/
    /*top: 0px;*/
    /*opacity: 1;*/
/*}*/
.intro_wrap .logo_container .intro_logo, .loading .logo_container .intro_logo{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
    max-width: 250px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
.intro_wrap .solid_overlay{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    background: #e2214b;
}
.intro_wrap.step_2 .solid_overlay{
    opacity: 1;
}
.intro_wrap.step_3{
    /*-webkit-transition-timing-function: linear;*/
    /*transition-timing-function: linear;*/
    /*opacity: 0;*/
    transform: scaleY(0);
}
/*.intro_wrap.step_1 .logo_container .intro_logo{*/
    /*opacity: 1;*/
    /*top: 50%;*/
/*}*/

.intro_animation_canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 5;
    /*background: #111;*/
}