/*
 *   ANIMOWANE LOADERY CSS
 *   =====================
 *   WWW.DIGITALALBUM.PL
 *   COPYRIGHT © 2006 - 2019
 *   DESIGNED AND CREATED BY FOX
 */





@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --   LOADER   -- */

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    z-index: 100;
    transition: all .2s cubic-bezier(.785, .135, .15, .86);
}

.loader::after {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    animation: spin 1s linear infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #000001;
    border-radius: 100%;
    box-sizing: border-box;
}

.loader.white::after {
    border: 2px solid rgba(255, 255, 255, .1);
    border-top: 2px solid #fff;
}

.loader.tiny {
    width: 20px;
    height: 20px;
}

.loader.small {
    width: 24px;
    height: 24px;
}

.loader.medium {
    width: 28px;
    height: 28px;
}

.loader.big {
    width: 56px;
    height: 56px;
}

.loader[flow^="right"] {
    left: auto;
    right: 8px;
    transform: translate(0, -50%);
}



.loader.left {
    left: 16px;
    transform: translateX(0);
}

.loader.right {
    left: auto;
    right: 16px;
    transform: translateX(0);
}

.loader.top {
    top: 16px;
    transform: translateY(0);
}

.loader.bottom {
    top: auto;
    bottom: 16px;
    transform: translateY(0);
}



.loader.left-outside {
    left: auto;
    right: calc(100% + 8px);
    transform: translate(0, -50%);
}

.loader.relative {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
}

.loader.label::before {
    content: attr(data-label);
    display: block;
    position: absolute;
    width: auto;
    pointer-events: none;
    white-space: nowrap;
    color: #666;
    font-family: titillium_webregular;
    text-transform: uppercase;
    font-size: 9pt;
    left: 50%;
    top: 48px;
    transform: translate(-50%, 0);
}










@keyframes v-spin {
    0% { transform: translate(0, -50%) rotate(0deg); }
    100% { transform: translate(0, -50%) rotate(360deg); }
}

@keyframes center-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}





/* --   LOADER JAKO OBIEKT ::AFTER   -- */

.after-loader::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 101;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    animation: spin .8s ease-in-out infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #000001;
    border-radius: 100%;
    margin: -16px 0 0 -16px;
    opacity: 0;
    box-sizing: border-box;
}

/* --   LABEL LOADERA   -- */

.after-loader::before {
    content: attr(data-loading-label);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    pointer-events: none;
    z-index: 101;
    transition: all .3s cubic-bezier(.785, .135, .15, .86);
    margin: 72px 0 0 -120px;
    text-align: center;
    color: #aaa;
    font-family: titillium_webregular;
    font-size: 10pt;
    opacity: 0;
}

/* --   STAN: ŁADOWANIE   -- */

.after-loader.processing::after,
.after-loader.loading::after,
.after-loader.processing::before,
.after-loader.loading::before {
    opacity: 1;
}

.after-loader.processing .header,
.after-loader.loading .header,
.after-loader.processing .content,
.after-loader.loading .content,
.after-loader.processing .objects ,
.after-loader.loading .objects {
    opacity: 0;
}





/* --   DUŻY   -- */

.big-loader::after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
}

/* --   MAŁY   -- */

.small-loader::after {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
}





















/*
 *   KLASA: SPINNER-LOADER
 *   ---------------------
 *   LOADER Z ANIMACJĄ KRĘCĄCEGO SIĘ
 *   KÓŁKA, OPARTY WYŁĄCZNIE NA CSS-IE
 */

.spinner_loader,
.spinner-loader
{
              width: 64px;
             height: 64px;
            z-index: 100000;
         transition: all .15s ease-out;
           position: absolute;
               left: 50%;
                top: 50%;
          transform: translate(-50%, -50%);
}



/* --   WIELKOŚCI LOADERÓW   -- */

.spinner_loader.medium,
.spinner-loader.medium
{
              width: 40px;
             height: 40px;
}

.spinner_loader.small,
.spinner-loader.small
{
              width: 32px;
             height: 32px;
}

.spinner_loader.very-small,
.spinner-loader.very-small
{
              width: 24px;
             height: 24px;
}



/* --   OBRACAJĄCY SIĘ ELEMENT   -- */

