/**
 * @package ista Internet Relaunch
 *
 * Frontend Refactor
 * @author Matthias Becker <matthias.becker@twt.de>
 *
 * Content:
 *  mediaQuery
 *  box-sizing
 *  background-gradient
 *  background-size
 *  border-radius
 *  box-shadow
 *  transform
 *  transform-style
 *  transition
 *  perspective
 *  perspective-origin
 *  keyframe
 *  animation
 *  flex-flow
 *  flexbox
 *  flex
 *  order
 *
 */
.clearfix:after {
  display: block;
  clear: both;
  content: ''; }

/**
 * @package ista Internet Relaunch
 *
 * Frontend Refactor
 * @author Matthias Becker <matthias.becker@twt.de>
 *
 */
.content .grid-75 .redesign-facts,
.content .grid-100 .redesign-facts,
.redesign-facts {
  background-color: #fff;
  margin-bottom: 50px;
  position: relative;
  z-index: 5; }
  .content .grid-75 .redesign-facts__list,
  .content .grid-100 .redesign-facts__list,
  .redesign-facts__list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    position: relative; }
  .content .grid-75 .redesign-facts__item,
  .content .grid-100 .redesign-facts__item,
  .redesign-facts__item {
    background: none;
    margin: 0 0 25px 0;
    padding: 0 0 0 25px;
    opacity: 0;
    position: relative; }
    .content .grid-75 .redesign-facts__item::before,
    .content .grid-100 .redesign-facts__item::before,
    .redesign-facts__item::before {
      background-color: #84b400;
      width: 12px;
      height: 12px;
      display: block;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      z-index: 5;
      border-radius: 50%;
      transform: translateY(-50%); }
    .content .grid-75 .redesign-facts__item::after,
    .content .grid-100 .redesign-facts__item::after,
    .redesign-facts__item::after {
      display: block;
      opacity: 0;
      content: '';
      position: absolute;
      top: 50%;
      bottom: calc(-100% + 12px);
      left: 3px;
      border-left: 5px dotted #84b400; }
    .content .grid-75 .redesign-facts__item:last-child::after,
    .content .grid-100 .redesign-facts__item:last-child::after,
    .redesign-facts__item:last-child::after {
      opacity: 0;
      pointer-events: none;
      animation: none; }
    .content .grid-75 .redesign-facts__item--number,
    .content .grid-100 .redesign-facts__item--number,
    .redesign-facts__item--number {
      color: #0a2864; }
    .content .grid-75 .redesign-facts__item--unit,
    .content .grid-100 .redesign-facts__item--unit,
    .redesign-facts__item--unit {
      color: #84b400; }
    .content .grid-75 .redesign-facts__item--active,
    .content .grid-100 .redesign-facts__item--active,
    .redesign-facts__item--active {
      animation: itemFadeIn .25s .5s linear;
      animation-fill-mode: both; }
      .content .grid-75 .redesign-facts__item--active::after,
      .content .grid-100 .redesign-facts__item--active::after,
      .redesign-facts__item--active::after {
        animation: slideLinesBottomMobile 1s linear;
        animation-fill-mode: both; }
    @media only screen and (min-width: 1024px) {
      .content .grid-75 .redesign-facts__item,
      .content .grid-100 .redesign-facts__item,
      .redesign-facts__item {
        margin-bottom: 0;
        padding-left: 0;
        display: flex; }
        .content .grid-75 .redesign-facts__item::before,
        .content .grid-100 .redesign-facts__item::before,
        .redesign-facts__item::before {
          display: none; }
        .content .grid-75 .redesign-facts__item:nth-child(odd)::after, .content .grid-75 .redesign-facts__item:nth-child(even)::after,
        .content .grid-100 .redesign-facts__item:nth-child(odd)::after,
        .content .grid-100 .redesign-facts__item:nth-child(even)::after,
        .redesign-facts__item:nth-child(odd)::after,
        .redesign-facts__item:nth-child(even)::after {
          top: 50%;
          bottom: auto;
          border: 0;
          border-top: 5px dotted #84b400;
          transform: translateY(-50%); }
        .content .grid-75 .redesign-facts__item:nth-child(odd),
        .content .grid-100 .redesign-facts__item:nth-child(odd),
        .redesign-facts__item:nth-child(odd) {
          justify-content: flex-end; }
          .content .grid-75 .redesign-facts__item:nth-child(odd)::after,
          .content .grid-100 .redesign-facts__item:nth-child(odd)::after,
          .redesign-facts__item:nth-child(odd)::after {
            right: 0;
            left: calc(50% + 5px); }
          .content .grid-75 .redesign-facts__item:nth-child(odd) .redesign-facts__item-container,
          .content .grid-100 .redesign-facts__item:nth-child(odd) .redesign-facts__item-container,
          .redesign-facts__item:nth-child(odd) .redesign-facts__item-container {
            padding-left: 25px; }
            .content .grid-75 .redesign-facts__item:nth-child(odd) .redesign-facts__item-container::before,
            .content .grid-100 .redesign-facts__item:nth-child(odd) .redesign-facts__item-container::before,
            .redesign-facts__item:nth-child(odd) .redesign-facts__item-container::before {
              left: 0; }
        .content .grid-75 .redesign-facts__item:nth-child(even),
        .content .grid-100 .redesign-facts__item:nth-child(even),
        .redesign-facts__item:nth-child(even) {
          justify-content: flex-start; }
          .content .grid-75 .redesign-facts__item:nth-child(even)::after,
          .content .grid-100 .redesign-facts__item:nth-child(even)::after,
          .redesign-facts__item:nth-child(even)::after {
            right: calc(50% + 5px);
            left: 0; }
          .content .grid-75 .redesign-facts__item:nth-child(even) .redesign-facts__item-container,
          .content .grid-100 .redesign-facts__item:nth-child(even) .redesign-facts__item-container,
          .redesign-facts__item:nth-child(even) .redesign-facts__item-container {
            padding-right: 25px; }
            .content .grid-75 .redesign-facts__item:nth-child(even) .redesign-facts__item-container::before,
            .content .grid-100 .redesign-facts__item:nth-child(even) .redesign-facts__item-container::before,
            .redesign-facts__item:nth-child(even) .redesign-facts__item-container::before {
              right: 0; }
        .content .grid-75 .redesign-facts__item:last-child::after,
        .content .grid-100 .redesign-facts__item:last-child::after,
        .redesign-facts__item:last-child::after {
          pointer-events: all; }
        .content .grid-75 .redesign-facts__item:nth-child(1),
        .content .grid-100 .redesign-facts__item:nth-child(1),
        .redesign-facts__item:nth-child(1) {
          flex-basis: 100%;
          display: flex;
          justify-content: center;
          position: static; }
          .content .grid-75 .redesign-facts__item:nth-child(1)::after,
          .content .grid-100 .redesign-facts__item:nth-child(1)::after,
          .redesign-facts__item:nth-child(1)::after {
            top: 100px;
            right: auto;
            bottom: 45px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 5px dotted #84b400; }
          .content .grid-75 .redesign-facts__item:nth-child(1) .redesign-facts__item-container,
          .content .grid-100 .redesign-facts__item:nth-child(1) .redesign-facts__item-container,
          .redesign-facts__item:nth-child(1) .redesign-facts__item-container {
            padding: 0 0 15px 0; }
            .content .grid-75 .redesign-facts__item:nth-child(1) .redesign-facts__item-container::before,
            .content .grid-100 .redesign-facts__item:nth-child(1) .redesign-facts__item-container::before,
            .redesign-facts__item:nth-child(1) .redesign-facts__item-container::before {
              top: 100%;
              left: 50%;
              transform: translateX(-50%) translateY(0); }
          .content .grid-75 .redesign-facts__item:nth-child(1) .redesign-facts__value,
          .content .grid-100 .redesign-facts__item:nth-child(1) .redesign-facts__value,
          .redesign-facts__item:nth-child(1) .redesign-facts__value {
            font-size: 100px; }
          .content .grid-75 .redesign-facts__item:nth-child(1) .redesign-facts__icon,
          .content .grid-100 .redesign-facts__item:nth-child(1) .redesign-facts__icon,
          .redesign-facts__item:nth-child(1) .redesign-facts__icon {
            width: 76px;
            height: 76px; }
          .content .grid-75 .redesign-facts__item:nth-child(1):last-child .redesign-facts__item-container::before,
          .content .grid-100 .redesign-facts__item:nth-child(1):last-child .redesign-facts__item-container::before,
          .redesign-facts__item:nth-child(1):last-child .redesign-facts__item-container::before {
            display: none; }
        .content .grid-75 .redesign-facts__item:nth-child(4),
        .content .grid-100 .redesign-facts__item:nth-child(4),
        .redesign-facts__item:nth-child(4) {
          flex-basis: 100%;
          display: flex;
          justify-content: center; }
          .content .grid-75 .redesign-facts__item:nth-child(4)::after,
          .content .grid-100 .redesign-facts__item:nth-child(4)::after,
          .redesign-facts__item:nth-child(4)::after {
            display: none; }
          .content .grid-75 .redesign-facts__item:nth-child(4) .redesign-facts__item-container,
          .content .grid-100 .redesign-facts__item:nth-child(4) .redesign-facts__item-container,
          .redesign-facts__item:nth-child(4) .redesign-facts__item-container {
            padding: 25px 0; }
            .content .grid-75 .redesign-facts__item:nth-child(4) .redesign-facts__item-container::before,
            .content .grid-100 .redesign-facts__item:nth-child(4) .redesign-facts__item-container::before,
            .redesign-facts__item:nth-child(4) .redesign-facts__item-container::before {
              top: 0;
              right: auto;
              left: 50%;
              transform: translateX(-50%); }
            .content .grid-75 .redesign-facts__item:nth-child(4) .redesign-facts__item-container::after,
            .content .grid-100 .redesign-facts__item:nth-child(4) .redesign-facts__item-container::after,
            .redesign-facts__item:nth-child(4) .redesign-facts__item-container::after {
              background-color: #84b400;
              width: 12px;
              height: 12px;
              display: block;
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              border-radius: 50%;
              transform: translateX(-50%); }
          .content .grid-75 .redesign-facts__item:nth-child(4):last-child .redesign-facts__item-container::after,
          .content .grid-100 .redesign-facts__item:nth-child(4):last-child .redesign-facts__item-container::after,
          .redesign-facts__item:nth-child(4):last-child .redesign-facts__item-container::after {
            display: none; }
        .content .grid-75 .redesign-facts__item--active,
        .content .grid-100 .redesign-facts__item--active,
        .redesign-facts__item--active {
          /*
        How to calculate animation durations

        Delay between every item: 1250 ms
        Formular: (delay * amount) / 1000 - tweak

        Example with 2 items: (1250 * 2 / 1000) - 0,3
        */ }
          .content .grid-75 .redesign-facts__item--active:nth-child(even)::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(even)::after,
          .redesign-facts__item--active:nth-child(even)::after {
            animation: slideLinesLeft 2s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(odd)::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(odd)::after,
          .redesign-facts__item--active:nth-child(odd)::after {
            animation: slideLinesRight 2s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='2']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='2']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='2']::after {
            animation: slideLinesBottom 2.2s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='3']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='3']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='3']::after {
            animation: slideLinesBottom 3.45s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='4']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='4']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='4']::after {
            animation: slideLinesBottom 4.7s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='5']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='5']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='5']::after {
            animation: slideLinesBottom 5.95s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='6']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='6']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='6']::after {
            animation: slideLinesBottom 7.2s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='7']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='7']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='7']::after {
            animation: slideLinesBottom 8.45s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='8']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='8']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='8']::after {
            animation: slideLinesBottom 9.7s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='9']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='9']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='9']::after {
            animation: slideLinesBottom 10.95s linear;
            animation-fill-mode: both; }
          .content .grid-75 .redesign-facts__item--active:nth-child(1)[data-amount='10']::after,
          .content .grid-100 .redesign-facts__item--active:nth-child(1)[data-amount='10']::after,
          .redesign-facts__item--active:nth-child(1)[data-amount='10']::after {
            animation: slideLinesBottom 12.2s linear;
            animation-fill-mode: both; } }
  .content .grid-75 .redesign-facts__item-container,
  .content .grid-100 .redesign-facts__item-container,
  .redesign-facts__item-container {
    background: #fff;
    position: relative;
    z-index: 5; }
    @media only screen and (min-width: 1024px) {
      .content .grid-75 .redesign-facts__item-container::before,
      .content .grid-100 .redesign-facts__item-container::before,
      .redesign-facts__item-container::before {
        background-color: #84b400;
        width: 12px;
        height: 12px;
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        border-radius: 50%;
        transform: translateY(-50%); } }
  .content .grid-75 .redesign-facts__value,
  .content .grid-100 .redesign-facts__value,
  .redesign-facts__value {
    font-size: 52px;
    line-height: 1; }
    @media only screen and (min-width: 1024px) {
      .content .grid-75 .redesign-facts__value,
      .content .grid-100 .redesign-facts__value,
      .redesign-facts__value {
        font-size: 70px;
        text-align: right; } }
  .content .grid-75 .redesign-facts__icon,
  .content .grid-100 .redesign-facts__icon,
  .redesign-facts__icon {
    background: no-repeat center;
    background-size: contain;
    width: 38px;
    height: 38px;
    display: inline-block; }
    @media only screen and (min-width: 1024px) {
      .content .grid-75 .redesign-facts__icon,
      .content .grid-100 .redesign-facts__icon,
      .redesign-facts__icon {
        width: 52px;
        height: 52px; } }

@keyframes itemFadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slideLinesBottomMobile {
  0% {
    opacity: 1;
    bottom: 50%; }
  100% {
    opacity: 1;
    bottom: calc(-100% + 12px); } }

@keyframes slideLinesLeft {
  0% {
    opacity: 1;
    right: calc(50% + 5px);
    left: 100%; }
  100% {
    opacity: 1;
    right: calc(50% + 5px);
    left: 0; } }

@keyframes slideLinesRight {
  0% {
    opacity: 1;
    right: 100%;
    left: calc(50% + 5px); }
  100% {
    opacity: 1;
    right: 0;
    left: calc(50% + 5px); } }

@keyframes slideLinesBottom {
  0% {
    opacity: 1;
    right: auto;
    left: 50%;
    bottom: calc(100% - 100px); }
  100% {
    opacity: 1;
    right: auto;
    left: 50%;
    bottom: 45px; } }