/*mario*/
/* HTML: <div class="3"></div> */
.loader1 {
    width: fit-content;
    font-size: 17px;
    font-family: monospace;
    line-height: 1.4;
    font-weight: bold;
    padding: 30px 2px 50px;
    background: linear-gradient(#000 0 0) 0 0/100% 100% content-box padding-box no-repeat; 
    position: relative;
    overflow: hidden;
    animation: l10-0 2s infinite cubic-bezier(1,175,.5,175);
  }
  .loader1::before {
    content:"Cargando...";
    display:inline-block;
    animation: l10-2 2s infinite;
  }
  .loader1::after {
    content:"";
    position: absolute;
    width: 34px;
    height: 28px;
    top: 110%;
    left: calc(50% - 16px);
    background:
      linear-gradient(90deg,#0000 12px,#f92033 0 22px,#0000 0 26px,#fdc98d 0 32px,#0000) bottom 26px left 50%,
      linear-gradient(90deg,#0000 10px,#f92033 0 28px,#fdc98d 0 32px,#0000 0) bottom 24px  left 50%,
      linear-gradient(90deg,#0000 10px,#643700 0 16px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 24px,#000 0 26px,#f92033 0 32px,#0000 0) bottom 22px left 50%,
      linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 14px,#fdc98d 0 20px,#000 0 22px,#fdc98d 0 28px,#f92033 0 32px,#0000 0) bottom 20px left 50%,
      linear-gradient(90deg,#0000 8px,#643700 0 10px,#fdc98d 0 12px,#643700 0 16px,#fdc98d 0 22px,#000 0 24px,#fdc98d 0 30px,#f92033 0 32px,#0000 0) bottom 18px left 50%,
      linear-gradient(90deg,#0000 8px,#643700 0 12px,#fdc98d 0 20px,#000 0 28px,#f92033 0 30px,#0000 0) bottom 16px left 50%,
      linear-gradient(90deg,#0000 12px,#fdc98d 0 26px,#f92033 0 30px,#0000 0) bottom 14px left 50%,
      linear-gradient(90deg,#fdc98d 6px,#f92033 0 14px,#222a87 0 16px,#f92033 0 22px,#222a87 0 24px,#f92033 0 28px,#0000 0 32px,#643700 0) bottom 12px left 50%,
      linear-gradient(90deg,#fdc98d 6px,#f92033 0 16px,#222a87 0 18px,#f92033 0 24px,#f92033 0 26px,#0000 0 30px,#643700 0) bottom 10px left 50%,
      linear-gradient(90deg,#0000 10px,#f92033 0 16px,#222a87 0 24px,#feee49 0 26px,#222a87 0 30px, #643700 0) bottom 8px left 50%,
      linear-gradient(90deg,#0000 12px,#222a87 0 18px,#feee49 0 20px,#222a87 0 30px,#643700 0) bottom 6px left 50%,
      linear-gradient(90deg,#0000 8px,#643700 0 12px,#222a87 0 30px,#643700 0) bottom 4px left 50%,
      linear-gradient(90deg,#0000 6px,#643700 0 14px,#222a87 0 26px,#0000 0) bottom 2px left 50%,
      linear-gradient(90deg,#0000 6px,#643700 0 10px,#0000 0 ) bottom 0px left 50%;
    background-size: 34px 2px;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: l10-1;
  }
  @keyframes l10-0{
    0%,30%   { background-position: 0 0px }
    50%,100% { background-position: 0 -0.1px }
  }
  @keyframes l10-1{
    50%,100% { top:109.5% };
  }
  @keyframes l10-2{
    0%,30%   { transform:translateY(0); }
    80%,100% { transform:translateY(-260%); }
  }


/*pacman*/
  /* HTML: <div class="loader"></div> */
.loader2 {
    width: 90px;
    height: 24px;
    padding: 2px 0;
    box-sizing: border-box;
    display: flex;
    animation: l5-0 3s infinite steps(6);
    background:
      linear-gradient(#000 0 0) 0 0/0% 100% no-repeat,
      radial-gradient(circle 3px,#eeee89 90%,#0000) 0 0/20% 100%
      #000;
    overflow: hidden;
  }
  .loader2::before {
    content: "";
    width: 20px;
    transform: translate(-100%);
    border-radius: 50%;
    background: #ffff2d;
    animation: 
      l0025-1 .25s .153s infinite steps(5) alternate,
      l0025-2  3s        infinite linear;
  }
  @keyframes l0025-1{ 
      0% {clip-path: polygon(50% 50%,100%   0,100% 0,0 0,0 100%,100% 100%,100% 100%)}
    100% {clip-path: polygon(50% 50%,100% 65%,100% 0,0 0,0 100%,100% 100%,100%  35%)}
  }
  @keyframes l0025-2{ 
    100% {transform: translate(90px)}
  }
  @keyframes l0025-0{ 
    100% {background-size:120% 100%,20% 100%}
  }

/*pingpong*/
  /* HTML: <div class="loader"></div> */
.loader3 {
    width: 80px;
    height: 70px;
    border: 5px solid #000;
    padding: 0 8px;
    box-sizing: border-box;
    background:
      linear-gradient(#fff 0 0) 0    0/8px 20px,
      linear-gradient(#fff 0 0) 100% 0/8px 20px,
      radial-gradient(farthest-side,#fff 90%,#0000) 0 5px/8px 8px content-box,
      #000;
    background-repeat: no-repeat; 
    animation: l0033 2s infinite linear;
  }
  @keyframes l0033{
    25% {background-position: 0 0   ,100% 100%,100% calc(100% - 5px)}
    50% {background-position: 0 100%,100% 100%,0    calc(100% - 5px)}
    75% {background-position: 0 100%,100%    0,100% 5px}
  }

/*jump*/
  /* HTML: <div class="loader"></div> */
.loader4 {
    width: 70px;
    height: 50px;
    box-sizing: border-box;
    background:
      conic-gradient(from 135deg at top,#0000, #fff 1deg 90deg,#0000 91deg) right -20px bottom 8px/18px 9px,
      linear-gradient(#fff 0 0) bottom/100% 8px,
      #000;
    background-repeat: no-repeat;
    border-bottom: 8px solid #000;
    position: relative;
    animation: l0047-0 2s infinite linear;
  }
  .loader4::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 14px;
    background: lightblue;
    left: 10px;
    animation: l0047-1 2s infinite cubic-bezier(0,200,1,200);
  }
  @keyframes l0047-0{
    100% { background-position: left -20px bottom 8px,bottom}
  }
  @keyframes l0047-1{
    0%,50%   {bottom: 8px}
    90%,100% {bottom: 8.1px}
  }

  /* HTML: <div class="loader"></div> */
.loader5 {
    width: 50px;
    aspect-ratio: 1;
    color:#dc1818;
    background:
     radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
     radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
     linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
     linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
  }
  .loader5:after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0.4;
    animation: l0053 1s infinite;
  }
  @keyframes l0053 {
    to {transform:scale(1.8);opacity:0}
  }

  /* HTML: <div class="loader"></div> */
.loader6 {
    width: 60px;
    height: 60px;
    display: grid;
  }
  .loader6:before,
  .loader6:after {
    content: "";
    grid-area: 1/1; 
    background: #ad0505;
    clip-path: polygon(0 0,100% 0,100% 100%,75% 25%,0 0,0 100%,100% 100%,25% 75%,0 0);
    animation: l00620 1.5s infinite linear;
  }
  .loader6:after {
    clip-path: polygon(0 0,76% 24%,100% 100%,24% 76%);
    --s:0;
  }
  @keyframes l00620 {
    0%      {transform: perspective(100px) rotate3d(1,var(--s,1),0,0)      } 
    25%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,-90deg) }
    25.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,-90deg) } 
    40%,60% {transform: perspective(100px) rotate3d(1,var(--s,1),0,-180deg)} 
    75%     {transform: perspective(100px) rotate3d(1,var(--s,1),0,-270deg)}
    75.01%  {transform: perspective(100px) rotate3d(1,var(--s,1),0,-270deg)} 
    90%,100%{transform: perspective(100px) rotate3d(1,var(--s,1),0,-360deg)}
  }


  /* HTML: <div class="loader"></div> */
.loader7 {
    width: 60px;
    height: 60px;
    display: flex;
    color: #ad0505;
    --c:#0000 calc(100% - 20px),currentColor calc(100% - 19px) 98%,#0000;
    background:
      radial-gradient(farthest-side at left,var(--c)) right /50% 100%,
      radial-gradient(farthest-side at top ,var(--c)) bottom/100% 50%;
    background-repeat: no-repeat;
    animation: l00718-0 2s infinite linear .25s;
  }
.loader7::before{
    content:"";
    width:50%;
    height: 50%;
    background:radial-gradient(farthest-side at bottom right,var(--c));
    animation: l00718-1 .5s infinite linear;
}
@keyframes l00718-0 {
    0%   ,12.49% {transform: rotate(0deg)}
    12.5%,37.49% {transform: rotate(90deg)}
    37.5%,62.49% {transform: rotate(180deg)}
    62.5%,87.49% {transform: rotate(270deg)}
    87.5%,100%   {transform: rotate(360deg)}
}
@keyframes l00718-1 {
    0%      {transform: perspective(150px) rotateY(0)      rotate(0)} 
    50%     {transform: perspective(150px) rotateY(180deg) rotate(0)} 
    80%,100%{transform: perspective(150px) rotateY(180deg) rotate(90deg)}
}

/* HTML: <div class="loader"></div> */
.loader8 {
    width: 60px;
    aspect-ratio: 1;
    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
    background: var(--g), var(--g), var(--g);
    background-size: 50% 50%;
    animation: l00818 1s infinite;
  }
  @keyframes l00818 {
     0%   {background-position:0     0, 10px 10px, 20px 20px}
     33%  {background-position:-30px 0, 10px 10px, 20px 20px}
     66%  {background-position:-30px 0, 10px 40px, 20px 20px}
     100% {background-position:-30px 0, 10px 40px, 50px 20px}
  }

  /* HTML: <div class="loader"></div> */
.loader9 {
    width: 60px;
    display: flex;
    align-items: flex-start;
    aspect-ratio: 1;
  }
  .loader9:before,
  .loader9:after {
    content: "";
    flex: 1;
    aspect-ratio: 1;
    --g: conic-gradient(from -90deg at 10px 10px,#fff 90deg,#0000 0);
    background: var(--g), var(--g), var(--g);
    filter: drop-shadow(30px 30px 0 #fff);
    animation: l00920 1s infinite;
  }
  .loader9:after {
    transform: scaleX(-1);
  }
  @keyframes l00920 {
     0%   {background-position:0     0, 10px 10px, 20px 20px}
     33%  {background-position:10px  10px}
     66%  {background-position:0    20px,10px 10px,20px 0   }
     100% {background-position:0     0, 10px 10px, 20px 20px}
  }

  /* HTML: <div class="loader"></div> */
.loader10 {
    width: 90px;
    height: 14px;
    background: 
      radial-gradient(circle 7px at bottom,#fff 92%,#0000 ) calc(100%/2) 0,
      radial-gradient(circle 7px at top   ,#fff 92%,#0000 ) calc(100%/2) 100%,
      conic-gradient(from 135deg at top   ,#fff 90deg,#0000 0) 0 0,
      conic-gradient(from -45deg at bottom,#fff 90deg,#0000 0) 0 100%;
    background-size: calc(100%/2) 50%;
    background-repeat: repeat-x;
    animation: l001013 3s infinite;
  }
  @keyframes l001013 {
      0%  {background-position: calc(100%/2) 0,calc(100%/2) 100%,0 0, 0 100%}
      20%,
      30% {background-position: calc(3*100%/4) 0,calc(100%/4) 100%,calc(100%/4) 0, calc(100%/-4) 100%}
      45%,
      55% {background-position: 100% 0,0 100%,calc(100%/2) 0, calc(100%/-2) 100%}
      70%,
      80% {background-position: calc(5*100%/4) 0,calc(100%/-4) 100%,calc(3*100%/4) 0, calc(3*100%/-4) 100%}
      100%{background-position: calc(3*100%/2) 0,calc(100%/-2) 100%,100% 0, -100% 100%}
  }

/*pokeball*/
  /* HTML: <div class="loader"></div> */
.loader11 {
    height: 60px;
    aspect-ratio: 1;
    position: relative;
  }
  .loader11::before,
  .loader11::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-origin: bottom;
  }
  .loader11::after {
    background:
      radial-gradient(at 75% 15%,#fffb,#0000 35%),
      radial-gradient(at 80% 40%,#0000,#0008),
      radial-gradient(circle  5px,#fff 94%,#0000),
      radial-gradient(circle 10px,#000 94%,#0000),
      linear-gradient(#F93318 0 0) top   /100% calc(50% - 5px),
      linear-gradient(#fff    0 0) bottom/100% calc(50% - 5px)
      #000;
    background-repeat: no-repeat;
    animation: l001120 1s infinite cubic-bezier(0.5,120,0.5,-120);
  }
  .loader11::before {
    background:#ddd;
    filter: blur(8px);
    transform: scaleY(0.4) translate(-13px, 0px);
  }
  @keyframes l001120 { 
   30%,70% {transform:rotate(0deg)}
   49.99%  {transform:rotate(0.2deg)}
   50%     {transform:rotate(-0.2deg)}
  }


/* HTML: <div class="loader"></div> */
.loader12 {
    width: 100px;
    height: 60px;
    display: flex;
    animation: l12-0 2s infinite linear;
  }
  .loader12::before,
  .loader12::after  {
    content:"";
    flex:4;
    background: 
      radial-gradient(at 50% 20%,#0000,#000a) bottom left/20px 20px repeat-x,
      linear-gradient(red 0 0) bottom/100% 20px no-repeat
      #ddd;
    mask:
      repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,
      radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;
    -webkit-mask:
      repeating-linear-gradient(90deg,#000 0 4px,#0000 0 20px) 8px 0,
      radial-gradient(farthest-side,#000 90%,#0000) left bottom/20px 20px repeat-x;
  }
  .loader12::after {
    flex: 1;
    transform-origin: top;
    animation: l12-1 1s cubic-bezier(0,20,1,20) infinite;
  }
  @keyframes l12-0 { 
   0%,49.9% {transform: scaleX(1)}
   50%,100% {transform: scaleX(-1)}
  }
  @keyframes l12-1 { 
   100% {transform: rotate(-2deg)}
  }


  /* HTML: <div class="loader"></div> */
.loader13 {
    width: 30px;
    aspect-ratio: 1;
    display: grid;
    transform: translateY(100%);
  }
  .loader13::before,
  .loader13::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    transform-origin: bottom;
    position: relative;
  }
  .loader13::before {
    background: radial-gradient(at 30% 30%,#0000,#000a) red;
    transform: scaleY(0.65);
    top: 0;
    animation: l001311-1, l001311-2;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0,400,1,400),ease;
    animation-iteration-count: infinite;
  }
  .loader13::after {
    background: #ccc;
    filter: blur(8px);
    transform: scaleY(0.3) translate(0px,0px);
    left: 0;
    animation: l001311-3 2s cubic-bezier(0,400,1,400) infinite;
  }
  @keyframes l001311-1 {
    100% {top:-0.2px}
  }
  @keyframes l001311-2 {
    4%,96% {transform: scaleY(1)}
  }
  @keyframes l001311-3 {
    100% {transform: scaleY(0.3) translate(0.1px,-0.1px)}
  }

/* HTML: <div class="loader"></div> */
.loader14 {
    height: 20px;
    width: 80px;
    transform: rotate(-30deg);
    background: 
      radial-gradient(farthest-side,#f03355 90%,#0000) left bottom/15px 15px no-repeat
      #ddd;
    animation:
      l001417-0 2s infinite alternate linear,
      l001417-1 2s infinite cubic-bezier(.75,0,1,.6);
  }
  @keyframes l001417-0 {
      50% {transform:rotate(30deg)}
  }
  @keyframes l001417-1 {
      50% {background-position: right bottom}
  }

/* HTML: <div class="loader"></div> */
.loader15 {
    width: 40px;
    height: 40px;
    color: #ff0000;
    background:
      conic-gradient(from  -45deg at top    20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from   45deg at right  20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from  135deg at bottom 20px left 50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg),
      conic-gradient(from -135deg at left   20px top  50% ,#0000 ,currentColor 1deg 90deg,#0000 91deg);
    animation: l4 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l4 {
     50%  {width:60px;height: 60px;transform: rotate(180deg)}
     100% {transform: rotate(360deg)}
  }

/* HTML: <div class="loader"></div> */
.loader16 {
    width: 40px;
    aspect-ratio: 1;
    color: #000000;
    background: repeating-conic-gradient(from -47deg,#0000 0deg, currentColor 1deg 91deg,#0000 94deg 180deg);
    display: flex;
    animation: l12-0 2s infinite linear;
  }
  .loader16::before,
  .loader16::after {
    content: "";
    flex: 1;
    background: currentColor;
    clip-path: polygon(0 0,100% 50%, 0 100%);
    animation: l001612 1s infinite alternate;
    transform-origin: bottom left;
  }
  .loader16::after {
    clip-path: polygon(100% 0,100% 100%,0 50%);
    transform-origin: top right;
  }
  @keyframes l001612-0 {
      0%,49.9% {transform:scaleX( 1)}
      50%,100% {transform:scaleX(-1)}
  }
  @keyframes l001612 {
      0%, 20%  {transform:rotate(0deg)}
      80%,100% {transform:rotate(-270deg)}
  }


  /* HTML: <div class="loader"></div> */
.loader17 {
    width: 40px;
    aspect-ratio: 1;
    color: #941a1a;
    position: relative;
    background: radial-gradient(10px,currentColor 94%,#0000);
  }
  .loader17:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
      radial-gradient(9px at bottom right,#0000 94%,currentColor) top    left,
      radial-gradient(9px at bottom left ,#0000 94%,currentColor) top    right,
      radial-gradient(9px at top    right,#0000 94%,currentColor) bottom left,
      radial-gradient(9px at top    left ,#0000 94%,currentColor) bottom right;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    animation: l001718 1.5s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l001718 {
     33%  {inset:-10px;transform: rotate(0deg)}
     66%  {inset:-10px;transform: rotate(90deg)}
     100% {inset:0    ;transform: rotate(90deg)}
  }

/* HTML: <div class="loader"></div> */
.loader18 {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #585858 #0000;
    animation: l001816 1s infinite linear;
  }
  .loader18::before,
  .loader18::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
  }
  .loader18::before {
    border-color: #921515 #0000;
    animation: inherit; 
    animation-duration: .5s;
    animation-direction: reverse;
  }
  .loader18::after {
    margin: 8px;
  }
  @keyframes l001816 { 
    100%{transform: rotate(1turn)}
  }

  /* HTML: <div class="loader"></div> */
.loader19 {
    width: 40px;
    height: 20px;
    --c:no-repeat radial-gradient(farthest-side,#000 93%,#0000);
    background:
      var(--c) 0    0,
      var(--c) 50%  0;
    background-size: 8px 8px;
    position: relative;
    clip-path: inset(-200% -100% 0 0);
    animation: l6-0 1.5s linear infinite;
  }
  .loader19:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background: #000;
    left: -16px;
    top: 0;
    animation: 
      l6-1 1.5s linear infinite,
      l6-2 0.5s cubic-bezier(0,200,.8,200) infinite;
  }
  .loader19:after {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000; 
    animation: l6-3 1.5s linear infinite;
  }
  @keyframes l6-0 {
    0%,30%  {background-position: 0  0   ,50% 0   }
    33%     {background-position: 0  100%,50% 0   }
    41%,63% {background-position: 0  0   ,50% 0   }
    66%     {background-position: 0  0   ,50% 100%}
    74%,100%{background-position: 0  0   ,50% 0   }
  }
  @keyframes l6-1 {
    90%  {transform:translateY(0)}
    95%  {transform:translateY(15px)}
    100% {transform:translateY(15px);left:calc(100% - 8px)}
  }
  @keyframes l6-2 {
    100% {top:-0.1px}
  }
  @keyframes l6-3 {
    0%,80%,100% {transform:translate(0)}
    90%         {transform:translate(26px)}
  }

  /* HTML: <div class="loader"></div> */
.loader20 {
    width: 40px;
    height: 20px;
    --c:no-repeat radial-gradient(farthest-side,#000 93%,#0000);
    background:
      var(--c) 0    0,
      var(--c) 50%  0,
      var(--c) 100% 0;
    background-size: 8px 8px;
    position: relative;
    animation: l4-0 1s linear infinite alternate;
  }
  .loader20:before {
    content: "";
    position: absolute;
    width: 8px;
    height: 12px;
    background: #000;
    left: 0;
    top: 0;
    animation: 
      l4-1 1s  linear infinite alternate,
      l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
  }
  @keyframes l4-0 {
    0%      {background-position: 0  100%,50% 0   ,100% 0}
    8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
    50%     {background-position: 0  0   ,50% 100%,100% 0}
    58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
    100%    {background-position: 0  0   ,50% 0   ,100% 100%}
  }
  @keyframes l4-1 {
    100% {left:calc(100% - 8px)}
  }
  @keyframes l4-2 {
    100% {top:-0.1px}
  }

/* HTML: <div class="loader"></div> */
.loader21 {
    font-weight: bold;
    font-family: monospace;
    display: inline-grid;
    font-size: 30px;
  }
  .loader21:before,
  .loader21:after {
    content:"Cargando...";
    grid-area: 1/1;
    mask-size: 100% 5px,100% 100%;
    -webkit-mask-size: 100% 5px,100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: l002135-1 1s infinite;
  }
  .loader21:before {
    -webkit-mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
    mask-image:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0);
  }
  .loader21:after {
    mask-image:
      linear-gradient(#000 0 0);
    -webkit-mask-image:
      linear-gradient(#000 0 0);
    animation:
      l002135-1  1s infinite,
      l002135-2 .2s infinite cubic-bezier(0.5,200,0.5,-200);
  }
  
  @keyframes l002135-1{
    0%   {-webkit-mask-position:0 20px,0 0}
    20%  {-webkit-mask-position:0 8px ,0 0}
    40%  {-webkit-mask-position:0 100%,0 0}
    60%  {-webkit-mask-position:0 3px ,0 0}
    80%  {-webkit-mask-position:0 15px,0 0}
    100% {-webkit-mask-position:0 0   ,0 0}
  }
  @keyframes l002135-2{
    100% {transform:translate(0.1px)} 
  }

  /* HTML: <div class="loader"></div> */
.loader22 {
    width: 60px;
    height: 25px;
    border: 2px solid;
    box-sizing: border-box;
    border-radius: 50%;
    display: grid;
    animation: l00222 2s infinite linear;
  }
  .loader22:before,
  .loader22:after {
    content: "";
    grid-area: 1/1;
    border: inherit;
    border-radius: 50%;
    animation: inherit;
    animation-duration: 3s;
  }
  .loader22:after {
    --s:-1;
  }
  @keyframes l00222 {
     100% {transform:rotate(calc(var(--s,1)*1turn))}
  }

  /* HTML: <div class="loader"></div> */
.loader23 {
    width: 75px;
    aspect-ratio: 1; 
    display: grid;
  }
  .loader23:before,
  .loader23:after {
    content: "";
    grid-area: 1/1;
    width: 35px;
    aspect-ratio: 1;
    box-shadow: 0 0 0 3px #fff inset;
    filter: drop-shadow(40px 40px 0 #fff);
    animation: l00238 2s infinite alternate;
  }
  .loader23:after {
    margin: 0 0 0 auto; 
    filter: drop-shadow(-40px 40px 0 #fff);
    animation-delay: -1s;
  }
  @keyframes l00238 {
    0%,10%   {border-radius:0}
    30%,40%  {border-radius:50% 0}
    60%,70%  {border-radius:50%}
    90%,100% {border-radius:0 50%}
  }

/* HTML: <div class="loader"></div> */
.loader24 {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-top: -30px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    transform-origin: 50% 116.5%;
    animation: l17 2s infinite linear; 
  }
  .loader24:before {
    content:"";
    min-width: 233%;
    height: 233%;
    background: 
    radial-gradient(farthest-side,#da0000 90%,#0000) top,
    radial-gradient(farthest-side,#ff7272 90%,#0000) left,
    radial-gradient(farthest-side,#676767 90%,#0000) bottom, 
    radial-gradient(farthest-side,#000000 90%,#0000) right;
    background-size: 43% 43%;
    background-repeat: no-repeat;
    animation: inherit;
    animation-direction: reverse;
  }
  @keyframes l17 {
    100% {transform: rotate(360deg)}
  }

  /* HTML: <div class="loader"></div> */
.loader25 {
    width: 60px;
    aspect-ratio: 1;
    background:
    linear-gradient(90deg,#ad0505 50%,#222 0) top/100% 50% no-repeat, 
    linear-gradient(90deg,#fff 50%,#ccc 0);
    -webkit-mask:linear-gradient(#000 0 0) 0 0/50% 50% no-repeat;
    mask:linear-gradient(#000 0 0) 0 0/50% 50% no-repeat;
    animation: l002518 2s infinite; 
  }
  @keyframes l002518 {
    0%   {-webkit-mask-position:0    0   }
    25%  {-webkit-mask-position:100% 0   }
    50%  {-webkit-mask-position:100% 100%}
    75%  {-webkit-mask-position:0    100%}
    100% {-webkit-mask-position:0    0   }
  }

/* HTML: <div class="loader"></div> */
.loader26 {
    width: 80px;
    height: 40px;
    border-radius: 100px 100px 0 0;
    position: relative;
    overflow: hidden;
  }
  .loader26:before {
    content: "";
    position: absolute;
    inset: 0 0 -100%;
    background: 
      radial-gradient(farthest-side,#ffd738 80%,#0000) left 70% top    20%/15px 15px,
      radial-gradient(farthest-side,#020308 92%,#0000) left 65% bottom 19%/12px 12px,
      radial-gradient(farthest-side,#ecfefe 92%,#0000) left 70% bottom 20%/15px 15px,
      linear-gradient(#9eddfe 50%,#020308 0);
    background-repeat: no-repeat;
    animation: l5 2s infinite;
  }
  @keyframes l5 {
    0%,20%   {transform: rotate(0)}
    40%,60%  {transform: rotate(.5turn)}
    80%,100% {transform: rotate(1turn)}
  }

  /* HTML: <div class="loader"></div> */
.loader27 {
    width: 80px;
    height: 40px;
    background:
      radial-gradient(circle 25px at top right, #ffd738 40%,#0000 ),
      #4dbefa;
    position: relative;
    overflow: hidden;
  }
  .loader27:before,
  .loader27:after{
    content: "";
    position: absolute;
    top: 4px;
    left: -40px;
    width: 36px;
    height: 20px;
    --c: radial-gradient(farthest-side,#fff 96%,#0000);
    background: 
      var(--c) 100% 100% /30% 60%, 
      var(--c) 70% 0 /50% 100%, 
      var(--c) 0 100% /36% 68%, 
      var(--c) 27% 18% /26% 40%,
      linear-gradient(#fff 0 0) bottom/67% 58%;
    background-repeat: no-repeat;
    animation: l002710 2s linear infinite;
  }
  .loader27:after {
     top:15px;
     --l:200%;
  }
  @keyframes l002710{
    100% {left:var(--l,105%)}
  }


  /* HTML: <div class="loader"></div> */
.loader28 {
    width: calc(6*30px);
    height: 50px;
    display: flex;
    color: #8d7958;
    filter: drop-shadow(30px 25px 0 currentColor) drop-shadow(60px 0 0 currentColor) drop-shadow(120px 0 0 currentColor);
    clip-path: inset(0 100% 0 0);
    animation: l12 2s infinite steps(7);
  }
  .loader28:before {
    content: "";
    width: 30px;
    height: 25px;
    --c:no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);
    background: 
      var(--c) left /70% 70%,
      var(--c) right/20% 20%,
      var(--c) top    0 right 15%/20% 20%,
      var(--c) bottom 0 right 15%/20% 20%;
  }
  @keyframes l12 {
    100% {clip-path: inset(0 -30px 0 0)}
  }

/* HTML: <div class="loader"></div> */
.loader29 {
    width: 60px;
    aspect-ratio: 1;
    display: flex;
    color: #000;
    border: 4px solid;
    box-sizing: border-box;
    border-radius: 50%;
    background: 
      radial-gradient(circle 5px, currentColor 95%,#0000),
      linear-gradient(currentColor 50%,#0000 0) 50%/4px 60% no-repeat;
    animation: l00291 2s infinite linear;
  }
  .loader29:before {
    content: "";
    flex: 1;
    background:linear-gradient(currentColor 50%,#0000 0) 50%/4px 80% no-repeat;
    animation: inherit;
  }
  @keyframes l00291 {
    100% {transform: rotate(1turn)}
  }

/* HTML: <div class="loader"></div> */
.loader30 {
    --c1:#673b14;
    --c2:#f8b13b;
    width: 40px;
    height: 80px;
    border-top: 4px solid var(--c1);
    border-bottom: 4px solid var(--c1);
    background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
    display: grid;
    overflow: hidden;
    animation: l00305-0 2s infinite linear;
  }
  .loader30::before,
  .loader30::after {
    content: "";
    grid-area: 1/1;
    width: 75%;
    height: calc(50% - 4px);
    margin: 0 auto;
    border: 2px solid var(--c1);
    border-top: 0;
    box-sizing: content-box;
    border-radius: 0 0 40% 40%;
    mask: 
      linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
      linear-gradient(#000 0 0);
    -webkit-mask: 
      linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: destination-out;
            mask-composite: exclude;
    background: 
      linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
      linear-gradient(var(--c2) 0 0) center/0 100%;
    background-repeat: no-repeat;
    animation: inherit;
    animation-name: l00305-1;
  }
  .loader30::after {
    transform-origin: 50% calc(100% + 2px);
    transform: scaleY(-1);
    --s:3px;
    --d:180deg;
  }
  @keyframes l00305-0 {
    80%  {transform: rotate(0)}
    100% {transform: rotate(0.5turn)}
  }
  @keyframes l00305-1 {
    10%,70%  {background-size:100% 205%,var(--s,0) 100%}
    70%,100% {background-position: top,center}
  }

/* HTML: <div class="loader"></div> */
.loader31 {
    width: 35px;
    height: 80px;
    position: relative;
  }
  .loader31:after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px 5px;
    border-top: 1px solid #bbb6aa;
    border-bottom: 4px solid #bbb6aa;
    background: 
      linear-gradient(#612329 0 0) bottom no-repeat content-box, 
      #e4e0d7;
    mix-blend-mode: darken;
    animation: l1 1.5s infinite linear;
  }
  .loader31:before {
    content: "";
    position: absolute;
    inset: -18px calc(50% - 2px) 8px;
    background: #eb6b3e;   
    transform-origin: bottom;
    transform: rotate(8deg);
  }
  @keyframes l1 {
   0%   {background-size: 100% 100%}
   100% {background-size: 100% 5%}
  }


/* HTML: <div class="loader"></div> */
.loader32 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 8px solid #d1914b;
    box-sizing: border-box;
    --c:no-repeat radial-gradient(farthest-side, #d64123 94%,#0000);
    --b:no-repeat radial-gradient(farthest-side, #000 94%,#0000);
    background:
      var(--c) 11px 15px,
      var(--b) 6px 15px,    
      var(--c) 35px 23px,
      var(--b) 29px 15px,    
      var(--c) 11px 46px,
      var(--b) 11px 34px,    
      var(--c) 36px 0px,
      var(--b) 50px 31px,
      var(--c) 47px 43px,
      var(--b) 31px 48px,    
      #f6d353; 
    background-size: 15px 15px,6px 6px;
    animation: l00324 3s infinite;
  }
  @keyframes l00324 {
    0%     {-webkit-mask:conic-gradient(#0000 0     ,#000 0)}
    16.67% {-webkit-mask:conic-gradient(#0000 60deg ,#000 0)}
    33.33% {-webkit-mask:conic-gradient(#0000 120deg,#000 0)}
    50%    {-webkit-mask:conic-gradient(#0000 180deg,#000 0)}
    66.67% {-webkit-mask:conic-gradient(#0000 240deg,#000 0)}
    83.33% {-webkit-mask:conic-gradient(#0000 300deg,#000 0)}
    100%   {-webkit-mask:conic-gradient(#0000 360deg,#000 0)}
  }

/* HTML: <div class="loader"></div> */
.loader33 {
    height: 30px;
    aspect-ratio: 2;
    display: grid;
    background:
      radial-gradient(farthest-side,#000 15%,#0000 18%)0 0/50% 100%,
      radial-gradient(50% 100% at 50% 160%,#fff 95%,#0000) 0 0   /50% 50%,
      radial-gradient(50% 100% at 50% -60%,#fff 95%,#0000) 0 100%/50% 50%;
    background-repeat: repeat-x;
    animation: l00332 1.5s infinite linear;
  }
  @keyframes l00332 {
    0%,
    15% {background-position:0   0,0 0,0 100%}
    20%,
    40% {background-position:5px 0,0 0,0 100%}
    45%,
    55% {background-position:0   0,0 0,0 100%}
    60%,
    80%{background-position:-5px 0,0 0,0 100%}
    85%,
    100% {background-position:0   0,0 0,0 100%}
  }

/* HTML: <div class="loader"></div> */
.loader34 {
    display: inline-flex;
    gap: 10px;
  }
  .loader34:before,
  .loader34:after {
    content: "";
    height: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(farthest-side,#000 95%,#0000) 35% 35%/6px 6px no-repeat
      #fff;
    transform: scaleX(var(--s,1)) rotate(0deg);
    animation: l00346 1s infinite linear;
  }
  .loader34:after {
    --s: -1;
    animation-delay:-0.1s;
  }
  @keyframes l00346 {
    100% {transform:scaleX(var(--s,1)) rotate(360deg);}
  }

/* HTML: <div class="loader"></div> */
.loader35 {
    display: inline-flex;
    gap: 10px;
  }
  .loader35:before,
  .loader35:after {
    content: "";
    height: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      linear-gradient(#222 0 0) top/100% 40% no-repeat,
      radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
      #fff;
    animation: l00357 1.5s infinite alternate ease-in;
  }
  @keyframes l00357 {
    0%,
    70% {background-size:100% 40%,8px 8px}
    85% {background-size:100% 120%,8px 8px}
    100% {background-size:100% 40%,8px 8px}
  }

/* HTML: <div class="loader"></div> */
.loader36 {
    display: inline-flex;
    gap: 10px;
  }
  .loader36:before,
  .loader36:after {
    content: "";
    height: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      linear-gradient(#222 0 0) top/100% 0% no-repeat,
      radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat
      #fff;
    animation: l00369 4s infinite ease-in;
  }
  @keyframes l00369 {
    0%  {background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
    80% {background-size:100% 70%,8px 8px;background-position:top, 50% 70%}
    84%,
    100%{background-size:100% 0%,8px 8px;background-position:top, 50% 50%}
  }

/* HTML: <div class="loader"></div> */
.loader37 {
    width: 22px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #9b0a0a;
    animation: l10 1.5s infinite linear;
  }
  @keyframes l10 {
    0%    {box-shadow: 
            0 -30px #1d1d1d, calc(30px*0.707) calc(-30px*0.707) #dddddd,30px 0 #1d1d1d, 0 0 #dddddd,
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd}
    12.5% {box-shadow: 
            0 0 #1d1d1d, calc(30px*0.707) calc(-30px*0.707) #dddddd,30px 0 #1d1d1d, calc(30px*0.707) calc(30px*0.707) #dddddd,
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd}
    25%   {box-shadow: 
            0 0 #1d1d1d, 0 0 #dddddd,30px 0 #1d1d1d, calc(30px*0.707) calc(30px*0.707) #dddddd,
            0 30px #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd}
    37.5% {box-shadow: 
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, calc(30px*0.707) calc(30px*0.707) #dddddd,
            0 30px #1d1d1d, calc(-30px*0.707) calc(30px*0.707) #dddddd,0 0 #1d1d1d, 0 0 #dddddd}
    50%   {box-shadow: 
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd,
            0 30px #1d1d1d, calc(-30px*0.707) calc(30px*0.707) #dddddd,-30px 0 #1d1d1d, 0 0 #dddddd}
    62.5% {box-shadow: 
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd,
            0 0 #1d1d1d, calc(-30px*0.707) calc(30px*0.707) #dddddd,-30px 0 #1d1d1d, calc(-30px*0.707) calc(-30px*0.707) #dddddd}
    75%   {box-shadow: 
            0 -30px #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd,
            0 0 #1d1d1d, 0 0 #dddddd,-30px 0 #1d1d1d, calc(-30px*0.707) calc(-30px*0.707) #dddddd}
    87.5% {box-shadow: 
            0 -30px #1d1d1d, calc(30px*0.707) calc(-30px*0.707) #dddddd,0 0 #1d1d1d, 0 0 #dddddd,
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, calc(-30px*0.707) calc(-30px*0.707) #dddddd}
    100%  {box-shadow: 
            0 -30px #1d1d1d, calc(30px*0.707) calc(-30px*0.707) #dddddd,30px 0 #1d1d1d, 0 0 #dddddd,
            0 0 #1d1d1d, 0 0 #dddddd,0 0 #1d1d1d, 0 0 #dddddd}
  
  }

/* HTML: <div class="loader"></div> */
.loader38 {
    height: 40px;
    aspect-ratio: .866;
    display: grid;
    background: conic-gradient(from -121deg at right,#0000, #BF1E62 1deg 60deg,#0000 61deg);
    animation: l11-0 2s infinite;
    transform-origin: 33% 50%;
  }
  .loader38:before,
  .loader38:after {
    content: "";
    grid-area: 1/1;
    background: conic-gradient(from -121deg at right,#0000, #FFA588 1deg 60deg,#0000 61deg);
    animation: inherit;
    animation-name: l11-1;
  }
  .loader38:after {
    --s:30px;
    background: conic-gradient(from -121deg at right,#0000, #027B7F 1deg 60deg,#0000 61deg);
  }
  @keyframes l11-0{
    0%   {transform:translate(-30px) rotate(0)      translate(0)    rotate(0)}
    25%  {transform:translate( 30px) rotate(0)      translate(0)    rotate(0)}
    50%  {transform:translate( 30px) rotate(180deg) translate(0)    rotate(0)}
    75%  {transform:translate( 30px) rotate(180deg) translate(60px) rotate(0)}
    100% {transform:translate( 30px) rotate(180deg) translate(60px) rotate(180deg)}
  }
  @keyframes l11-1{ 
    0%,25%,50%,75%,100% {transform: translate(0)}
    12.5%,62.5% {transform: translate(var(--s,15px))}
  }

/* HTML: <div class="loader"></div> */
.loader39 {
    width: 64px;
    aspect-ratio: 1;
    background: 
      radial-gradient(farthest-side at bottom right,#ff780059 90%,#0000),
      radial-gradient(farthest-side at bottom left ,#ff780059 90%,#0000),
      radial-gradient(farthest-side at top    right,#ff780059 90%,#0000),
      radial-gradient(farthest-side at top    left ,#ff780059 90%,#0000),
      radial-gradient(farthest-side at bottom right,#1d1d1d 90%,#0000),
      radial-gradient(farthest-side at bottom left ,#1d1d1d 90%,#0000),
      radial-gradient(farthest-side at top    right,#1d1d1d 90%,#0000),
      radial-gradient(farthest-side at top    left ,#1d1d1d 90%,#0000),
      radial-gradient(farthest-side at bottom right,#dddddd 90%,#0000),
      radial-gradient(farthest-side at bottom left ,#dddddd 90%,#0000),
      radial-gradient(farthest-side at top    right,#dddddd 90%,#0000),
      radial-gradient(farthest-side at top    left ,#dddddd 90%,#0000);
    background-size: 25% 25%;
    background-repeat: no-repeat;
    animation: l16 2s infinite;
  }
  @keyframes l16{
    0% {background-position: 
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
    16.67% {background-position: 
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
    33.33% {background-position: 
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
    50% {background-position: 
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
    66.67% {background-position: 
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
    83.33% {background-position: 
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(0*100%/3) calc(0*100%/3), calc(3*100%/3) calc(0*100%/3), calc(0*100%/3) calc(3*100%/3), calc(3*100%/3) calc(3*100%/3)}
    100% {background-position: 
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3),
          calc(1*100%/3) calc(1*100%/3), calc(2*100%/3) calc(1*100%/3), calc(1*100%/3) calc(2*100%/3), calc(2*100%/3) calc(2*100%/3)}
  }

  .loader40 {
    position: relative;
    width: 70px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
  }
  .loader40::after , .loader40::before  {
    content: '';
    display: inline-block;
    width: 48px;
    height: 48px;
    background-color: #FFF;
    background-image:  radial-gradient(circle 10px, #0d161b 100%, transparent 0);
    background-repeat: no-repeat;
    border-radius: 50%;
    animation: eyeMove 10s infinite , blink40 10s infinite;
  }
  @keyframes eyeMove {
    0%  , 10% {     background-position: 0px 0px}
    13%  , 40% {     background-position: -15px 0px}
    43%  , 70% {     background-position: 15px 0px}
    73%  , 90% {     background-position: 0px 15px}
    93%  , 100% {     background-position: 0px 0px}
  }
  @keyframes blink40 {
    0%  , 10% , 12% , 20%, 22%, 40%, 42% , 60%, 62%,  70%, 72% , 90%, 92%, 98% , 100%
    { height: 48px}
    11% , 21% ,41% , 61% , 71% , 91% , 99%
    { height: 5px}
  }


  .loader41 {
    width: 40px;
    height: 98px;
    display: inline-block;
    position: relative;
    border: 2px solid #FFF;
    box-sizing: border-box;
    color: rgba(255, 61, 0, 0.9);
    border-radius: 20px 20px 4px 4px;
    background: #fff;
    animation: fill 2s linear infinite alternate;
  }
  .loader41::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50% , -95%);
    border: 2px solid #FFF;
    border-bottom: none;
    background: #fff;
    width: 15px;
    height: 35px;
    animation: fillNeck 2s linear infinite alternate;
  }

  @keyframes fill {
    0% { box-shadow: 0 0  inset }
    50% , 100% { box-shadow: 0 -98px inset }
  }


  @keyframes fillNeck {
    0% , 50%{ box-shadow: 0 0  inset }
    100% { box-shadow: 0 -20px inset }
  }

/*yingyang*/
  .loader42 {
    width: 96px;
    box-sizing: content-box;
    height: 48px;
    background: #FFF;
    border-color: #000000;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    animation: 3s yinYang linear infinite;
  }
  .loader42:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #FFF;
    border: 18px solid #000000;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  }
  .loader42:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #030303;
    border: 18px solid #FFF;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    box-sizing: content-box;
  }
  @keyframes yinYang {
    100%{transform: rotate(360deg)}
  }


  .loader43 {
    width: 150px;
    height: 150px;
    background-color: #5a2819;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.5) inset,
      0 5px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
  .loader43:before,
  .loader43:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 45%;
    top: -40%;
    background-color: #fff;
    animation: wave43 5s linear infinite;
  }
  .loader43:before {
    border-radius: 30%;
    background: rgba(255, 255, 255, 0.4);
    animation: wave43 5s linear infinite;
  }
  @keyframes wave43 {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }


  .loader44 {
    width: 20px;
    height: 20px;
    display: block;
    margin: 80px auto 20px;
    border-radius: 50%;
    background: #ff0000;
    border: 5px solid #FFF;
    position: relative;
    box-sizing: border-box;
  }
  .loader44::before {
    content: '';  
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 8px;
    height: 80px;
    border: 2px solid #FFF;
    border-bottom: none;
    background: #FFF;
    color: #ff0000;
    border-radius: 50px 50px 0 0;
    box-shadow: 0px 0px  inset;
    box-sizing: border-box;
    animation: animloader44 6s linear infinite;
  }
  
  @keyframes animloader44 {
    0% {
      box-shadow: 0px 0px  inset;
    }
    100% {
      box-shadow: 0px -80px  inset;
    }
  }


  .loader45 {
    color: #FFF;
    position: relative;
    display: inline-block;
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    letter-spacing: 4px;
    box-sizing: border-box;
  }
  .loader45::before {
    content: '';  
    position: absolute;
    right: 70px;
    bottom: 10px;
    height: 28px;
    width: 5.15px;
    background: currentColor;
    box-sizing: border-box;
    animation: animloader145 1s linear infinite alternate;
  }
  .loader45::after {
    content: '';  
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    box-sizing: border-box;
    animation: animloader45 1s linear infinite alternate;
  }
  
  @keyframes animloader45 {
    0% {
      transform: translate(0px, 0px) scaleX(1);
    }
    14% {
      transform: translate(-12px, -16px) scaleX(1.05);
    }
    28% {
      transform: translate(-27px, -28px) scaleX(1.07);
    }
    42% {
      transform: translate(-46px, -35px) scaleX(1.1);
    }
    57% {
      transform: translate(-70px, -37px) scaleX(1.1);
    }
    71% {
      transform: translate(-94px, -32px) scaleX(1.07);
    }
    85% {
      transform: translate(-111px, -22px) scaleX(1.05);
    }
    100% {
      transform: translate(-125px, -9px) scaleX(1);
    }
  }
  
  @keyframes animloader145 {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
  }


  .loader46 {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto;
  }
  .loader46:before {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 4px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: #000000;
    animation: loading-bounce46 0.5s ease-in-out infinite alternate;
  }
  .loader46:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 7px;
    width: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 0 #fff, -35px 50px 0 #fff, -70px 95px 0 #fff;
    animation: loading-step46 1s ease-in-out infinite;
  }

  @keyframes loading-bounce46 {
    0% { transform: scale(1, 0.7)}
    40% { transform: scale(0.8, 1.2)}
    60% { transform: scale(1, 1)}
    100% { bottom: 140px }
  }
  @keyframes loading-step46 {
    0% {
      box-shadow: 0 10px 0 rgba(0,0,0,0),
                  0 10px 0 #fff,
                -35px 50px 0 #fff,
                -70px 90px 0 #fff;
    }
    100% {
      box-shadow: 0 10px 0 #fff,
                -35px 50px 0 #fff,
                -70px 90px 0 #fff,
                -70px 90px 0 rgba(0,0,0,0);
    }
  }


  .loader47 {
    width: 180px;
    height: 140px;
    display: block;
    margin: 0 auto 20px;
   background-image: radial-gradient(circle 20px at 24px 30px, #FFF 100%, transparent 0), radial-gradient(circle 30px at 30px 50px, #FFF 100%, transparent 0), radial-gradient(circle 25px at 10px 25px, #FFF 100%, transparent 0), radial-gradient(circle 15px at 15px 15px, #FFF 100%, transparent 0), linear-gradient(#FFF 50px, transparent 0);
    background-size: 50px 50px, 100px 75px, 190px 40px, 40px 40px, 100px 20px;
    background-repeat: no-repeat;
    background-position: 0px 30px, 30px 0px, 80px 29px, 112px 50px, 23px 60px;
    position: relative;
    box-sizing: border-box;
  }
  .loader47::after {
    content: '';  
    position: absolute;
    left: 2px;
    top: 65px;
    width: 2px;
    height: 6px;
    color: #FFF;
    box-sizing: border-box;
    animation: animloader47 0.6s linear infinite;
  }
  
  @keyframes animloader47 {
    0% {
      box-shadow: 25px 0 rgb(91, 217, 240), 50px 0 rgb(60, 202, 245), 75px 0 rgb(68, 190, 238), 100px 0 rgb(45, 153, 224), 125px 0 rgb(52, 194, 230), 150px 0 rgb(63, 207, 243), 25px 0 rgb(107, 248, 248), 50px 0 rgb(91, 217, 240), 75px 0 rgb(91, 217, 240), 100px 0 rgb(91, 217, 240), 125px 0 rgb(91, 217, 240), 150px 0 white;
    }
    50% {
      box-shadow: 25px 20px rgb(51, 197, 241), 50px 60px rgba(255, 255, 255, 0), 75px 30px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 40px rgb(91, 217, 240), 150px 60px rgba(255, 255, 255, 0), 25px 20px rgb(91, 217, 240), 50px 30px rgb(91, 217, 240), 75px 10px rgb(91, 217, 240), 100px 30px rgb(91, 217, 240), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }
    100% {
      box-shadow: 25px 60px rgba(255, 255, 255, 0), 50px 60px rgba(255, 255, 255, 0), 75px 50px rgba(255, 255, 255, 0), 100px 70px rgba(255, 255, 255, 0), 125px 70px rgba(255, 255, 255, 0), 150px 60px rgba(255, 255, 255, 0), 25px 80px rgba(255, 255, 255, 0), 50px 80px rgba(255, 255, 255, 0), 75px 70px rgba(255, 255, 255, 0), 100px 60px rgba(255, 255, 255, 0), 125px 30px rgba(255, 255, 255, 0), 150px 30px rgba(255, 255, 255, 0);
    }
  }


  .loader48 {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    animation: rotate48 0.75s linear infinite;
    padding-bottom: 50px;
}
.loader48::before {
content: '';
position: absolute;
width: 20px;
height: 40px;
border: 1px solid #000000;
border-width: 12px 2px 7px;
border-radius: 2px 2px 1px 1px;
box-sizing: border-box;
transform: rotate(45deg) translate(24px, -10px);
background-image: linear-gradient(#000000 20px, transparent 0),
linear-gradient(#000000 30px, transparent 0),
linear-gradient(#000000 30px, transparent 0);
background-size: 10px 12px , 1px 30px, 1px 30px;
background-repeat: no-repeat;
background-position: center , 12px 0px , 3px 0px;
}
.loader48::after {
content: '';
position: absolute;
height: 4px;
width: 4px;
left: 20px;
top: 47px;
border-radius: 50%;
color: #Fff;
box-shadow: -4px 7px 2px, -7px 16px 3px 1px,
-11px 24px 4px 1px, -6px 24px 4px 1px,
-14px 35px 6px 2px, -5px 36px 8px 2px,
-5px 45px 8px 2px, -14px 49px 8px 2px,
6px 60px 11px 1px, -11px 66px 11px 1px,
11px 75px 13px, -1px 82px 15px;
}

@keyframes rotate48 {
to{transform:rotate(360deg)   }
}

.loader49 {
  width: 106px;
  height: 56px;
  display: block;
  margin: 30px auto;
  background-image: linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), linear-gradient(#FFF 50px, transparent 0), radial-gradient(circle 14px, #FFF 100%, transparent 0);
  background-size: 48px 15px , 15px 35px, 15px 35px, 25px 15px, 28px 28px;
  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
  background-repeat: no-repeat;
  position: relative;
  transform: rotate(-45deg);
  box-sizing: border-box;
}
.loader49::after,
.loader49::before {
  content: '';  
  position: absolute;
  width: 56px;
  height: 56px;
  border: 6px solid #FFF;
  border-radius: 50%;
  left: -45px;
  top: -10px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#FFF 64px, transparent 0), linear-gradient(#FFF 66px, transparent 0), radial-gradient(circle 4px, #FFF 100%, transparent 0);
  background-size: 40px 1px , 1px 40px, 8px 8px;
  background-position: center center;
  box-sizing: border-box;
  animation: rotation49 0.3s linear infinite;
}
.loader49::before {
  left: 25px;
  top: 60px;
}

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



.loader50 {
  width: 160px;
  height: 185px;
  position: relative;
  background: #fff;
  border-radius: 100px 100px 0 0;
}
.loader50:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 125px;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  background-image: radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #000 48%, transparent 55%),
    radial-gradient(circle, #fff 30%, transparent 45%),
    radial-gradient(circle, #000 48%, transparent 51%),
    linear-gradient(#000 20px, transparent 0),
    linear-gradient(#cfecf9 60px, transparent 0),
    radial-gradient(circle, #cfecf9 50%, transparent 51%),
    radial-gradient(circle, #cfecf9 50%, transparent 51%);
  background-repeat: no-repeat;
  background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
    50px 25px, 70px 70px, 70px 70px;
  background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
    50% 50px, 50% 22px, 50% 45px;
  animation: faceLift50 3s linear infinite alternate;
}
.loader50:before {
  content: "";
  position: absolute;
  width: 140%;
  height: 125px;
  left: -20%;
  top: 0;
  background-image: radial-gradient(circle, #fff 48%, transparent 50%),
    radial-gradient(circle, #fff 48%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 65px 65px;
  background-position: 0px 12px, 145px 12px;
  animation: earLift50 3s linear infinite alternate;
}

@keyframes faceLift50 {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(-30%);
  }
}
@keyframes earLift50 {
  0% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
  
.loader51 {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #fff;
}
  .loader51:before,
  .loader51:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    transform: rotateX(70deg);
    animation: 1s spin linear infinite;
  }
  .loader51:after {
    color: #000000;
    transform: rotateY(70deg);
    animation-delay: .4s;
  }

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

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

@keyframes spin {
  0%,
  100% {
    box-shadow: .2em 0px 0 0px currentcolor;
  }
  12% {
    box-shadow: .2em .2em 0 0 currentcolor;
  }
  25% {
    box-shadow: 0 .2em 0 0px currentcolor;
  }
  37% {
    box-shadow: -.2em .2em 0 0 currentcolor;
  }
  50% {
    box-shadow: -.2em 0 0 0 currentcolor;
  }
  62% {
    box-shadow: -.2em -.2em 0 0 currentcolor;
  }
  75% {
    box-shadow: 0px -.2em 0 0 currentcolor;
  }
  87% {
    box-shadow: .2em -.2em 0 0 currentcolor;
  }
}