.ribbon-corner-content-holder > * {
  margin: 0;
  padding: 0;
}
.ribbon-corner {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 14px;
}
.ribbon-corner-content {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: row;
  transform-origin: 66% 0;
  transform: translate(-43%, 0) rotate(-45deg) translate(0, 6%);
  white-space: nowrap;
}
.ribbon-corner-content-holder {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  flex-basis: 100%;
  align-self: center;
}
.ribbon-corner-branding-default .ribbon-corner-content {
  color: #ffffff;
  background: #ed0000;
}
.ribbon-corner-branding-default .ribbon-corner-content-holder:nth-child(1),
.ribbon-corner-branding-default .ribbon-corner-content-holder:nth-child(3) {
  color: transparent;
}
.ribbon-corner-inverted .ribbon-corner-content {
  color: #ffffff;
  background: #001932;
}
.ribbon-corner-inverted .ribbon-corner-content-holder:nth-child(1),
.ribbon-corner-inverted .ribbon-corner-content-holder:nth-child(3) {
  color: transparent;
}
.ribbon-corner .ribbon-corner-content,
.ribbon-corner-size-300 .ribbon-corner-content,
.ribbon-corner-size-default .ribbon-corner-content {
  height: auto;
  padding: 0.21428571em 0;
}
.ribbon-corner .ribbon-corner-content-holder,
.ribbon-corner-size-300 .ribbon-corner-content-holder,
.ribbon-corner-size-default .ribbon-corner-content-holder {
  font-size: 0.8em;
  line-height: 1;
}
.ribbon-corner .ribbon-corner-content-holder p,
.ribbon-corner-size-300 .ribbon-corner-content-holder p,
.ribbon-corner-size-default .ribbon-corner-content-holder p,
.ribbon-corner .ribbon-corner-content-holder h2,
.ribbon-corner-size-300 .ribbon-corner-content-holder h2,
.ribbon-corner-size-default .ribbon-corner-content-holder h2,
.ribbon-corner .ribbon-corner-content-holder h3,
.ribbon-corner-size-300 .ribbon-corner-content-holder h3,
.ribbon-corner-size-default .ribbon-corner-content-holder h3,
.ribbon-corner .ribbon-corner-content-holder h4,
.ribbon-corner-size-300 .ribbon-corner-content-holder h4,
.ribbon-corner-size-default .ribbon-corner-content-holder h4,
.ribbon-corner .ribbon-corner-content-holder h5,
.ribbon-corner-size-300 .ribbon-corner-content-holder h5,
.ribbon-corner-size-default .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-100 .ribbon-corner-content,
.ribbon-corner-size-small .ribbon-corner-content {
  height: auto;
  padding: 0.21428571em 0;
}
.ribbon-corner-size-100 .ribbon-corner-content-holder,
.ribbon-corner-size-small .ribbon-corner-content-holder {
  font-size: 0.6em;
  line-height: 1;
}
.ribbon-corner-size-100 .ribbon-corner-content-holder p,
.ribbon-corner-size-small .ribbon-corner-content-holder p,
.ribbon-corner-size-100 .ribbon-corner-content-holder h2,
.ribbon-corner-size-small .ribbon-corner-content-holder h2,
.ribbon-corner-size-100 .ribbon-corner-content-holder h3,
.ribbon-corner-size-small .ribbon-corner-content-holder h3,
.ribbon-corner-size-100 .ribbon-corner-content-holder h4,
.ribbon-corner-size-small .ribbon-corner-content-holder h4,
.ribbon-corner-size-100 .ribbon-corner-content-holder h5,
.ribbon-corner-size-small .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-500 .ribbon-corner-content,
.ribbon-corner-size-big .ribbon-corner-content {
  height: auto;
  padding: 0.428571em 0;
}
.ribbon-corner-size-500 .ribbon-corner-content-holder,
.ribbon-corner-size-big .ribbon-corner-content-holder {
  font-size: 1em;
  line-height: 1;
}
.ribbon-corner-size-500 .ribbon-corner-content-holder p,
.ribbon-corner-size-big .ribbon-corner-content-holder p,
.ribbon-corner-size-500 .ribbon-corner-content-holder h2,
.ribbon-corner-size-big .ribbon-corner-content-holder h2,
.ribbon-corner-size-500 .ribbon-corner-content-holder h3,
.ribbon-corner-size-big .ribbon-corner-content-holder h3,
.ribbon-corner-size-500 .ribbon-corner-content-holder h4,
.ribbon-corner-size-big .ribbon-corner-content-holder h4,
.ribbon-corner-size-500 .ribbon-corner-content-holder h5,
.ribbon-corner-size-big .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-700 .ribbon-corner-content {
  height: auto;
  padding: 0.64em 0;
}
.ribbon-corner-size-700 .ribbon-corner-content-holder {
  font-size: 1.49em;
  line-height: 1;
}
.ribbon-corner-size-700 .ribbon-corner-content-holder p,
.ribbon-corner-size-700 .ribbon-corner-content-holder h2,
.ribbon-corner-size-700 .ribbon-corner-content-holder h3,
.ribbon-corner-size-700 .ribbon-corner-content-holder h4,
.ribbon-corner-size-700 .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-700 .ribbon-corner-content-holder > *:first-child:not(:only-child) {
  font-weight: 300;
  font-size: 16px;
  padding-bottom: 3px;
}
.ribbon-corner-size-900 .ribbon-corner-content {
  height: auto;
  padding: 0.86em 0;
}
.ribbon-corner-size-900 .ribbon-corner-content-holder {
  font-size: 1.72em;
  line-height: 1;
}
.ribbon-corner-size-900 .ribbon-corner-content-holder p,
.ribbon-corner-size-900 .ribbon-corner-content-holder h2,
.ribbon-corner-size-900 .ribbon-corner-content-holder h3,
.ribbon-corner-size-900 .ribbon-corner-content-holder h4,
.ribbon-corner-size-900 .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-900 .ribbon-corner-content-holder > *:first-child:not(:only-child) {
  font-weight: 300;
  font-size: 17px;
  padding-bottom: 3px;
}
.ribbon-corner-size-1100 .ribbon-corner-content {
  height: auto;
  padding: 0.86em 0;
}
.ribbon-corner-size-1100 .ribbon-corner-content-holder {
  font-size: 1.96em;
  line-height: 1;
}
.ribbon-corner-size-1100 .ribbon-corner-content-holder p,
.ribbon-corner-size-1100 .ribbon-corner-content-holder h2,
.ribbon-corner-size-1100 .ribbon-corner-content-holder h3,
.ribbon-corner-size-1100 .ribbon-corner-content-holder h4,
.ribbon-corner-size-1100 .ribbon-corner-content-holder h5 {
  font-size: unset;
  font-weight: unset;
  line-height: unset;
}
.ribbon-corner-size-1100 .ribbon-corner-content-holder > *:first-child:not(:only-child) {
  font-weight: 300;
  font-size: 18px;
  padding-bottom: 3px;
}

