@-webkit-keyframes eds-back-and-forth{
  from{
    -webkit-transform:none;
            transform:none;
  }
  to{
    -webkit-transform:translateX(-webkit-calc(100% - 3rem));
            transform:translateX(calc(100% - 3rem));
  }
}
@-moz-keyframes eds-back-and-forth{
  from{
    -moz-transform:none;
         transform:none;
  }
  to{
    -moz-transform:translateX(-moz-calc(100% - 3rem));
         transform:translateX(calc(100% - 3rem));
  }
}
@-o-keyframes eds-back-and-forth{
  from{
    -o-transform:none;
       transform:none;
  }
  to{
    -o-transform:translateX(calc(100% - 3rem));
       transform:translateX(calc(100% - 3rem));
  }
}
@keyframes eds-back-and-forth{
  from{
    -webkit-transform:none;
       -moz-transform:none;
         -o-transform:none;
            transform:none;
  }
  to{
    -webkit-transform:translateX(-webkit-calc(100% - 3rem));
       -moz-transform:translateX(-moz-calc(100% - 3rem));
         -o-transform:translateX(calc(100% - 3rem));
            transform:translateX(calc(100% - 3rem));
  }
}
@-webkit-keyframes grow{
  0%, 100%{
    -webkit-transform:none;
            transform:none;
  }
  50%{
    -webkit-transform:scaleX(2);
            transform:scaleX(2);
  }
}
@-moz-keyframes grow{
  0%, 100%{
    -moz-transform:none;
         transform:none;
  }
  50%{
    -moz-transform:scaleX(2);
         transform:scaleX(2);
  }
}
@-o-keyframes grow{
  0%, 100%{
    -o-transform:none;
       transform:none;
  }
  50%{
    -o-transform:scaleX(2);
       transform:scaleX(2);
  }
}
@keyframes grow{
  0%, 100%{
    -webkit-transform:none;
       -moz-transform:none;
         -o-transform:none;
            transform:none;
  }
  50%{
    -webkit-transform:scaleX(2);
       -moz-transform:scaleX(2);
         -o-transform:scaleX(2);
            transform:scaleX(2);
  }
}
.eds-loader{
  text-align:center;
  overflow-x:hidden;
  max-width:20rem;
  margin:0 auto;
  color:var(--components-loader-loader-standard-text);
}
.eds-loader .eds-loader__label{
  margin-bottom:0.5rem;
}
.eds-loader .eds-loader__percentage{
  float:right;
  margin-top:0.5rem;
}
.eds-contrast .eds-loader{
  color:var(--components-loader-loader-contrast-text);
}

