/*------------------
  LAYOUT
------------------*/

body {
  overflow: scroll;
  line-height: 1.5;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  color: #232323;
  background: #ac7a36;
  background: rgba(172, 41, 32, 0.05);
}

header {
  margin-bottom: -1.5em !important;
  color: #fefefe;
  /* border-bottom: 17px solid rgb(37, 2, 0); */
  background: #333;
  background: linear-gradient(90deg,#89216b,#480602);
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
}

header a {
  display: block;
  padding: 0.5em 0 1em 0.5em;
  text-decoration: none;
  font-weight: 200;
}

header a,
header small {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

header svg {
  display: inline-block;
  vertical-align: sub;
}

.wrapper {
  margin: auto;
  padding: 0 1.5em 0.5em;
}

.wrapper:not(header) {
  padding: 1.5em;
  max-width: 75em;
}

body,
.article {
  margin: auto;
  line-height: 1.8125rem;
  font-size: 1rem;
}

/*------------------
  TYPOGRAPHY
------------------*/

h1,
.h1 {
  margin-top: 1.8125rem;
  margin-bottom: 3.625rem;
  line-height: 5.4375rem;
  font-size: 5.1875rem;
}

h2,
.h2 {
  margin-top: 1.8125rem;
  margin-bottom: 1.8125rem;
  line-height: 3.625rem;
  font-size: 3rem;
  ;
}

h2:not(:first-of-type):before {
  content: '';
  display: block;
  margin: 3rem 0 2.5rem;
  width: 100%;
  height: 1px;
  background: #555;
}

h2,h3 {
  font-family: Optiker, sans-serif;
}

h2+p,
h3+p {
  margin-top: -2.5rem;
  margin-bottom: 1em;
  line-height: 1.2;
  font-size: 0.85em;
}

h3+p {
  margin-top: -1.8125rem;
}

h2 small,
h3 small {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}

header h1,
h3,
.h3 {
  margin-top: 1.8125rem;
  margin-bottom: 1.8125rem;
  line-height: 1.8125rem;
  font-size: 1.75rem;
}

h4,
.h4 {
  margin-top: 1.8125rem;
  margin-bottom: 0;
  line-height: 1.8125rem;
  font-size: 1rem;
}

header h1,
header p {
  display: flex;
  align-items: baseline;
  margin: 0;
}

header a {
  color: currentColor;
}

p,
ul,
ol,
pre,
table,
blockquote {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

small {
  font-size: 55%;
}

a {
  color: currentColor;
}

.center {
  margin: auto;
  text-align: center;
}

/*------------------
  LIST
------------------*/

.list-actions {
  width: 100%;
  max-width: 100%;
}

.list-actions h3 {
  margin-top: 1.5em;
  margin-bottom: -1em;
}

.list-actions ol,
.list-actions ul {
  margin: 2rem 0;
  padding: 0;
}

.list-actions-grid ol,
.list-actions-grid ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  grid-gap: 0 1em;
}

.list-actions ol li,
.list-actions ul li {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  margin-top: -1px;
  margin-bottom: 0;
  padding: 1em;
  list-style: none;
  counter-increment: index;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: #fefefe;
}

.list-actions ol li {
  display: flex;
  align-items: center;
  padding-left: 3.5em;
  line-height: 1.3;
  word-break: break-all;
}

.list-actions ol li>*,
.list-actions ul li>* {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  margin: -1rem -1rem -1rem 0rem;
  padding: 1em 2em 1em 1em;
}

.list-actions ol li>*:first-child,
.list-actions ul li>*:first-child {
  position: relative;
  overflow: scroll;
  flex-grow: 999;
  white-space: nowrap;
}

.list-actions ol li>*:last-child,
.list-actions ul li>*:last-child {
  padding-right: 1em;
}

.list-actions-title ol li,
.list-actions-title ul li {
  margin-top: 6em;
}

.list-actions ol li h4,
.list-actions ul li h4 {
  position: absolute;
  top: -1.5em;
  left: 0;
  padding: 0.2em 0.8em;
  width: 100%;
  font-size: 1.2em;
  color: #fefefe;
  background: #333;
}

.list-actions ol li b,
.list-actions ul li b {
  justify-content: center;
  min-width: 6rem;
  max-width: 15rem;
  text-align: right;
  color: #fefefe;
  background: #333;
}

.list-actions ul .pointseco {
  min-width: 3rem !important;
  max-width: 4rem !important;
}

.list-actions-table ul {
  position: relative;
  margin-top: 1.8rem;
}

.list-actions-table ul::after {
  position: absolute;
  content: 'Points';
  top: calc(-1.7rem - 1px);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: calc(5rem - 1px) !important;
  max-width: 4rem !important;
  height: 1.7em;
  text-align: center;
  color: #fefefe;
  border: 1px solid #555;
  border-bottom: none;
  background: #22961e;
}

.list-actions-title ul li::before {
  position: absolute;
  content: attr(data-title);
  top: -3.9rem;
  left: -1px;
  padding: 0.6em;
  width: calc(100% - 1.2em);
  font-size: 1.25em;
  color: #fefefe;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: #333;
}

.list-actions ol li::before {
  position: absolute;
  content: counters(index, '.', decimal);
  top: 50%;
  left: 0.5em;
  align-self: flex-start;
  padding-right: 12px;
  min-width: 1.5em;
  font-size: 1.5em;
  font-weight: bold;
  transform: translateY(-50%);
  text-align: center;
  color: currentColor;
  font-family: IBMPlexMono, optiker, sans-serif;

  font-variant-numeric: tabular-nums;
}

.list-stats {
  display: flex;
  flex-direction: column-reverse;
}

.list-rank {
  margin: 2em auto;
  padding: 1em 3em 2em;
  max-width: 30rem;
  background: #fff;
}

.list-rank ul {
  display: flex;
  flex-direction: column-reverse;
  margin: auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid #ccc;
}

.list-rank li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25em 0.25em;
  list-style: none;
  border-bottom: 1px solid #ccc;
}

.list-rank a {
  margin-right: 0.2em;
  text-transform: capitalize;
}

.list-rank span {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}
.list-rank b {
  padding: 0.45em 0.4em 0.25em;
  font-family: IBMPlexMono, optiker, sans-serif;
  font-size: 1.3rem;
  color: #fefefe;
  background: #333;
  min-width: 2.5em;
  text-align: center;
}

.grid:not(:nth-last-child(-n+3)) ul li {
  padding: 0.3em 0 0.3em 1em;
  max-width: 95%;
  list-style: none;
  border-left: 3px solid #333;
  background: rgba(0, 0, 0, 0.1);
}

.progressive-web-app {
  order: 1;
}

.performance {
  order: 2;
}

.best-practices {
  order: 3;
}

.accessibility {
  order: 4;
}

.list-actions ul li.progressive-web-app~.progressive-web-app,
.list-actions ul li.performance~.performance,
.list-actions ul li.best-practices~.best-practices,
.list-actions ul li.accessibility~.accessibility,
.list-actions ul li.seo~.seo,
.list-actions ul li.pwa~.pwa {
  margin-top: -1px;
}

.list-actions ul li.progressive-web-app~.progressive-web-app::before,
.list-actions ul li.performance~.performance::before,
.list-actions ul li.best-practices~.best-practices::before,
.list-actions ul li.accessibility~.accessibility::before,
.list-actions ul li.seo~.seo::before,
.list-actions ul li.pwa~.pwa::before {
  display: none;
}

.table {
  display: flex;
  overflow-x: auto;
  flex-direction: column-reverse;
}

/*------------------
  BLOCKS
------------------*/

.block_action {
  margin: 1.5em -1.5rem;
  padding: 0.5em 1.5em;
  color: #fefefe;
  background: #333;
}

/*------------------
  GRID
------------------*/

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}

