@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date    2016-12-10 16:57:22
* @version $Id$
*/

/*
purple #B1658B;
red #CA2420;
blue #326295;
orange #F89829;
*/

#loading.close .m-loading {
    width: 0px;
    transition: 0.3s;
}
#loading.close .m-loading .m-loading__center {
    display: none;
}

.loading-leave-active {
    -webkit-transition: -webkit-transform 0.4s 0.4s ease;
    transition: -webkit-transform 0.4s 0.4s ease;
    transition: transform 0.4s 0.4s ease;
    transition: transform 0.4s 0.4s ease, -webkit-transform 0.4s 0.4s ease;
}
.loading-leave-active .m-loading__center {
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}
.loading-leave-to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.loading-leave-to .m-loading__center {
    opacity: 0;
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes loader-svg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader-svg {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes loader-inner {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    25% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
    49% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom;
    }
    75% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom;
    }
}
@keyframes loader-inner {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    25% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
    49% {
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    50% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom;
    }
    75% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 0 bottom;
        transform-origin: 0 bottom;
    }
}
.m-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: 999999;
}
.m-loading__center {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    background: #d7d7d7;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.m-loading__center::before,
.m-loading__center .m-loading__inner,
.m-loading__center svg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.m-loading__center::before {
    content: "";
    background: #000;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-animation: loader-inner 2s infinite ease forwards;
    animation: loader-inner 2s infinite ease forwards;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.m-loading__center .m-loading__inner {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.m-loading__center svg {
    z-index: 2;
}