/* Bubble sort: six bars sort themselves live, the pair being swapped lighting up lime, then shuffle and start again. */
.loader_box .loader89 {
    position: relative;
    width: 154px;
    height: 110px;
}

.loader_box .loader89-base {
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 0;
    height: 6px;
    border-radius: 2px;
    background: #41AD49;
}

.loader_box .loader89-bar {
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 18px;
    border-radius: 6px 6px 0px 0px;
    animation-duration: 7.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.loader_box .loader89-bar-4 { height: 52px; background: #41AD49; animation-name: loader89-bar-4; }
.loader_box .loader89-bar-1 { height: 13px; background: #A5CE3A; animation-name: loader89-bar-1; }
.loader_box .loader89-bar-5 { height: 65px; background: #036C91; animation-name: loader89-bar-5; }
.loader_box .loader89-bar-2 { height: 26px; background: #036C91; animation-name: loader89-bar-2; }
.loader_box .loader89-bar-6 { height: 78px; background: #A5CE3A; animation-name: loader89-bar-6; }
.loader_box .loader89-bar-3 { height: 39px; background: #49ABCB; animation-name: loader89-bar-3; }

@keyframes loader89-bar-4 {
    0%, 6.38% { transform: translateX(0px); background: #41AD49; opacity: 1; }
    11.06% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    18.09% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
    22.77% { transform: translateX(27px); background: #41AD49; opacity: 1; }
    29.79% { transform: translateX(27px); background: #41AD49; opacity: 1; }
    34.47% { transform: translateX(27px); background: #41AD49; opacity: 1; }
    41.49% { transform: translateX(27px); background: #41AD49; opacity: 1; }
    46.17% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
    53.19% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    57.87% { transform: translateX(54px); background: #41AD49; opacity: 1; }
    64.89% { transform: translateX(54px); background: #41AD49; opacity: 1; }
    69.57% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    76.60% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    78.72%, 91.49% { transform: translateX(81px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(81px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(0px); background: #41AD49; opacity: 0; }
    100% { transform: translateX(0px); background: #41AD49; opacity: 1; }
}

@keyframes loader89-bar-1 {
    0%, 6.38% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
    11.06% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
    18.09% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    22.77% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    29.79% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    34.47% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    41.49% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    46.17% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    53.19% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    57.87% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    64.89% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    69.57% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    76.60% { transform: translateX(0px); background: #A5CE3A; opacity: 1; }
    78.72%, 91.49% { transform: translateX(0px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(0px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(27px); background: #A5CE3A; opacity: 0; }
    100% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
}

@keyframes loader89-bar-5 {
    0%, 6.38% { transform: translateX(54px); background: #036C91; opacity: 1; }
    11.06% { transform: translateX(54px); background: #036C91; opacity: 1; }
    18.09% { transform: translateX(54px); background: #036C91; opacity: 1; }
    22.77% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    29.79% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    34.47% { transform: translateX(81px); background: #036C91; opacity: 1; }
    41.49% { transform: translateX(81px); background: #036C91; opacity: 1; }
    46.17% { transform: translateX(81px); background: #036C91; opacity: 1; }
    53.19% { transform: translateX(81px); background: #036C91; opacity: 1; }
    57.87% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    64.89% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    69.57% { transform: translateX(108px); background: #036C91; opacity: 1; }
    76.60% { transform: translateX(108px); background: #036C91; opacity: 1; }
    78.72%, 91.49% { transform: translateX(108px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(108px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(54px); background: #036C91; opacity: 0; }
    100% { transform: translateX(54px); background: #036C91; opacity: 1; }
}

@keyframes loader89-bar-2 {
    0%, 6.38% { transform: translateX(81px); background: #036C91; opacity: 1; }
    11.06% { transform: translateX(81px); background: #036C91; opacity: 1; }
    18.09% { transform: translateX(81px); background: #036C91; opacity: 1; }
    22.77% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    29.79% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    34.47% { transform: translateX(54px); background: #036C91; opacity: 1; }
    41.49% { transform: translateX(54px); background: #036C91; opacity: 1; }
    46.17% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    53.19% { transform: translateX(27px); background: #A5CE3A; opacity: 1; }
    57.87% { transform: translateX(27px); background: #036C91; opacity: 1; }
    64.89% { transform: translateX(27px); background: #036C91; opacity: 1; }
    69.57% { transform: translateX(27px); background: #036C91; opacity: 1; }
    76.60% { transform: translateX(27px); background: #036C91; opacity: 1; }
    78.72%, 91.49% { transform: translateX(27px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(27px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(81px); background: #036C91; opacity: 0; }
    100% { transform: translateX(81px); background: #036C91; opacity: 1; }
}

@keyframes loader89-bar-6 {
    0%, 6.38% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    11.06% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    18.09% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    22.77% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    29.79% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    34.47% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    41.49% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    46.17% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    53.19% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    57.87% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    64.89% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    69.57% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    76.60% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    78.72%, 91.49% { transform: translateX(135px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(135px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(108px); background: #A5CE3A; opacity: 0; }
    100% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
}

@keyframes loader89-bar-3 {
    0%, 6.38% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
    11.06% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
    18.09% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
    22.77% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
    29.79% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
    34.47% { transform: translateX(135px); background: #A5CE3A; opacity: 1; }
    41.49% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    46.17% { transform: translateX(108px); background: #49ABCB; opacity: 1; }
    53.19% { transform: translateX(108px); background: #49ABCB; opacity: 1; }
    57.87% { transform: translateX(108px); background: #A5CE3A; opacity: 1; }
    64.89% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    69.57% { transform: translateX(81px); background: #A5CE3A; opacity: 1; }
    76.60% { transform: translateX(54px); background: #A5CE3A; opacity: 1; }
    78.72%, 91.49% { transform: translateX(54px); background: #41AD49; opacity: 1; }
    95.74% { transform: translateX(54px); background: #41AD49; opacity: 0; }
    95.76% { transform: translateX(135px); background: #49ABCB; opacity: 0; }
    100% { transform: translateX(135px); background: #49ABCB; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader89-bar { animation: none; }
    .loader_box .loader89-bar-4 { transform: translateX(81px); }
    .loader_box .loader89-bar-1 { transform: translateX(0px); }
    .loader_box .loader89-bar-5 { transform: translateX(108px); }
    .loader_box .loader89-bar-2 { transform: translateX(27px); }
    .loader_box .loader89-bar-6 { transform: translateX(135px); }
    .loader_box .loader89-bar-3 { transform: translateX(54px); }
}
