/****
 * Abacus CSS animate
 * Designed By rxdelta (rxdelta@gmail.com, @rxdelta in twitter, ...)
 * Author: Mostafa Nazari
 * Created Date: 2019-07-12
 */
.wait-screen {
    background: rgba(255, 255, 255, 0.8);
    position:fixed;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index:1000;
}
.wait-row-space {
    height:50%;
}
.wait-content {
    margin-top: -80px;
    margin-right: auto;
    margin-left: auto;
    display: table;
}
.wait-caption {
    color:#000;text-align:center;
}

.abacus {
    width: 100px;
    height: 80px;
    display: inline-block;
    position: relative;
    margin:auto;
}    
.abacus table {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 3px solid #995C12;
    border-spacing: 0px;
    border-collapse: inherit;
}
.abacus table td {
    border: none;
    border-left: 1px solid #666;
}
.abacus-item {
    position: absolute;
    width:15%;
    height:10%;
    border-radius: 15px / 10px;
    background-color: #CAA472;
}

.C1 { left: 8%; }
.C2 { left: 25%; }
.C3 { left: 42%; }
.C4 { left: 59%; }
.C5 { left: 76%; }

.R1 { bottom:  3%; }
.R2 { bottom: 13%; }
.R3 { bottom: 23%; }
.R4 { bottom: 33%; }
.R5 { bottom: 43%; }
.R6 { bottom: 53%; }
.R7 { bottom: 63%; }
.R8 { bottom: 73%; }

.R4,.R5 {
    background-color: #222;
}

.R8.C1,.R7.C1,.R6.C1,.R5.C1  {
    animation:abucate-59 1s infinite ease-in;
}
.R4.C1,.R3.C1,.R2.C1,.R1.C1  {
    animation:abucate-79 1s infinite ease-in;
}

.R8.C3,.R7.C3,.R6.C3  {
    animation:abucate-29 1s infinite ease-in;
}
.R5.C3,.R4.C3  {
    animation:abucate-48 1s infinite ease-in;
}
.R3.C3,.R2.C3,.R1.C3  {
    animation:abucate-67 1s infinite ease-in;
}

.C4 {
    animation:abucate-58 1s infinite ease-in;
}

.R8.C5 { animation:abucate-19 1s infinite ease-in; }
.R7.C5 { animation:abucate-29 1s infinite ease-in; }
.R6.C5 { animation:abucate-39 1s infinite ease-in; }
.R5.C5 { animation:abucate-49 1s infinite ease-in; }
.R4.C5 { animation:abucate-59 1s infinite ease-in; }
.R3.C5 { animation:abucate-69 1s infinite ease-in; }
.R2.C5 { animation:abucate-79 1s infinite ease-in; }
.R1.C5 { animation:abucate-89 1s infinite ease-in; }

.R8.C2 { animation:abucate-19 1s infinite ease-in; }
.R7.C2 { animation:abucate-18 1s infinite ease-in; }
.R6.C2 { animation:abucate-17 1s infinite ease-in; }
.R5.C2 { animation:abucate-16 1s infinite ease-in; }
.R4.C2 { animation:abucate-15 1s infinite ease-in; }
.R3.C2 { animation:abucate-14 1s infinite ease-in; }
.R2.C2 { animation:abucate-13 1s infinite ease-in; }
.R1.C2 { animation:abucate-12 1s infinite ease-in; }

@keyframes abucate-19 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-29 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 0px;}
	20% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-39 {
	0% {margin-bottom: 0px;}
	20% {margin-bottom: 0px;}
	30% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-49 {
	0% {margin-bottom: 0px;}
	30% {margin-bottom: 0px;}
	40% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-59 {
	0% {margin-bottom: 0px;}
	40% {margin-bottom: 0px;}
	50% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-69 {
	0% {margin-bottom: 0px;}
	50% {margin-bottom: 0px;}
	60% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-79 {
	0% {margin-bottom: 0px;}
	60% {margin-bottom: 0px;}
	70% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-89 {
	0% {margin-bottom: 0px;}
	70% {margin-bottom: 0px;}
	80% {margin-bottom: 10px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-99 {
	0% {margin-bottom: 0px;}
	80% {margin-bottom: 0px;}
	90% {margin-bottom: 10px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-11 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	20% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-12 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	20% {margin-bottom: 10px;}
	30% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-13 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	30% {margin-bottom: 10px;}
	40% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-14 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	40% {margin-bottom: 10px;}
	50% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-15 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	50% {margin-bottom: 10px;}
	60% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-16 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	60% {margin-bottom: 10px;}
	70% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-17 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	70% {margin-bottom: 10px;}
	80% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-18 {
	0% {margin-bottom: 0px;}
	10% {margin-bottom: 10px;}
	80% {margin-bottom: 10px;}
	90% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}


@keyframes abucate-48 {
	0% {margin-bottom: 0px;}
	30% {margin-bottom: 0px;}
	40% {margin-bottom: 10px;}
	80% {margin-bottom: 10px;}
	90% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-67 {
	0% {margin-bottom: 0px;}
	50% {margin-bottom: 0px;}
	60% {margin-bottom: 10px;}
	70% {margin-bottom: 10px;}
	80% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}

@keyframes abucate-58 {
	0% {margin-bottom: 0px;}
	40% {margin-bottom: 0px;}
	50% {margin-bottom: 10px;}
	80% {margin-bottom: 10px;}
	90% {margin-bottom: 0px;}
	100% {margin-bottom: 0px;}
}