.ribbon-banner-branding-default {
  --color: #ed0000;
  --text-color: #ffffff;
  --corner-color: #ba0000;
}
.ribbon-banner-size-default,
.ribbon-banner-size-100 {
  --height: 16px;
  --offset-top: 12px;
  --font-size: 9px;
  --corner: 3.2px;
  --padding: 10px;
}
.ribbon-banner-size-150 {
  --height: 22px;
  --offset-top: 12px;
  --font-size: 12px;
  --corner: 4.8px;
  --padding: 6px;
}
.ribbon-banner-size-200 {
  --height: 26px;
  --offset-top: 12px;
  --font-size: 16px;
  --corner: 5px;
  --padding: 15px;
}
.ribbon-banner-size-300 {
  --height: 30px;
  --offset-top: 12px;
  --font-size: 20px;
  --corner: 6px;
  --padding: 18px;
}
.ribbon-banner-size-400 {
  --height: 40px;
  --offset-top: 12px;
  --font-size: 24px;
  --corner: 8px;
  --padding: 24px;
}
.ribbon-banner-size-responsive {
  --height: 22px;
  --offset-top: 12px;
  --font-size: 12px;
  --corner: 4.8px;
  --padding: 6px;
}
@media only screen and (min-width: 480px) {
  .ribbon-banner-size-responsive {
    --height: 26px;
    --offset-top: 12px;
    --font-size: 16px;
    --corner: 5px;
    --padding: 15px;
  }
}
@media only screen and (min-width: 1024px) {
  .ribbon-banner-size-responsive {
    --height: 30px;
    --offset-top: 12px;
    --font-size: 20px;
    --corner: 6px;
    --padding: 18px;
  }
}
@media only screen and (min-width: 1357px) {
  .ribbon-banner-size-responsive {
    --height: 40px;
    --offset-top: 12px;
    --font-size: 24px;
    --corner: 8px;
    --padding: 24px;
  }
}
.ribbon-banner {
  position: absolute;
  height: var(--height, 16px);
  line-height: var(--height, 16px);
  background: var(--color, #ed0000);
  top: var(--offset-top, 12px);
  color: var(--text-color, #ffffff);
  font-size: var(--font-size, 9px);
  font-weight: 500;
}
.ribbon-banner:before,
.ribbon-banner:after {
  content: "";
  position: absolute;
}
.ribbon-banner:after {
  height: 0;
  width: 0;
}
.ribbon-banner-direction-default:after,
.ribbon-banner-direction-left:after,
.ribbon-banner-direction-right:after {
  bottom: calc(var(--corner, -3.2px) * 0.5 * -1);
}
.ribbon-banner-direction-default,
.ribbon-banner-direction-left {
  left: calc(var(--corner, -3.2px) * -1);
  padding-left: calc(var(--padding, 10px) + var(--corner, -3.2px));
  padding-right: var(--padding, 10px);
}
.ribbon-banner-direction-default:after,
.ribbon-banner-direction-left:after {
  left: 0;
  border-top: calc(var(--corner, 3.2px) * 0.6) solid var(--corner-color, #ba0000);
  border-left: var(--corner, 3.2px) solid transparent;
  border-right: transparent;
}
.ribbon-banner-direction-default:before,
.ribbon-banner-direction-left:before {
  right: calc(var(--height, 16px) / 4 * -1);
  border-top: calc(var(--height, 16px) / 2) solid var(--color, #ed0000);
  border-bottom: calc(var(--height, 16px) / 2) solid var(--color, #ed0000);
  display: inline-block;
  border-right: calc(var(--height, 16px) / 3.5) solid transparent;
}
.ribbon-banner-direction-right {
  right: calc(var(--corner, -3.2px) * -1);
  padding-left: var(--padding, 10px);
  padding-right: calc(var(--padding, 10px) * 1.2);
}
.ribbon-banner-direction-right:after {
  right: 0;
  border-top: calc(var(--corner, 3.2px) * 0.625) solid var(--corner-color, #ba0000);
  border-right: var(--corner, 3.2px) solid transparent;
}
.ribbon-banner-direction-right:before {
  border-top: calc(var(--height, 16px) / 2) solid var(--color, #ed0000);
  border-bottom: calc(var(--height, 16px) / 2) solid var(--color, #ed0000);
  border-left: calc(var(--height, 16px) / 4) solid transparent;
  left: calc(var(--height, 16px) / 4.3 * -1);
  border-right: transparent;
}