.grid:not(:nth-last-child(-n+3)) {
  display: none !important;
}

.grid>* {
  flex: 1 1 auto;
}

.grid-score {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  box-sizing: border-box;
  margin: 2em 0 1em;

  grid-auto-flow: row dense;
}

.grid-score b {
  display: flex;
  justify-content: center;
  padding: 1em;
  text-align: center;
  border: 1px solid;
  font-family: IBMPlexMono, optiker, sans-serif;
}

.grid-score span {
  position: absolute;
  z-index: 10;
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  padding: 0.1em 0.3em;
  font-size: 0.85em;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}

.grid-score div:hover span {
  visibility: visible;
}

/*------------------
  FLEX
------------------*/

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem 1.5rem;
}

.flex>* {
  flex: 1;
  margin: 0 1rem;
  max-width: calc(100% - 2rem);
}

@media screen and (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(100px, 150px));
  }

  .flex>* {
    max-width: calc(50% - 2rem);
  }
}

/* flex-list color */
.flex-list-color {
  clear: both;
  overflow: hidden;
  margin: 0 0 1.5em;
  padding: 2.5rem 0 1rem;
}

.flex-list-color br {
  clear: both;
  width: 100%;
}

.flex-list-color>* {
  position: relative;
  float: left;
  height: 2rem;
}