.eds-loader__bar{
  border:0.0625rem solid var(--components-loader-loader-standard-border);
}
.eds-loader__bar::after{
  background:var(--components-loader-loader-standard-progressbar);
  content:"";
  display:block;
  height:0.3125rem;
  -webkit-transition:width 0.1s ease-out;
  -o-transition:width 0.1s ease-out;
  -moz-transition:width 0.1s ease-out;
  transition:width 0.1s ease-out;
  width:var(--loader-width);
}
.eds-contrast .eds-loader__bar::after{
  border-color:var(--components-loader-loader-standard-progressbar);
}
.eds-contrast .eds-loader__bar{
  border-color:var(--components-loader-loader-contrast-border);
}
.eds-loader__bar--indeterminate{
  -webkit-animation:1s eds-back-and-forth alternate infinite ease-in-out;
     -moz-animation:1s eds-back-and-forth alternate infinite ease-in-out;
       -o-animation:1s eds-back-and-forth alternate infinite ease-in-out;
          animation:1s eds-back-and-forth alternate infinite ease-in-out;
  border:none;
  will-change:transform;
}
.eds-loader__bar--indeterminate::after{
  -webkit-animation:1s grow alternate infinite ease-in-out;
     -moz-animation:1s grow alternate infinite ease-in-out;
       -o-animation:1s grow alternate infinite ease-in-out;
          animation:1s grow alternate infinite ease-in-out;
  width:3rem;
  will-change:transform;
}[data-color-mode=light],
:root{
  --components-loader-fileupload-contrast-fill-default:rgba(255, 255, 255, 0);
  --components-loader-fileupload-contrast-icon:#ffffff;
  --components-loader-fileupload-contrast-icon-disabled:#949699;
  --components-loader-fileupload-contrast-stroke-default:#8284ab;
  --components-loader-fileupload-contrast-stroke-disabled:#949699;
  --components-loader-fileupload-contrast-stroke-negative:#ff9494;
  --components-loader-fileupload-contrast-stroke-success:#5ac39a;
  --components-loader-fileupload-contrast-text:#ffffff;
  --components-loader-fileupload-contrast-text-disabled:#949699;
  --components-loader-fileupload-standard-fill-default:rgba(255, 255, 255, 0);
  --components-loader-fileupload-standard-icon:#181c56;
  --components-loader-fileupload-standard-icon-disabled:#6e6f73;
  --components-loader-fileupload-standard-stroke-default:#8284ab;
  --components-loader-fileupload-standard-stroke-disabled:#949699;
  --components-loader-fileupload-standard-stroke-negative:#d31b1b;
  --components-loader-fileupload-standard-stroke-success:#1a8e60;
  --components-loader-fileupload-standard-text:#181c56;
  --components-loader-fileupload-standard-text-disabled:#6e6f73;
  --components-loader-loader-contrast-border:#8284ab;
  --components-loader-loader-contrast-progressbar:#ff5959;
  --components-loader-loader-contrast-text:#ffffff;
  --components-loader-loader-standard-border:#949699;
  --components-loader-loader-standard-progressbar:#ff5959;
  --components-loader-loader-standard-text:#181c56;
  --components-loader-spinner-contrast-fill:#ffffff;
  --components-loader-spinner-standard-fill:#181c56;
  --components-loader-skeleton-contrast-fill:#292b6a;
  --components-loader-skeleton-contrast-highlight:#181c56;
  --components-loader-skeleton-standard-fill:#eaeaf1;
  --components-loader-skeleton-standard-highlight:#f6f6f9;
}

