/* INTRO ANIMATION MOBILE TALLY HOW TO*/

.mobile-how-toogle {display: block; border: 1px solid rgba(255, 255,255, 0); border-bottom: 1px solid #e0e0e0; padding: 30px 5px; margin: 35px 35px 5px 35px;}
.mobile-how-toogle:hover {border: 1px solid #e0e0e0;}
.mobile-how-toogle a {display: inline-block; float: right; margin: -52px -5px 0px 0px;}

@media screen and (max-width: 1023px) {
.mobile-how-toogle {display: none;}
}

.mobile-how-wrap {max-width: 999px; margin: 0px auto; display: block; height: 400px; overflow: hidden;}

.mobile-how-intro {width: 100%; position: relative; height: 100%;}



.animpole {
top: 120px; z-index: 10;
animation: poleslide 3s ease-in-out 0s forwards;
-webkit-animation: poleslide 3s ease-in-out 0s forwards;
}
@-webkit-keyframes poleslide
{
0% {opacity: 0; left: 20%;}
20% {opacity: 1; left: 20%;}
40% {opacity: 1; left: 20%;}
60% {opacity: 1; left: 20%;
-webkit-transform: scale(1.0, 1.0); transform: (1.0, 1.0);}
100% {opacity: 1; left: 0%; -webkit-transform: scale(0.6, 0.6); transform: (0.6, 0.6);}
}
@keyframes poleslide
{
0% {opacity: 0; left: 20%;}
20% {opacity: 1; left: 20%;}
40% {opacity: 1; left: 20%;}
60% {opacity: 1; left: 20%;
-webkit-transform: scale(1.0, 1.0); transform: (1.0, 1.0);}
100% {opacity: 1; left: 0%; -webkit-transform: scale(0.6, 0.6); transform: (0.6, 0.6);}
}



.animtimber {
top: 120px;
animation: timberslide 3s ease-in-out 0s forwards;
-webkit-animation: timberslide 3s ease-in-out 0s forwards;
}
@-webkit-keyframes timberslide
{
0% {opacity: 0; right: 20%;}
15% {opacity: 0; right: 20%;}
40% {opacity: 1; right: 20%;}
50% {opacity: 1; right: 20%; -webkit-transform: scale(1.0, 1.0); transform: (1.0, 1.0);}
100% {opacity: 0; right: 70%; -webkit-transform: scale(0.7, 0.7); transform: (0.7, 0.7);}
}
@keyframes timberslide
{
0% {opacity: 0; right: 20%;}
15% {opacity: 0; right: 20%;}
40% {opacity: 1; right: 20%;}
50% {opacity: 1; right: 20%;	-webkit-transform: scale(1.0, 1.0); transform: (1.0, 1.0);}
100% {opacity: 0; right: 70%;-webkit-transform: scale(0.7, 0.7); transform: (0.7, 0.7);}
}





.animphone {
top: 50px; left: 213px; opacity: 0; 
animation: phoneslide 4s ease-in-out 3.0s forwards;
-webkit-animation: phoneslide 4s ease-in-out 3.0s forwards;
}
@keyframes phoneslide
{
0% {opacity: 1;	-webkit-transform: scale(1.6, 1.6); transform: (1.0, 1.0);}
12% {opacity: 0.5; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
70% {opacity: 0.5; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
100% {opacity: 1; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
}
@-webkit-keyframes phoneslide
{
0% {opacity: 1;	-webkit-transform: scale(1.6, 1.6); transform: (1.0, 1.0);}
12% {opacity: 0.5; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
70% {opacity: 0.5; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
100% {opacity: 1; -webkit-transform: scale(0.8, 0.8); transform: (0.8, 0.8);}
}



.animcomp {
top: 140px; left: 137px; opacity: 0; 
animation: compslide 4s ease-in-out 3.5s forwards; 
-webkit-animation: compslide 4s ease-in-out 3.5s forwards;
}
@keyframes compslide
{
0% {opacity: 1;	-webkit-transform: scale(1.6, 1.6); transform: (1.1, 1.1);}
15% {opacity: 0.5; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
70% {opacity: 0.5; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
100% {opacity: 1; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
}
@-webkit-keyframes compslide
{
0% {opacity: 1;	-webkit-transform: scale(1.6, 1.6); transform: (1.1, 1.1);}
15% {opacity: 0.5; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
70% {opacity: 0.5; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
100% {opacity: 1; -webkit-transform: scale(0.45, 0.45); transform: (0.45, 0.45);}
}



.animnewtally {
top: -2px; left: 165px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #008C23;
animation: newtallyslide 1.4s ease-in-out 4.5s forwards;
-webkit-animation: newtallyslide 1.4s ease-in-out 4.5s forwards;
-webkit-transform: scale(0.9, 0.9)
}
@keyframes newtallyslide
{
0% {background: #008C23; color: #fff;}
50% {background: #008C23; color: #fff;}
100% {opacity: 1; background: none; color: #008C23}
}
@-webkit-keyframes newtallyslide
{
0% {background: #008C23; color: #fff;}
50% {background: #008C23; color: #fff;}
100% {opacity: 1; background: none; color: #008C23}
}

.animnewtally img {vertical-align: middle; max-height: 60px; margin-right: 6px;}




.animdata1, .animdata2, .animdata3, .animdata4, .animdata5, .animdata6, .animdata7, .animdata8, .animdata9 {opacity: 0; border-radius: 4px; font-size: 13px; color: #444; background: #ddd; padding: 7px; text-align: center; line-height: 18px}

.animdata1 {animation: data1slide 1.4s ease-in-out 5.5s forwards;
-webkit-animation: data1slide 1.4s ease-in-out 5.5s forwards;
}

.animdata2 {animation: data1slide 1.4s ease-in-out 6.5s forwards;
-webkit-animation: data1slide 1.4s ease-in-out 6.5s forwards;
}

.animdata3 {animation: data1slide 1.4s ease-in-out 7.5s forwards;
-webkit-animation: data1slide 1.4s ease-in-out 7.5s forwards;
}

@keyframes data1slide
{
0% {opacity: 0; top: 150px; left: 105px;}
25% {opacity: 1;}
75% {opacity: 1; top: 90px; left: 225px;}
100% {opacity: 0; top: 90px; left: 225px;}
}
@-webkit-keyframes data1slide
{
0% {opacity: 0; top: 150px; left: 105px;}
25% {opacity: 1;}
75% {opacity: 1; top: 90px; left: 225px;}
100% {opacity: 0; top: 90px; left: 225px;}
}



.animdata4 p, .animdata5 p, .animdata6 p, .animdata7 p, .animdata8 p, .animdata9 p{font-size: 13px; color: #777;}
.animdata4 b, .animdata5 b, .animdata6 b, .animdata7 b, .animdata8 b, .animdata9 b {font-size: 14px; color: #333;}

.animdata4 {animation: data2slide 1.8s ease-in-out 11s forwards;
-webkit-animation: data2slide 1.8s ease-in-out 11s forwards;
}
.animdata5 {animation: data2slide 1.8s ease-in-out 12.2s forwards;
-webkit-animation: data2slide 1.8s ease-in-out 12.2s forwards;
}
.animdata6 {animation: data2slide 1.8s ease-in-out 13.4s forwards;
-webkit-animation: data2slide 1.8s ease-in-out 13.4s forwards;
}

@keyframes data2slide
{
0% {opacity: 0; top: 90px; left: 225px;}
25% {opacity: 1;}
75% {opacity: 1; top: 155px; left: 422px;}
100% {opacity: 0; top: 155px; left: 422px;}
}
@-webkit-keyframes data2slide
{
0% {opacity: 0; top: 90px; left: 225px;}
25% {opacity: 1;}
75% {opacity: 1; top: 155px; left: 422px;}
100% {opacity: 0; top: 155px; left: 422px;}
}


.animdata7 {animation: data3slide 2.0s ease-in-out 17.1s forwards;
-webkit-animation: data3slide 2.0s ease-in-out 17.1s forwards;
}
.animdata8 {animation: data3slide 2.0s ease-in-out 19.0s forwards;
-webkit-animation: data3slide 2.0s ease-in-out 19.0s forwards;
}
.animdata9 {animation: data3slide 2.0s ease-in-out 20.9s forwards;
-webkit-animation: data3slide 2.0s ease-in-out 20.9s forwards;
}

@keyframes data3slide
{
0% {opacity: 0; top: 140px; left: 422px;}
25% {opacity: 1;}
75% {opacity: 1; top: 140px; left: 642px;}
100% {opacity: 0; top: 140px; left: 642px;}
}
@-webkit-keyframes data3slide
{
0% {opacity: 0; top: 140px; left: 422px;}
25% {opacity: 1;}
75% {opacity: 1; top: 140px; left: 642px;}
100% {opacity: 0; top: 140px; left: 642px;}
}

.animtallies {
top: 130px; left: 400px; opacity: 0; animation: tallieslide 1s ease-in-out 9.9s forwards;
-webkit-animation: tallieslide 1s ease-in-out 9.9s forwards;
}

.animtallies2 {
top: -2px; left: 400px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #444;
animation: tallieslide 1.0s ease-in-out 9.9s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 9.9s forwards;
-webkit-transform: scale(0.9, 0.9)
}

.animform {
top: 124px; left: 645px; opacity: 0; animation: tallieslide 1s ease-in-out 15.9s forwards;
-webkit-animation: tallieslide 1s ease-in-out 15.9s forwards;
}

.animform2 {
top: -2px; left: 600px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #444;
animation: tallieslide 1.0s ease-in-out 15.9s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 15.9s forwards;
-webkit-transform: scale(0.9, 0.9)
}

.animprint {
top: 122px; left: 860px; opacity: 0; animation: tallieslide 1s ease-in-out 23.5s forwards;
-webkit-animation: tallieslide 1s ease-in-out 23.5s forwards;
}

.animprint2 {
top: -2px; left: 830px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #444;
animation: tallieslide 1.0s ease-in-out 23.5s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 23.5s forwards;
-webkit-transform: scale(0.9, 0.9)
}


.animtempl2 {text-align: center; top: 290px; left: 550px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #444; max-width: 250px;
animation: tallieslide 1.0s ease-in-out 27.6s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 27.6s forwards;
-webkit-transform: scale(0.9, 0.9)
}
.animtempl2 p {display: block; margin-top: 4px;}


.animpref {text-align: center; top: 290px; left: 320px; opacity: 0; padding: 14px 18px; border-radius: 50px; font-size: 21px; color: #444; max-width: 250px;
animation: tallieslide 1.0s ease-in-out 34.6s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 34.6s forwards;
-webkit-transform: scale(0.9, 0.9)
}
.animpref p {display: block; margin-top: 4px;}


.animtrans1 {
top: -22px; left: 270px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 8.8s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 8.8s forwards;
-webkit-transform: scale(0.12, 0.12)
}

.animtrans2 {
top: -22px; left: 470px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 15.2s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 15.2s forwards;
-webkit-transform: scale(0.12, 0.12)
}

.animtrans3 {
top: 44px; left: 230px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 11.3s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 11.3s forwards;
-ms-transform: rotate(24deg) scale(0.2, 0.2);
-webkit-transform: rotate(24deg) scale(0.2, 0.2);
transform: rotate(24deg) scale(0.2, 0.2);
}

.animtrans4 {
top: 118px; left: 228px; opacity: 0;
animation: tallie2slide 1.0s ease-in-out 12.2s forwards;
-webkit-animation: tallie2slide 1.0s ease-in-out 12.2s forwards;
-ms-transform: rotate(-24deg) scale(0.2, 0.2);
-webkit-transform: rotate(-24deg) scale(0.2, 0.2);
transform: rotate(-24deg) scale(0.2, 0.2);
}

.animtrans5 {
top: 137px; left: 477px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 17.8s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 17.8s forwards;
-webkit-transform: scale(0.22, 0.22)
}

.animtrans6 {
top: -22px; left: 702px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 22.4s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 22.4s forwards;
-webkit-transform: scale(0.12, 0.12)
}

.animtrans7 {
top: 137px; left: 677px; opacity: 0;
animation: tallieslide 1.0s ease-in-out 24.8s forwards;
-webkit-animation: tallieslide 1.0s ease-in-out 24.8s forwards;
-webkit-transform: scale(0.22, 0.22)
}

.animtrans8 {
top: 225px; left: 566px; opacity: 0;
animation: tallie2slide 1.0s ease-in-out 26.5s forwards;
-webkit-animation: tallie2slide 1.0s ease-in-out 26.5s forwards;
-webkit-transform: rotate(-90deg) scale(0.18, 0.18)
}

.animtrans9 {
top: 225px; left: 346px; opacity: 0;
animation: tallie2slide 1.0s ease-in-out 33.4s forwards;
-webkit-animation: tallie2slide 1.0s ease-in-out 33.4s forwards;
-webkit-transform: rotate(-90deg) scale(0.18, 0.18)
}

@keyframes tallieslide
{
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes tallieslide
{
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes tallie2slide
{
0% {opacity: 0;}
100% {opacity: 0.13;}
}
@-webkit-keyframes tallie2slide
{
0% {opacity: 0;}
100% {opacity: 0.13;}
}

.animtallies img {height: 110px;}
.animtallies2 img, .animform2 img, .animprint2 img , .animtempl2 img , .animpref img {vertical-align: middle; margin-right: 6px;}


.animwarn1 {opacity: 0; font-size: 16px; animation: warnslide 5.0s ease-in-out 29.1s forwards; -webkit-animation: warnslide 5.0s ease-in-out 29.1s forwards;}

.animwarn2, .animwarn4 {opacity: 0; bottom: 5px; left: 0px; right: 0px; font-size: 15px; color: red; text-align: center;}
.animwarn2 {animation: warnslide 9.1s ease-in-out 41.9s forwards; -webkit-animation: warnslide 9.1s ease-in-out 41.9s forwards;}
.animwarn4 {animation: warnslide 10.0s ease-in-out 51.1s forwards; -webkit-animation: warnslide 10.0s ease-in-out 51.1s forwards;}

.animwarn2 img, .animwarn4 img {max-height: 24px; vertical-align: middle; margin-right: 6px;}

.animwarn3 {opacity: 0; font-size: 16px; animation: warnslide 5.0s ease-in-out 35.6s forwards; -webkit-animation: warnslide 5.0s ease-in-out 35.6s forwards;}


@keyframes warnslide
{
0% {opacity: 0;}
10% {opacity: 1;}
80% {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes warnslide
{
0% {opacity: 0;}
10% {opacity: 1;}
80% {opacity: 1;}
100% {opacity: 0;}
}















/* BOTTOM MESSANGER */

.new_version {background: red; color: #fff; font-size: 16px; text-align: center; border-radius: 6px; line-height: 19px; max-width: 180px;}
.new_version p {display: block; font-size: 18px;}
.new_version b {display: block; text-transform: uppercase;  font-size: 23px; line-height: 40px;}


.bottom-messenger {bottom: -200px; 
-moz-animation: slide4 1s ease 2.9s forwards;
-webkit-animation: slide4 1s ease 2.9s forwards;
-o-animation: slide4 1s ease 2.9s forwards;
-ms-animation: slide4 1s ease 2.9s forwards;
animation: slide4 1s ease 2.9s forwards;}

	
@-moz-keyframes slide4
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-webkit-keyframes slide4
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-o-keyframes slide4
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@-ms-keyframes slide4
{
from {bottom: -200px;}
to {bottom: 10px;}
}

@keyframes slide4
{
from {bottom: -200px;}
to {bottom: 10px;}
}