.flex-list-color span {
  position: absolute;
  z-index: 10;
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  padding: 0.1em 0.3em;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}

.flex-list-color div:hover span {
  visibility: visible;
}

/* flex-list */
.flex-list {
  padding: 0;
}

.flex-list>li,
.flex-list>div {
  display: flex;
  clear: both;
  margin: 0 0 0.3em;
  /* justify-content: space-between; */
  width: 100%;
}

.flex-list>li a .flex-list>div a {
  display: block;
  overflow: hidden;
  max-width: 50%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex-list>li>*,
.flex-list>div>* {
  flex: 1;
}

.flex-list>li>*:first-child,
.flex-list>div>*:first-child {
  padding: 0 1.5em 0 0;
}

/*------------------
  BOX
------------------*/

.box {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: start;
  margin: 0 3px 5px;
  padding: 0.5rem 0.5rem 1rem;
  min-width: 3rem;
  line-height: 1;
  min-height: 3rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  text-shadow: 1px 1px #000;
}

.box i {
  flex: 0 1 1.1rem;
  font-size: 1.2rem;
}

.box span {
  display: flex;
  align-items: center;
  flex: 0 1 1.7rem;
  padding-bottom: 0.5rem;
  line-height: 1;
  min-height: 1rem;
  text-transform: capitalize;
  word-break: break-all;

  font-variant-numeric: tabular-nums;
}

/*------------------
  META
------------------*/

.score-difference {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - 8px);
}

.score-up {
  /* background: rgba(255, 75, 75, 0.05); */
  box-shadow: inset 0 0 25px rgba(255, 75, 75, 0.15);
}

.score-down {
  /* background: rgba(125, 255, 100, 0.05); */
  box-shadow: inset 0 0 25px rgba(125, 255, 100, 0.15);
}

.score {
  color: #004c6d;
  background: #fff;
  /*letter-spacing: -4px;*/
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.2);
  text-shadow: none;
}

.date {
  color: #fff;
  background: #d3465c;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
  text-shadow: none;
}

.title {
  font-weight: bold;
  letter-spacing: -1px;
}

.number {
  line-height: 1.5;
  font-size: 1.35rem;
  font-weight: bold;
  font-family: IBMPlexMono, optiker, sans-serif;
}

.date p {
  display: flex;
  align-items: center;
  flex: 1;
  margin: 0 auto;
}

.ct-chart {
  position: relative;
  margin: 0 0 1.5rem;
  border: 1px solid #555;
  background: #fff;
}

.frappe-chart.chart {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
}

/*------------------
  META COLOR
------------------*/

.pointseco {
  color: #fefefe;
  background: #22961e !important;
  box-shadow: inset 0 -1px 8px rgba(0, 0, 0, 0.2);

}

.top path {
  stroke: #22961e;
}

.verygood path {
  stroke: #30d42a;
}

.good path {
  stroke: #346888;
}

.bad path {
  stroke: #d68100;
}