[data-color-mode=dark]{
  --components-loader-fileupload-contrast-fill-default:rgba(255, 255, 255, 0);
  --components-loader-fileupload-contrast-icon:#e5e5e9;
  --components-loader-fileupload-contrast-icon-disabled:#949699;
  --components-loader-fileupload-contrast-stroke-default:#8284ab;
  --components-loader-fileupload-contrast-stroke-disabled:#81828f;
  --components-loader-fileupload-contrast-stroke-negative:#ff9494;
  --components-loader-fileupload-contrast-stroke-success:#5ac39a;
  --components-loader-fileupload-contrast-text:#e5e5e9;
  --components-loader-fileupload-contrast-text-disabled:#949699;
  --components-loader-fileupload-standard-fill-default:rgba(255, 255, 255, 0);
  --components-loader-fileupload-standard-icon:#e5e5e9;
  --components-loader-fileupload-standard-icon-disabled:#949699;
  --components-loader-fileupload-standard-stroke-default:#8284ab;
  --components-loader-fileupload-standard-stroke-disabled:#81828f;
  --components-loader-fileupload-standard-stroke-negative:#ff9494;
  --components-loader-fileupload-standard-stroke-success:#5ac39a;
  --components-loader-fileupload-standard-text:#e5e5e9;
  --components-loader-fileupload-standard-text-disabled:#949699;
  --components-loader-loader-contrast-border:#81828f;
  --components-loader-loader-contrast-progressbar:#ff5959;
  --components-loader-loader-contrast-text:#e5e5e9;
  --components-loader-loader-standard-border:#81828f;
  --components-loader-loader-standard-progressbar:#ff5959;
  --components-loader-loader-standard-text:#e5e5e9;
  --components-loader-spinner-contrast-fill:#e5e5e9;
  --components-loader-spinner-standard-fill:#e5e5e9;
  --components-loader-skeleton-contrast-fill:#2d2e3e;
  --components-loader-skeleton-contrast-highlight:#141527;
  --components-loader-skeleton-standard-fill:#2d2e3e;
  --components-loader-skeleton-standard-highlight:#141527;
}
[data-color-mode=light],
:root{
  --basecolors-frame-contrast:#181c56;
  --basecolors-frame-contrastalt:#393d79;
  --basecolors-frame-contrastalt-2:#292b6a;
  --basecolors-frame-default:#ffffff;
  --basecolors-frame-elevated:#ffffff;
  --basecolors-frame-elevatedalt:#f6f6f9;
  --basecolors-frame-highlight:#ff5959;
  --basecolors-frame-highlightalt:#ffbf9e;
  --basecolors-frame-subdued:#d9dae8;
  --basecolors-frame-tint:#f6f6f9;
  --basecolors-shape-accent:#181c56;
  --basecolors-shape-bicycle-contrast:#00dbb6;
  --basecolors-shape-bicycle-default:#0d827e;
  --basecolors-shape-bus-contrast:#ff6392;
  --basecolors-shape-bus-default:#c5044e;
  --basecolors-shape-cableway-contrast:#b482fb;
  --basecolors-shape-cableway-default:#78469a;
  --basecolors-shape-disabled:#6e6f73;
  --basecolors-shape-disabledalt:#b6b8ba;
  --basecolors-shape-ferry-contrast:#6fdfff;
  --basecolors-shape-ferry-default:#0c6693;
  --basecolors-shape-funicular-contrast:#b482fb;
  --basecolors-shape-funicular-default:#78469a;
  --basecolors-shape-helicopter-contrast:#fbafea;
  --basecolors-shape-helicopter-default:#800664;
  --basecolors-shape-highlight:#ff5959;
  --basecolors-shape-light:#ffffff;
  --basecolors-shape-mask:#ffffff;
  --basecolors-shape-maskalt:#ffffff;
  --basecolors-shape-metro-contrast:#f08901;
  --basecolors-shape-metro-default:#bf5826;
  --basecolors-shape-mobility-contrast:#00dbb6;
  --basecolors-shape-mobility-default:#0d827e;
  --basecolors-shape-plane-contrast:#fbafea;
  --basecolors-shape-plane-default:#800664;
  --basecolors-shape-subdued:#626493;
  --basecolors-shape-subduedalt:#d9dae8;
  --basecolors-shape-taxi-contrast:#ffe082;
  --basecolors-shape-taxi-default:#3d3e40;
  --basecolors-shape-train-contrast:#42a5f5;
  --basecolors-shape-train-default:#00367f;
  --basecolors-shape-tram-contrast:#b482fb;
  --basecolors-shape-tram-default:#78469a;
  --basecolors-shape-walk-contrast:#9ea0bd;
  --basecolors-shape-walk-default:#8d8e9c;
  --basecolors-shape-airportlinkbus-contrast:#fbafea;
  --basecolors-shape-airportlinkbus-default:#800664;
  --basecolors-shape-airportlinkrail-contrast:#fbafea;
  --basecolors-shape-airportlinkrail-default:#800664;
  --basecolors-stroke-contrast:#aeb7e2;
  --basecolors-stroke-default:#181c56;
  --basecolors-stroke-disabled:#949699;
  --basecolors-stroke-focus-contrast:#aeb7e2;
  --basecolors-stroke-focus-standard:#181c56;
  --basecolors-stroke-highlight:#ff5959;
  --basecolors-stroke-highlight2:#ffbf9e;
  --basecolors-stroke-light:#ffffff;
  --basecolors-stroke-subdued:#8284ab;
  --basecolors-stroke-subduedalt:#e3e6e8;
  --basecolors-text-accent:#181c56;
  --basecolors-text-disabled:#6e6f73;
  --basecolors-text-disabledalt:#b6b8ba;
  --basecolors-text-highlight:#ff5959;
  --basecolors-text-highlightalt:#ffbf9e;
  --basecolors-text-light:#ffffff;
  --basecolors-text-subdued:#626493;
  --basecolors-text-subduedalt:#d9dae8;
}

