/*——————

FTON

——————*/

@font-face {

font-family: Optiker;
font-weight: 300;

src: url('../../assets/fonts/Optiker-K.woff2');
font-display: swap;

}

@font-face {

font-family: IBMPlexMono;
font-weight: 300;

src: url('../../assets/fonts/IBMPlexMono-Medium.woff2');
unicode-range: U+0030-0039;

}

/*——————

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;
font-weight: 200;
text-decoration: none;

}

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;

}

.wrapper h1 {

text-align: center;

}

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;

}

h3 {

font-family: Optiker, sans-serif;

}

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 {

margin: 0;

}

@media screen and (min-width: 768px) {

header h1, header p {
  display: flex;
  align-items: baseline;
}
header a {
  padding: 0.5em 0 1em 0.5em;
}

}

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;

}

/*——————

BLOCK

——————*/

.presentation {

margin: 1.5em auto 2em;
padding: 1em 1em 0.1em;
max-width: 30em;
line-height: 1.2;
font-size: 1.5em;
text-align: center;
color: #fefefe;
background: #111;
border-radius: 10px;

}

/*——————

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-family: IBMPlexMono, optiker, sans-serif;
font-size: 1.5em;
font-weight: bold;
transform: translateY(-50%);
text-align: center;
color: currentColor;

font-variant-numeric: tabular-nums;

}

.list-stats {

display: flex;
flex-direction: column-reverse;

}

.list-stats-title {

padding-top: 1em;
white-space: nowrap;

}

@media screen and (min-width: 768px) {

.list-stats-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

}

.list-stats-title > *, .list-stats-title div > * {

display: flex;
align-items: center;
margin: 0;
flex: 1;

}

.list-stats-title .anchor {

max-width: 2em;

}

.list-stats-title > h2 {

flex: 5;

}

/** List Home */ .list-home {

text-align: center;

}

.list-home ul {

display: flex;
flex-direction: column;
margin: auto;
max-width: 40rem;
list-style: none;

}

.list-home li {

display: flex;
align-items: center;
margin-bottom: 1em;
padding: 1em;
line-height: 1;
text-align: left;
border-radius: 5px;
background: #fff;

}

.list-home a {

font-size: 1.5em;
text-decoration: none;

}

.list-home span {

display: flex;
flex: 1;
justify-content: flex-end;

} .list-home b {

padding: 0.45em 0.4em 0.25em;
min-width: 2.5em;
font-family: IBMPlexMono, optiker, sans-serif;
font-size: 1.3rem;
text-align: center;
color: #fefefe;
background: #333;

}

/** List Rank */ .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;

}

.list-rank span {

display: flex;
flex: 1;
justify-content: flex-end;

} .list-rank b {

padding: 0.45em 0.4em 0.25em;
min-width: 2.5em;
font-family: IBMPlexMono, optiker, sans-serif;
font-size: 1.3rem;
text-align: center;
color: #fefefe;
background: #333;

}

.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;
overflow: hidden;
flex-wrap: wrap;
margin: 0;
max-width: 100%;

}

.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;
font-family: IBMPlexMono, optiker, sans-serif;
text-align: center;
border: 1px solid;

}

.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-family: IBMPlexMono, optiker, sans-serif;
font-size: 1.35rem;
font-weight: bold;

}

.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, .js-to_expand {

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 > .expandmore__symbol:before, .js-expandmore-button > .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;
overflow: hidden;
align-items: stretch;
margin: 0;
padding: 1rem 1.5rem;
background: #fff;

}

@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;
margin: auto;
padding: 0;
width: 90%;

}

.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 {

line-height: 1;
font-family: Optiker;
font-weight: bold;
text-align: center;

}

.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;
margin-bottom: 4.5em;
height: 100%;
font-weight: 100;
text-align: center;

}

.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;
font-size: 1.1em;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;

}

.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%;
}

}