/*
 LOADING.CSS loader

 */


/*-----------------------------------------------------------------------------------------------------
    [loader page]
-------------------------------------------------------------------------------------------------------*/

.loader{ display: none; }
body.has-loading .loader{background:#fff;position:fixed;top:0;left:0;width:100%;height:100vh;opacity:1;z-index:1000;display:flex;align-items: center;justify-content: center;}

body.has-loading .loader
{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: flex;

    width: 100%;
    height: 100vh;

    opacity: 1;
    background: #fff;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

body.has-loading.page-loaded .loader
{
    height: 0;

    -webkit-transition: 2s ease .5s opacity,0s height 2.5s;

    transition: 2s ease .5s opacity,0s height 2.5s;

    opacity: 0;
}

body.has-loading.page-loaded .lds-roller
{
    -webkit-transition: .5s ease opacity;
    transition: .5s ease opacity;

    opacity: 0;
}

.lds-roller
{
    position: relative;

    display: inline-block;

    width: 80px;
    height: 80px;
}

.lds-roller div
{
    -webkit-transform-origin: 40px 40px;
    -ms-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    -webkit-animation: lds-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
    animation: lds-roller 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
}

.lds-roller div:after
{
    position: absolute;

    display: block;

    width: 4px;
    height: 4px;
    margin: -4px 0 0 -4px;

    content: ' ';

    border-radius: 50%;
    background: #000;
}

.lds-roller div:nth-child(1)
{
    -webkit-animation-delay: -.036s;
    animation-delay: -.036s;
}

.lds-roller div:nth-child(1):after
{
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2)
{
    -webkit-animation-delay: -.072s;
    animation-delay: -.072s;
}

.lds-roller div:nth-child(2):after
{
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3)
{
    -webkit-animation-delay: -.108s;
    animation-delay: -.108s;
}

.lds-roller div:nth-child(3):after
{
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4)
{
    -webkit-animation-delay: -.144s;
    animation-delay: -.144s;
}

.lds-roller div:nth-child(4):after
{
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5)
{
    -webkit-animation-delay: -.18s;
    animation-delay: -.18s;
}

.lds-roller div:nth-child(5):after
{
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6)
{
    -webkit-animation-delay: -.216s;
    animation-delay: -.216s;
}

.lds-roller div:nth-child(6):after
{
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7)
{
    -webkit-animation-delay: -.252s;
    animation-delay: -.252s;
}

.lds-roller div:nth-child(7):after
{
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8)
{
    -webkit-animation-delay: -.288s;
    animation-delay: -.288s;
}

.lds-roller div:nth-child(8):after
{
    top: 56px;
    left: 12px;
}

@-webkit-keyframes lds-roller
{
    0%
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes lds-roller
{
    0%
    {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/** loader wishlist **/
.container-loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #444444;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

#loader-wishlist {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2);
    z-index: 10;
    display: none;
}