[data-color-mode=dark]{
  --basecolors-frame-contrast:#212233;
  --basecolors-frame-contrastalt:#141527;
  --basecolors-frame-contrastalt-2:#08091c;
  --basecolors-frame-default:#08091c;
  --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
  --basecolors-frame-elevatedalt:#464755;
  --basecolors-frame-highlight:#ff5959;
  --basecolors-frame-highlightalt:#ffbf9e;
  --basecolors-frame-subdued:#2d2e3e;
  --basecolors-frame-tint:#141527;
  --basecolors-shape-accent:#e5e5e9;
  --basecolors-shape-bicycle-contrast:#4db2a1;
  --basecolors-shape-bicycle-default:#4db2a1;
  --basecolors-shape-bus-contrast:#ef7398;
  --basecolors-shape-bus-default:#ef7398;
  --basecolors-shape-cableway-contrast:#b898e5;
  --basecolors-shape-cableway-default:#b898e5;
  --basecolors-shape-disabled:#b6b8ba;
  --basecolors-shape-disabledalt:#b3b4bd;
  --basecolors-shape-ferry-contrast:#8ccfe2;
  --basecolors-shape-ferry-default:#8ccfe2;
  --basecolors-shape-funicular-contrast:#b898e5;
  --basecolors-shape-funicular-default:#b898e5;
  --basecolors-shape-helicopter-contrast:#f2b8e5;
  --basecolors-shape-helicopter-default:#f2b8e5;
  --basecolors-shape-highlight:#ff5959;
  --basecolors-shape-light:#e5e5e9;
  --basecolors-shape-mask:#2d2e3e;
  --basecolors-shape-maskalt:#393a49;
  --basecolors-shape-metro-contrast:#dd973c;
  --basecolors-shape-metro-default:#dd973c;
  --basecolors-shape-mobility-contrast:#4db2a1;
  --basecolors-shape-mobility-default:#4db2a1;
  --basecolors-shape-plane-contrast:#f2b8e5;
  --basecolors-shape-plane-default:#f2b8e5;
  --basecolors-shape-subdued:#b3b4bd;
  --basecolors-shape-subduedalt:#b3b4bd;
  --basecolors-shape-taxi-contrast:#ffe082;
  --basecolors-shape-taxi-default:#ffe082;
  --basecolors-shape-train-contrast:#60a2d7;
  --basecolors-shape-train-default:#60a2d7;
  --basecolors-shape-tram-contrast:#b898e5;
  --basecolors-shape-tram-default:#b898e5;
  --basecolors-shape-walk-contrast:#8d8e9c;
  --basecolors-shape-walk-default:#8d8e9c;
  --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
  --basecolors-shape-airportlinkbus-default:#f2b8e5;
  --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
  --basecolors-shape-airportlinkrail-default:#f2b8e5;
  --basecolors-stroke-contrast:#aeb7e2;
  --basecolors-stroke-default:#b3b4bd;
  --basecolors-stroke-disabled:#e3e6e8;
  --basecolors-stroke-focus-contrast:#aeb7e2;
  --basecolors-stroke-focus-standard:#aeb7e2;
  --basecolors-stroke-highlight:#ff5959;
  --basecolors-stroke-highlight2:#ffbf9e;
  --basecolors-stroke-light:#b3b4bd;
  --basecolors-stroke-subdued:#81828f;
  --basecolors-stroke-subduedalt:#949699;
  --basecolors-text-accent:#e5e5e9;
  --basecolors-text-disabled:#b6b8ba;
  --basecolors-text-disabledalt:#b6b8ba;
  --basecolors-text-highlight:#ff5959;
  --basecolors-text-highlightalt:#ffbf9e;
  --basecolors-text-light:#e5e5e9;
  --basecolors-text-subdued:#b3b4bd;
  --basecolors-text-subduedalt:#b3b4bd;
}

