#transition{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:#212121;
    opacity:1;
    z-index:99999;
    transform:scaleX(1);
    transform-origin:right;
    transition:transform .7s cubic-bezier(.19,1,.22,1)
}

#transition.show {transform:scaleX(0);transform-origin:left}
.loading {position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;background:#212121}
.loading svg {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:auto;z-index:9999;overflow:visible}
.loading svg .animlogo{opacity:1;animation-iteration:1;animation:ocult 5s linear forwards;animation-duration:2s,1s,1s;animation-delay:0s,1s,1s}
.loading svg .st0,.loading svg .st1,.loading svg .st2{
    stroke-dasharray:100;
    stroke:#fff;
    stroke-opacity:1;
    stroke-miterlimit:6;
    fill-opacity:0;
    fill:#e9473f;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
    animation-iteration:1;
    animation:dash 5s linear forwards;
    animation-duration:1s,1s,1s;
    animation-delay:0s,1s,1s;
}
.loading svg .ld1, .loading svg .ld2, .loading svg .ld3, .loading svg .ld4, .loading svg .ld5, .loading svg .ld6, .loading svg .ld7,.loading svg .ld8 {
    stroke-dasharray:100;
    stroke:#fff;
    stroke-miterlimit:6;
    fill-opacity:0;
    fill:#fff;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
    animation-iteration:1;
    animation:filled 1s linear forwards;
    animation-duration:.4s,1s,1s;
    animation-delay:0s,1s,1s;
}
.loading svg .colored {
    fill:#e9473f;
    fill-opacity:0;
    animation-iteration:1;
    animation:colored 1s linear forwards;
    animation-duration:.4s,1s,1s;
    animation-delay:1s,1s,1s;
}
.loading svg .st0 {
    stroke-dashArray:300;
    stroke-dashoffset:300;
    animation-delay:0s,1s,1s
}
.loading svg .st1{
    stroke-dashArray:300;
    stroke-dashoffset:300;
    animation-delay:.2s,1s,1s
}
.loading svg .st2{
    stroke-dashArray:300;
    stroke-dashoffset:300;
    animation-delay:.4s,1s,1s
}
.loading svg .ld1{
    fill-dashArray:300;
    fill-dashoffset:300
}
.loading svg .ld2{
    fill-dashArray:300;
    fill-dashoffset:300;
    animation-delay:.1s,1s,1s
}
.loading svg .ld3{
    fill-dashArray:300;
    fill-dashoffset:300;
    animation-delay:.2s,1s,1s
}
.loading svg .ld4{
    fill-dashArray:300;
    fill-dashoffset:300;
    animation-delay:.3s,1s,1s
}
.loading svg .ld5{
    fill-dashArray:300;fill-dashoffset:300;animation-delay:.4s,1s,1s}
.loading svg .ld6{fill-dashArray:300;fill-dashoffset:300;animation-delay:.5s,1s,1s}
.loading svg .ld7{fill-dashArray:300;fill-dashoffset:300;animation-delay:.6s,1s,1s}
.loading svg .ld8{fill-dashArray:300;fill-dashoffset:300;animation-delay:.7s,1s,1s}

@-webkit-keyframes dash{to{stroke-dasharray:1000}}@keyframes dash{to{stroke-dasharray:1000}}
@-webkit-keyframes ocult{to{opacity:0}}@keyframes ocult{to{opacity:0}}
@-webkit-keyframes filled{to{fill-opacity:1;stroke-opacity:0}}
@keyframes filled{to{fill-opacity:1;stroke-opacity:0}}
@-webkit-keyframes colored{to{fill-opacity:1}}
@keyframes colored{to{fill-opacity:1}}

.loading .loader-section{position:fixed;top:0;right:0;width:100%;height:100%;background:#212121;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}
.loaded .loading .loader-section{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}
.loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}
.loaded .loading{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}