.verybad path {
  stroke: #b00202;
}

/*------------------
  SEO
------------------*/

.screamingfrog li span {
  float: right;
  align-self: start;
  flex: 0 1 auto;
  padding: 0 0.4em;
  color: #fff;
  background: #333;

  font-variant-numeric: tabular-nums;
}

.seocli ul li:first-child {
  display: none;
}

/*------------------
  AXE
------------------*/

.axe {
  margin: 0;
  padding-left: 1em;
}

.axe>div {
  display: flex;
  width: 100%;
}

.axe>div strong {
  flex: 1;
}

.axe ul:not(:last-child):after {
  content: '--';
  display: inline;
  margin: 0 0.5rem;
  font-weight: bold;
  color: firebrick;
}

.axe ul {
  padding: 0;
  list-style: none;
}

/*------------------
  TABS
------------------*/

.invisible {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
}

.tabs-tabs__list {
  margin: 0;
  padding: 0;
}

.tabs-tabs__item {
  display: inline-block;
}

.tabs-tabs__link {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.4em 0.5em 0.3em;
  cursor: pointer;
  text-transform: uppercase;
  color: #fefefe;
  border-radius: 3px 3px 0 0;
  background: rgba(0, 0, 0, 0.65);
}

[aria-selected='true'].tabs-tabs__link {
  padding-top: 0.6em;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
}

.tabs-tabs__content {
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.js-tabcontent h3 {
  margin: 0.5em 0 1em;
  text-transform: capitalize;
}

[aria-hidden='true'].tabs-tabs__content {
  display: none;
}

/*------------------
  ACCORDEON
------------------*/

.js-to_expand[aria-hidden=true],
.js-to_expand[data-hidden=true] {
  display: none;
}

.js-expandmore {
  margin: 0;
}

.js-expandmore-button {
  font: inherit;
  cursor: pointer;
  color: inherit;
  border: none;
  background: none;
}

/* optional */
.animated-expandmore__symbol:before {
  content: '+';
  margin-right: 0.5em;
  padding: 0 0.2em;
  line-height: 0;
  font-family: IBMPlexMono, optiker, sans-serif;
  color: #fefefe;
  background: #333;
}

.is-opened .animated-expandmore__symbol:before {
  content: '-';
}

.js-expandmore-button[aria-expanded=true]>.expandmore__symbol:before,
.js-expandmore-button[data-expanded=true]>.expandmore__symbol:before {
  content: '− ';
}

/* This is the opened state */
.animated-expandmore__to_expand {
  display: block;
  /* magic number for max-height = enough height */
  visibility: visible;
  overflow: hidden;
  max-height: 280em;
  transition: visibility 0s ease, max-height 1.2s ease, opacity 1s ease;
  transition-delay: 0s;
  opacity: 1;
}

/* This is the hidden state */
[data-hidden=true].animated-expandmore__to_expand {
  display: block;
  visibility: hidden;
  max-height: 0;
  transition-delay: 1.5s, 0s, 0s;
  opacity: 0;
}

.progress {
  display: grid;
  align-items: stretch;
  margin: 0;
  padding: 1rem 1.5rem;
  background: #fff;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .progress {
    grid-template-columns: 20% 1fr;
  }
}

.progress+.progress {
  padding-top: 0;
}

.progress ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 90%;
  margin: auto;
  padding: 0;
}

.progress li {
  min-width: 8rem;
  list-style: none;
}

.progress>* {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1em 0;
  max-width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.12);

}

.progress>*:not(:first-child) {
  min-height: 7em;
}

.progress>div:first-child {
  display: flex;
  align-items: center;
  flex: 0 1 20%;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #2a0301;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.35);
}

.progress h4 {
  margin: 0;
  font-family: Optiker, sans-serif;
  font-size: 1.5rem;
  word-break: break-all;
}

/*-------------------------
  NUMBER PROGRESS
-------------------------*/

.progress.progress-number li {
  text-align: center;
  font-weight: bold;
  font-family: Optiker;
  line-height: 1;
}

.progress.progress-number li b {
  font-size: 2rem;
}