.spinner_loader .spinner,
.spinner-loader .spinner
{
             border: 2px solid rgba(0, 0, 0, .1);
         border-top: 2px solid #000001;
      border-radius: 100%;
              width: 100%;
             height: 100%;
          animation: spinner 1s cubic-bezier(.785, .135, .15, .86) infinite;
           position: absolute;
         box-sizing: border-box;
               left: 0;
                top: 0;
}



/* --   KOLORYSTYKA LOADERA   -- */

.spinner_loader.blue .spinner,
.spinner-loader.blue .spinner
{
         border-top: 2px solid #0066ff;
}

.spinner_loader.white .spinner,
.spinner-loader.white .spinner
{
         border-top: 2px solid #fff;
}

.spinner_loader.red-bg::after,
.spinner-loader.red-bg::after
{
            content: '';
           position: absolute;
               left: -8px;
                top: -8px;
              width: 40px;
             height: 40px;
         background: #c51c00;
      border-radius: 2px;
            z-index: -1;
}



/* --   OPIS LOADERA   -- */

.spinner_loader .label,
.spinner-loader .label
{
           position: absolute;
         text-align: center;
               left: 50%;
             bottom: -40px;
             height: 24px;
        line-height: 24px;
          font-size: 10pt;
     text-transform: uppercase;
              color: #666;
          transform: translate(-50%, 0);
        font-family: titillium_webregular;
        white-space: nowrap;
         transition: all .25s ease-out;
}



/* --   ANIMACJA OBROTU   -- */

@keyframes spinner
{
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* --   RÓŻNE PRĘDKOŚCI ANIMACJI OBRACAJĄCEGO SIĘ ELEMENTU   -- */

.animation-01 { animation: spinner 1s cubic-bezier(.785, .135, .15, .86) infinite !important; }
.animation-02 { animation: spinner 1.5s ease infinite !important; }
.animation-03 { animation: spinner 2s ease-in infinite !important; }
.animation-04 { animation: spinner 1.3s ease-out infinite !important; }










/* --   SPAN-LOADER   -- */

.span-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 100000;
    transition: all .15s ease-out;
    animation: center-spin 1s ease-out infinite;
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #000001;
    border-radius: 100%;
    margin: 0;
}

.span-loader.normal-spin {
    animation: spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
}

.span-loader.right-outside {
    animation: v-spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
    left: calc(100% + 12px);
}

.span-loader.left-outside {
    animation: v-spin 1s cubic-bezier(.785, .135, .15, .86) infinite;
    right: calc(100% + 12px);
    left: auto;
}





.span-loader.big {
    width: 40px;
    height: 40px;
    border-width: 2px;
}

.span-loader.small {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

.span-loader.tiny {
    width: 20px;
    height: 20px;
    border-width: 1px !important;
}

.span-loader.green {
    border-top: 2px solid #0b9a00;
}

.span-loader.aquamarine {
    border-top: 2px solid #03b894;
}

.span-loader.gray {
    border-top: 2px solid #aaa;
}

.span-loader.white {
    border: 2px solid rgba(255, 255, 255, .2);
    border-top: 2px solid #fff;
}

.span-loader.pastel-pink {
    border-top: 2px solid #fe4d62;
}

.span-loader.blue {
    border-top: 2px solid rgba(19, 126, 255, 1) !important;
}

.span-loader.pastel-pink:hover {
    filter: saturate(90%);
}

/* .span-loader.for-dark {
    border: 2px solid rgba(255, 255, 255, .2);
    border-top: 2px solid #fff;
}

.span-loader.for-light {
    border: 2px solid rgba(0, 0, 0, .1);
    border-top: 2px solid #fe4d62;
} */





.span-loader.from-left {
    left: auto;
    /* top: 4px; */
    right: calc(100% + 8px);
    transform: translate(0, 50%);
}

.span-loader.thin {
    border-width: 1px;
}





















/* --   STARY LOADER   -- */

.new-loader {
    width:24px;
    height:24px;
    pointer-events:none;
    z-index:100000;
    transition:all 0.15s ease-out;
}

.new-loader p {
    width:100% !important;
    height:100% !important;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    margin:0 !important;
}

.new-loader p span{
    border:2px solid rgba(0,0,0,0.05);
    border-top:2px solid #000001;
    border-radius:100%;
    width:100%;
    height:100%;
    animation:spin 1s ease-out infinite;
    position:absolute;
    left:-2px;
    top:-2px;
    padding:0 !important;
}

@keyframes spin {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(360deg); }
}