:root{
  --eds-loader:1;
}.eds-skeleton{
  display:block;
  margin:0.2rem 0;
  height:1rem;
  width:100%;
}
.eds-skeleton-circle{
  -webkit-border-radius:50%;
     -moz-border-radius:50%;
          border-radius:50%;
  width:1rem;
  height:1rem;
}
.eds-skeleton-rectangle{
  height:1rem;
}
.eds-skeleton--animate{
  --background-color:var(--components-loader-skeleton-standard-fill);
  --shimmer-highlight-color:var(--components-loader-skeleton-standard-highlight);
  -webkit-animation:shimmer 2s infinite linear;
     -moz-animation:shimmer 2s infinite linear;
       -o-animation:shimmer 2s infinite linear;
          animation:shimmer 2s infinite linear;
  background:-webkit-gradient(linear, left top, right top, color-stop(4%, var(--background-color)), color-stop(25%, var(--shimmer-highlight-color)), color-stop(36%, var(--background-color)));
  background:-webkit-linear-gradient(left, var(--background-color) 4%, var(--shimmer-highlight-color) 25%, var(--background-color) 36%);
  background:-moz-linear-gradient(left, var(--background-color) 4%, var(--shimmer-highlight-color) 25%, var(--background-color) 36%);
  background:-o-linear-gradient(left, var(--background-color) 4%, var(--shimmer-highlight-color) 25%, var(--background-color) 36%);
  background:linear-gradient(to right, var(--background-color) 4%, var(--shimmer-highlight-color) 25%, var(--background-color) 36%);
  -moz-background-size:1000px 100%;
    -o-background-size:1000px 100%;
       background-size:1000px 100%;
}
.eds-contrast .eds-skeleton--animate{
  --background-color:var(--components-loader-skeleton-contrast-fill);
  --shimmer-highlight-color:var(--components-loader-skeleton-contrast-highlight);
}

@-webkit-keyframes shimmer{
  0%{
    background-position:-1000px 0;
  }
  100%{
    background-position:1000px 0;
  }
}

@-moz-keyframes shimmer{
  0%{
    background-position:-1000px 0;
  }
  100%{
    background-position:1000px 0;
  }
}

@-o-keyframes shimmer{
  0%{
    background-position:-1000px 0;
  }
  100%{
    background-position:1000px 0;
  }
}

@keyframes shimmer{
  0%{
    background-position:-1000px 0;
  }
  100%{
    background-position:1000px 0;
  }
}.eds-loading-dots{
  height:1em;
  width:1em;
  display:-webkit-box;
  display:-webkit-flex;
  display:-moz-box;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
     -moz-box-align:center;
          align-items:center;
  -webkit-box-pack:center;
  -webkit-justify-content:center;
     -moz-box-pack:center;
          justify-content:center;
}
.eds-loading-dots__dot{
  display:inline-block;
  content:"";
  height:3px;
  width:3px;
  background-color:var(--components-loader-loader-standard-text);
  -webkit-border-radius:50%;
     -moz-border-radius:50%;
          border-radius:50%;
  margin-right:2px;
  -webkit-transform:scale(1);
     -moz-transform:scale(1);
       -o-transform:scale(1);
          transform:scale(1);
}
.eds-contrast .eds-loading-dots__dot{
  background-color:var(--components-loader-loader-contrast-text);
}
.eds-loading-dots__dot--blue{
  background-color:var(--components-loader-loader-standard-text);
}
.eds-loading-dots__dot--white{
  background-color:var(--components-loader-loader-contrast-text);
}
.eds-loading-dots__dot--one{
  -webkit-animation:dot 1s infinite;
     -moz-animation:dot 1s infinite;
       -o-animation:dot 1s infinite;
          animation:dot 1s infinite;
  -webkit-animation-delay:0s;
     -moz-animation-delay:0s;
       -o-animation-delay:0s;
          animation-delay:0s;
  -webkit-animation-timing-function:ease-in-out;
     -moz-animation-timing-function:ease-in-out;
       -o-animation-timing-function:ease-in-out;
          animation-timing-function:ease-in-out;
}
.eds-loading-dots__dot--two{
  -webkit-animation:dot 1s infinite;
     -moz-animation:dot 1s infinite;
       -o-animation:dot 1s infinite;
          animation:dot 1s infinite;
  -webkit-animation-delay:0.1s;
     -moz-animation-delay:0.1s;
       -o-animation-delay:0.1s;
          animation-delay:0.1s;
  -webkit-animation-timing-function:ease-in-out;
     -moz-animation-timing-function:ease-in-out;
       -o-animation-timing-function:ease-in-out;
          animation-timing-function:ease-in-out;
}
.eds-loading-dots__dot--three{
  -webkit-animation:dot 1s infinite;
     -moz-animation:dot 1s infinite;
       -o-animation:dot 1s infinite;
          animation:dot 1s infinite;
  -webkit-animation-delay:0.2s;
     -moz-animation-delay:0.2s;
       -o-animation-delay:0.2s;
          animation-delay:0.2s;
  -webkit-animation-timing-function:ease-out;
     -moz-animation-timing-function:ease-out;
       -o-animation-timing-function:ease-out;
          animation-timing-function:ease-out;
}