@media screen and (min-width: 1024px) {
  .progress.progress-number li b {
    font-size: 4rem;
  }
}

/*-------------------------
  CIRCULAR PROGRESS BAR
-------------------------*/

.progress-circular {
  font-size: 0.60em;
}

.progress-circular ul {
  display: flex;
  grid-template-columns: repeat(6, minmax(9em, 11rem));
  grid-gap: 0.2em 1.5em;
  justify-content: start;
  margin: 0 auto;
  padding: 1.5em 1.5em 0;
  width: 100%;
  min-height: 7em;
}

.progress-circular ul>li {
  position: relative;
  display: inline-block;
  flex: 1;
  height: 100%;
  font-weight: 100;
  text-align: center;
  margin-bottom: 4.5em;
}

.progress-circular ul>li:before {
  position: absolute;
  content: attr(data-name);
  bottom: -2em;
  width: 100%;
  line-height: 1;
  font-family: IBMPlexMono, optiker, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

.progress-circular ul>li:after {
  position: absolute;
  z-index: 2;
  content: attr(data-percent);
  top: 3px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.3rem;
  font-family: IBMPlexMono, optiker, sans-serif;
  font-size: 2.3em;
  text-align: center;
}

.progress-circular svg {
  width: 100%;
  height: 10em;
}

.progress-circular svg:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}

.progress-circular svg:nth-child(2) path {
  animation: load 1s;

  fill: none;
  stroke-width: 20;
  stroke-dasharray: 629;
  stroke: rgba(255, 255, 255, 0.9);
}

@keyframes load {
  0% {
    stroke-dashoffset: 0;
  }
}

/*-------------------------
  PROGRESS BAR
-------------------------*/

.progress-bar-element {
  position: relative;
  margin: 2rem auto;
  width: 75%;
  height: 1em;
  border: 1px solid #333;
  background: rgb(34, 150, 30);
  background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(48, 212, 42, 1) 20%, rgba(214, 129, 0, 1) 70%, rgba(176, 2, 2, 1) 100%);
}

.progress-bar-element::before {
  position: absolute;
  content: '';
  top: -1px;
  left: -10%;
  width: 100%;
  width: 120%;
  height: 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  /* background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(34, 150, 30, 1)  50%, rgba(176, 2, 2, 1) 51%, rgba(176, 2, 2, 1) 100%); */
}

.progress-bar-score,
.progress-bar-tooltip {
  position: absolute;
  padding: 0 1em;
  min-width: 1em;
  line-height: 1.3;
  transform: translate(-50%, -50%);
  font-size: 1.1em;
  text-align: center;
}

.progress-bar-score {
  font-family: IBMPlexMono, optiker, sans-serif;
}

/* .progress-bar-score:first-child,
.progress-bar-score:last-child {
  top: 45%;
  right: calc(100% + 2em);
  height: 2em;
  text-align: left;
}

.progress-bar-score:last-child {
  left: calc(100% + 2em);
} */

.progress-bar-tooltip {
  bottom: 100%;
  font-size: 0.65em;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  background: #555;
}

.progress-bar-score,
.progress-bar-tooltip {
  animation: slide 1s;
}

.progress-bar-score {
  top: 130%;
  min-width: 26px;
  transform: translate(-50%, 35%);

  font-variant-numeric: tabular-nums;
}

.progress-bar-score::before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 5px;
  transform: translateX(-50%);
  border-left: 2px solid currentColor;
}

.progress-bar-score::after {
  position: absolute;
  content: '';
  bottom: 121%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-right: 5px solid transparent;
  border-bottom: 6px solid currentColor;
  border-left: 5px solid transparent;
}

.progress-bar-tooltip::before {
  position: absolute;
  z-index: 10;
  content: '';
  top: calc(100% + 5px);
  left: 50%;
  width: 0;
  height: 28px;
  transform: translateX(-50%);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar-tooltip::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-top: 6px solid rgba(0, 0, 0, 0.85);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

@keyframes slide {
  0% {
    left: 100%;
  }
}