@-webkit-keyframes dot{
  0%{
    -webkit-transform:translateY(0);
            transform:translateY(0);
  }
  15%{
    -webkit-transform:translateY(-2px);
            transform:translateY(-2px);
  }
  30%{
    -webkit-transform:translateY(0);
            transform:translateY(0);
  }
  60%{
    -webkit-transform:scale(1.3) translateY(0.5px);
            transform:scale(1.3) translateY(0.5px);
  }
  100%{
    -webkit-transform:scale(1) translateY(0);
            transform:scale(1) translateY(0);
  }
}

@-moz-keyframes dot{
  0%{
    -moz-transform:translateY(0);
         transform:translateY(0);
  }
  15%{
    -moz-transform:translateY(-2px);
         transform:translateY(-2px);
  }
  30%{
    -moz-transform:translateY(0);
         transform:translateY(0);
  }
  60%{
    -moz-transform:scale(1.3) translateY(0.5px);
         transform:scale(1.3) translateY(0.5px);
  }
  100%{
    -moz-transform:scale(1) translateY(0);
         transform:scale(1) translateY(0);
  }
}

@-o-keyframes dot{
  0%{
    -o-transform:translateY(0);
       transform:translateY(0);
  }
  15%{
    -o-transform:translateY(-2px);
       transform:translateY(-2px);
  }
  30%{
    -o-transform:translateY(0);
       transform:translateY(0);
  }
  60%{
    -o-transform:scale(1.3) translateY(0.5px);
       transform:scale(1.3) translateY(0.5px);
  }
  100%{
    -o-transform:scale(1) translateY(0);
       transform:scale(1) translateY(0);
  }
}

@keyframes dot{
  0%{
    -webkit-transform:translateY(0);
       -moz-transform:translateY(0);
         -o-transform:translateY(0);
            transform:translateY(0);
  }
  15%{
    -webkit-transform:translateY(-2px);
       -moz-transform:translateY(-2px);
         -o-transform:translateY(-2px);
            transform:translateY(-2px);
  }
  30%{
    -webkit-transform:translateY(0);
       -moz-transform:translateY(0);
         -o-transform:translateY(0);
            transform:translateY(0);
  }
  60%{
    -webkit-transform:scale(1.3) translateY(0.5px);
       -moz-transform:scale(1.3) translateY(0.5px);
         -o-transform:scale(1.3) translateY(0.5px);
            transform:scale(1.3) translateY(0.5px);
  }
  100%{
    -webkit-transform:scale(1) translateY(0);
       -moz-transform:scale(1) translateY(0);
         -o-transform:scale(1) translateY(0);
            transform:scale(1) translateY(0);
  }
}.eds-spinner{
  width:16px;
  aspect-ratio:1;
  -webkit-border-radius:50%;
     -moz-border-radius:50%;
          border-radius:50%;
  border:2px solid var(--components-loader-spinner-standard-fill);
  -webkit-animation:l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
     -moz-animation:l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
       -o-animation:l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
          animation:l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
.eds-contrast .eds-spinner{
  border-color:var(--components-loader-spinner-contrast-fill);
}
@-webkit-keyframes l20-1{
  0%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5%{
    -webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75%{
    -webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100%{
    -webkit-clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@-moz-keyframes l20-1{
  0%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5%{
    clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75%{
    clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100%{
    clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@-o-keyframes l20-1{
  0%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50%{
    clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5%{
    clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75%{
    clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100%{
    clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@keyframes l20-1{
  0%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  }
  12.5%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
  }
  25%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
  }
  50%{
    -webkit-clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  62.5%{
    -webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
  }
  75%{
    -webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
  }
  100%{
    -webkit-clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
            clip-path:polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
  }
}
@-webkit-keyframes l20-2{
  0%{
    -webkit-transform:scaleY(1) rotate(0deg);
            transform:scaleY(1) rotate(0deg);
  }
  49.99%{
    -webkit-transform:scaleY(1) rotate(135deg);
            transform:scaleY(1) rotate(135deg);
  }
  50%{
    -webkit-transform:scaleY(-1) rotate(0deg);
            transform:scaleY(-1) rotate(0deg);
  }
  100%{
    -webkit-transform:scaleY(-1) rotate(-135deg);
            transform:scaleY(-1) rotate(-135deg);
  }
}
@-moz-keyframes l20-2{
  0%{
    -moz-transform:scaleY(1) rotate(0deg);
         transform:scaleY(1) rotate(0deg);
  }
  49.99%{
    -moz-transform:scaleY(1) rotate(135deg);
         transform:scaleY(1) rotate(135deg);
  }
  50%{
    -moz-transform:scaleY(-1) rotate(0deg);
         transform:scaleY(-1) rotate(0deg);
  }
  100%{
    -moz-transform:scaleY(-1) rotate(-135deg);
         transform:scaleY(-1) rotate(-135deg);
  }
}
@-o-keyframes l20-2{
  0%{
    -o-transform:scaleY(1) rotate(0deg);
       transform:scaleY(1) rotate(0deg);
  }
  49.99%{
    -o-transform:scaleY(1) rotate(135deg);
       transform:scaleY(1) rotate(135deg);
  }
  50%{
    -o-transform:scaleY(-1) rotate(0deg);
       transform:scaleY(-1) rotate(0deg);
  }
  100%{
    -o-transform:scaleY(-1) rotate(-135deg);
       transform:scaleY(-1) rotate(-135deg);
  }
}
@keyframes l20-2{
  0%{
    -webkit-transform:scaleY(1) rotate(0deg);
       -moz-transform:scaleY(1) rotate(0deg);
         -o-transform:scaleY(1) rotate(0deg);
            transform:scaleY(1) rotate(0deg);
  }
  49.99%{
    -webkit-transform:scaleY(1) rotate(135deg);
       -moz-transform:scaleY(1) rotate(135deg);
         -o-transform:scaleY(1) rotate(135deg);
            transform:scaleY(1) rotate(135deg);
  }
  50%{
    -webkit-transform:scaleY(-1) rotate(0deg);
       -moz-transform:scaleY(-1) rotate(0deg);
         -o-transform:scaleY(-1) rotate(0deg);
            transform:scaleY(-1) rotate(0deg);
  }
  100%{
    -webkit-transform:scaleY(-1) rotate(-135deg);
       -moz-transform:scaleY(-1) rotate(-135deg);
         -o-transform:scaleY(-1) rotate(-135deg);
            transform:scaleY(-1) rotate(-135deg);
  }
}