Timer/indexStyle.css at master · DashArtova/Timer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
body{
    width: 100%;
    padding-left: 10%;
    font-family: Helvetica;
}
#main{
    width: 960px;
    height: 1000px;
    background-image: url(img/bg.jpg);
}
#welcome{
    margin-left: 165px;
    margin-top: 70px;
    position: absolute;
    width: 667px;
    height: 279px;
    background-image: url(img/welcome.jpg);
}
#myTimers{
    position: fixed;
    z-index: 1000000;
    width: 960px;
    height: 1000px;
    background-color: #0897f9;
    opacity: 0;
}
button,
button::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}
button {
    width: 100px;
    height: 30px;
    margin-left: 850px;
    background: none;
    border: 3px solid #fff;
    border-radius: 5px;
    color: #fff;
    display: block;
    font-weight: bold;
    position: fixed;
    text-transform: uppercase;
}

button::before,
button::after {
    background: #0897f9;
    content: '';
    position: absolute;
}

button:hover {
    color: #0897f9;
}
.btn-5 {
    overflow: hidden;
}

.btn-5::after {
    opacity: 0.5;
    height: 100%;
    left: -35%;
    top: 0;
    transform: skew(50deg);
    transition-duration: 0.6s;
    transform-origin: top left;
    width: 0;
}

.btn-5:hover:after {
    height: 100%;
    width: 135%;
}
#ContinueArrow{
    position: absolute;
    margin-top: 400px;
    margin-left: 475px;
}
.left{
    width: 5px;
    height: 40px;
    background-color: #0897f9;
    transform: rotate(-45deg);
    float: left;
}
.right{
    margin-left: 19px;
    transform: rotate(45deg);
}
.thin{
    margin-top: -15px;
    width: 2px;
    margin-left: -29px;
}
.r{
    margin-left: -1px;
}
#setIcon{
    width: 48px;
    height: 48px;
    position: absolute;
    margin-top: 545px;
    margin-left: 43px;
    background-image: url(img/settingsIcon.jpg);
}
#qAdd{
    position: absolute;
    width: 220px;
    height: 40px;
    background-color: #001020;
    border: 2px solid #0897f9;
    margin-top: 545px;
    margin-left: 737px;
}
.w{
    width: 3px;
    height: 20px;
    margin-top: 10px;
}
.l{
    margin-left: 10px;
}
#qWord{
    margin-top: 10px;
    margin-left: 75px;
    width: 135px;
    height: 25px;
    background-image: url(img/quickAdd.jpg);
}
.choose{
    width: 110px;
    height: 60px;
    position: absolute;
}
#selectS{
    margin-left: 110px;
}
#imgChoose{
    position: absolute;
    z-index: 100000;
    margin-left: 48px;
    width: 153;
    height: 23px;
    background-image: url(img/chooseF.jpg);
}
#selectF:hover #imgChoose{
    background-image: url(img/chooseF.jpg)
}
#selectS:hover #imgChoose{
    background-image: url(img/chooseS.jpg)
}
#setTA{
    position: absolute;
    margin-top: 670px;
    margin-left: 43px;
}
#timer, #alarm{
    position: absolute;
    z-index: 1000;
    width: 76px;
    height: 40px;
    background-color: aqua;
    float: left;
    opacity: 0;
}
#alarm{
    margin-left: 76px;
}
#timerS{
    background-image: url(img/chooseF.jpg);
    position: absolute;
    z-index: 0;
    width: 153;
    height: 23px;
    opacity: 1;
}
#alarmS{
    background-image: url(img/chooseS.jpg);
    position: absolute;
    z-index: 0;
    width: 153;
    height: 23px;
    opacity: 0;
}
#setTimer{
    position: absolute;
    margin-top: 670px;
    margin-left: 290px;
}
.border{
    background:  linear-gradient(to right, #0892f4, #002027);
    height: 30px;
    width: 100px;
    padding: 2px;
}
#setTime{
    background-color: #002027;
    border:none;
    height: 30px;
    width: 100px;
    text-align: center;
    color: white;
}
#shakeWord{
    position: absolute;
    margin-top: 733px;
    margin-left: 43px;
    background-image: url(img/shake.jpg);
    width: 86px;
    height: 24px;
}
.previews {
    position: absolute;
    margin-top: 695px;
    margin-left: 120px;
}
.previews li {
  display: inline-block;
  width: 120px;
  padding: 35px;
}

.preview-item {
    background: linear-gradient(to right, #0892f4, #002027);
    position: relative;
    width: 120px;
    height: 35px;
    border-radius: 5px;
}
.shake {
  display: inline-block;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
}
.shake:hover {
  -webkit-animation-name: shake-base;
  -ms-animation-name: shake-base;
  -webkit-animation-name: shake-base;
  -webkit-animation-duration: 100ms;
  -ms-animation-duration: 100ms;
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.shake.shake-hard:hover {
  -webkit-animation-name: shake-hard;
  -ms-animation-name: shake-hard;
  -webkit-animation-name: shake-hard;
  -webkit-animation-duration: 100ms;
  -ms-animation-duration: 100ms;
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.shake.shake-slow:hover {
  -webkit-animation-name: shake-slow;
  -ms-animation-name: shake-slow;
  -webkit-animation-name: shake-slow;
  -webkit-animation-duration: 5s; -ms-animation-duration: 5s;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
.shake.shake-little:hover {
  -webkit-animation-name: shake-little;
  -ms-animation-name: shake-little;
  -webkit-animation-name: shake-little;
  -webkit-animation-duration: 100ms;
  -ms-animation-duration: 100ms;
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
@-webkit-keyframes shake-base { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  4% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  8% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg); }
  10% { -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  12% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  14% { -webkit-transform: translate(1.5px, 1.5px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  18% { -webkit-transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  20% { -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  22% { -webkit-transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  24% { -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg); }
  26% { -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg); }
  28% { -webkit-transform: translate(0.5px, -0.5px) rotate(-1.5deg); }
  30% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  32% { -webkit-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  34% { -webkit-transform: translate(0.5px, -0.5px) rotate(0.5deg); }
  36% { -webkit-transform: translate(0.5px, -0.5px) rotate(-0.5deg); }
  38% { -webkit-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  42% { -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg); }
  44% { -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(-2.5px, -1.5px) rotate(-0.5deg); }
  48% { -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  50% { -webkit-transform: translate(1.5px, 1.5px) rotate(-1.5deg); }
  52% { -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  54% { -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  56% { -webkit-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  58% { -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  60% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  64% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  66% { -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  68% { -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  70% { -webkit-transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  72% { -webkit-transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  74% { -webkit-transform: translate(-2.5px, 1.5px) rotate(-0.5deg); }
  76% { -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  80% { -webkit-transform: translate(-0.5px, 0.5px) rotate(0.5deg); }
  82% { -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg); }
  84% { -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(-2.5px, 1.5px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(-0.5px, -0.5px) rotate(-1.5deg); }
  92% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  94% { -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg); }
  96% { -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  98% { -webkit-transform: translate(1.5px, -2.5px) rotate(-1.5deg); } }

@-ms-keyframes shake-base { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  4% { -ms-transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  6% { -ms-transform: translate(-2.5px, 1.5px) rotate(-1.5deg); }
  8% { -ms-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  10% { -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  12% { -ms-transform: translate(-0.5px, -2.5px) rotate(-1.5deg); }
  14% { -ms-transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  16% { -ms-transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
  18% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  20% { -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  22% { -ms-transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  24% { -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg); }
  26% { -ms-transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  28% { -ms-transform: translate(0.5px, -1.5px) rotate(-0.5deg); }
  30% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  32% { -ms-transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  34% { -ms-transform: translate(-0.5px, -1.5px) rotate(-1.5deg); }
  36% { -ms-transform: translate(1.5px, -0.5px) rotate(-0.5deg); }
  38% { -ms-transform: translate(-2.5px, 0.5px) rotate(-0.5deg); }
  40% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  42% { -ms-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  44% { -ms-transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  46% { -ms-transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  48% { -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  50% { -ms-transform: translate(-0.5px, -0.5px) rotate(-0.5deg); }
  52% { -ms-transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  54% { -ms-transform: translate(-0.5px, -2.5px) rotate(0.5deg); }
  56% { -ms-transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  58% { -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  60% { -ms-transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  62% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  64% { -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg); }
  66% { -ms-transform: translate(-0.5px, 1.5px) rotate(-1.5deg); }
  68% { -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg); }
  70% { -ms-transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  72% { -ms-transform: translate(-2.5px, -0.5px) rotate(-1.5deg); }
  74% { -ms-transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  76% { -ms-transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  78% { -ms-transform: translate(-1.5px, -1.5px) rotate(-0.5deg); }
  80% { -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg); }
  82% { -ms-transform: translate(0.5px, 1.5px) rotate(-1.5deg); }
  84% { -ms-transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  86% { -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  88% { -ms-transform: translate(0.5px, -2.5px) rotate(0.5deg); }
  90% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  92% { -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg); }
  94% { -ms-transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  96% { -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg); }
  98% { -ms-transform: translate(-0.5px, -1.5px) rotate(-1.5deg); } }

@keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-2.5px, -2.5px) rotate(-1.5deg); }
  4% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  6% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  8% { transform: translate(-0.5px, 1.5px) rotate(-1.5deg); }
  10% { transform: translate(0.5px, 0.5px) rotate(0.5deg); }
  12% { transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  14% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  16% { transform: translate(-1.5px, -2.5px) rotate(0.5deg); }
  18% { transform: translate(0.5px, -2.5px) rotate(-0.5deg); }
  20% { transform: translate(-2.5px, -2.5px) rotate(0.5deg); }
  22% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); }
  24% { transform: translate(-1.5px, -2.5px) rotate(-1.5deg); }
  26% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); }
  28% { transform: translate(0.5px, 1.5px) rotate(-1.5deg); }
  30% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); }
  32% { transform: translate(-1.5px, 0.5px) rotate(0.5deg); }
  34% { transform: translate(-2.5px, 1.5px) rotate(0.5deg); }
  36% { transform: translate(-0.5px, -2.5px) rotate(-0.5deg); }
  38% { transform: translate(0.5px, 1.5px) rotate(-0.5deg); }
  40% { transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  42% { transform: translate(-0.5px, 0.5px) rotate(-0.5deg); }
  44% { transform: translate(1.5px, 1.5px) rotate(0.5deg); }
  46% { transform: translate(0.5px, -1.5px) rotate(0.5deg); }
  48% { transform: translate(-1.5px, 0.5px) rotate(-1.5deg); }
  50% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); }
  52% { transform: translate(-0.5px, 1.5px) rotate(-0.5deg); }
  54% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  56% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); }
  58% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  60% { transform: translate(1.5px, 0.5px) rotate(-0.5deg); }
  62% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); }
  64% { transform: translate(1.5px, 0.5px) rotate(-1.5deg); }
  66% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  68% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  70% { transform: translate(0.5px, -2.5px) rotate(-1.5deg); }
  72% { transform: translate(1.5px, -1.5px) rotate(0.5deg); }
  74% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  76% { transform: translate(1.5px, -1.5px) rotate(-0.5deg); }
  78% { transform: translate(1.5px, -1.5px) rotate(-1.5deg); }
  80% { transform: translate(-2.5px, -1.5px) rotate(-1.5deg); }
  82% { transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  84% { transform: translate(1.5px, -2.5px) rotate(-0.5deg); }
  86% { transform: translate(1.5px, 0.5px) rotate(0.5deg); }
  88% { transform: translate(-2.5px, 0.5px) rotate(-1.5deg); }
  90% { transform: translate(0.5px, 1.5px) rotate(0.5deg); }
  92% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); }
  94% { transform: translate(-0.5px, 0.5px) rotate(-1.5deg); }
  96% { transform: translate(1.5px, -2.5px) rotate(0.5deg); }
  98% { transform: translate(-2.5px, -0.5px) rotate(-1.5deg); } }

@-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  4% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  8% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  10% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  12% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  18% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  20% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  22% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  26% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  32% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  36% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  38% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  48% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  54% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  56% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  58% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  66% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  72% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  74% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  80% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  92% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  98% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); } }

@-ms-keyframes shake-little { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  4% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  6% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  8% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  10% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  12% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  14% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  16% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  18% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  20% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  22% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  24% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  26% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  28% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  30% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  32% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  34% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  36% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  38% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  40% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  42% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  44% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  46% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  48% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  50% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  52% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  54% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  56% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  58% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  60% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  62% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  64% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  66% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  68% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  70% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  72% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  74% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  76% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  78% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  80% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  82% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  84% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  86% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  88% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  90% { -ms-transform: translate(0px, -1px) rotate(-0.5deg); }
  92% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); }
  94% { -ms-transform: translate(-1px, -1px) rotate(-0.5deg); }
  96% { -ms-transform: translate(0px, 0px) rotate(-0.5deg); }
  98% { -ms-transform: translate(-1px, 0px) rotate(-0.5deg); } }

@keyframes shake-little { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(0px, -1px) rotate(-0.5deg); }
  4% { transform: translate(0px, 0px) rotate(-0.5deg); }
  6% { transform: translate(0px, -1px) rotate(-0.5deg); }
  8% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  10% { transform: translate(0px, -1px) rotate(-0.5deg); }
  12% { transform: translate(0px, 0px) rotate(-0.5deg); }
  14% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  16% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  18% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  20% { transform: translate(0px, -1px) rotate(-0.5deg); }
  22% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  24% { transform: translate(0px, -1px) rotate(-0.5deg); }
  26% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  28% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  30% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  32% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  34% { transform: translate(0px, 0px) rotate(-0.5deg); }
  36% { transform: translate(0px, -1px) rotate(-0.5deg); }
  38% { transform: translate(0px, -1px) rotate(-0.5deg); }
  40% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  42% { transform: translate(0px, -1px) rotate(-0.5deg); }
  44% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  46% { transform: translate(0px, -1px) rotate(-0.5deg); }
  48% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  50% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  52% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  54% { transform: translate(0px, -1px) rotate(-0.5deg); }
  56% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  58% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  60% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  62% { transform: translate(0px, 0px) rotate(-0.5deg); }
  64% { transform: translate(0px, -1px) rotate(-0.5deg); }
  66% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  68% { transform: translate(0px, 0px) rotate(-0.5deg); }
  70% { transform: translate(0px, -1px) rotate(-0.5deg); }
  72% { transform: translate(0px, -1px) rotate(-0.5deg); }
  74% { transform: translate(0px, -1px) rotate(-0.5deg); }
  76% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  78% { transform: translate(0px, -1px) rotate(-0.5deg); }
  80% { transform: translate(0px, 0px) rotate(-0.5deg); }
  82% { transform: translate(0px, -1px) rotate(-0.5deg); }
  84% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  86% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  88% { transform: translate(0px, -1px) rotate(-0.5deg); }
  90% { transform: translate(0px, -1px) rotate(-0.5deg); }
  92% { transform: translate(-1px, 0px) rotate(-0.5deg); }
  94% { transform: translate(0px, 0px) rotate(-0.5deg); }
  96% { transform: translate(-1px, -1px) rotate(-0.5deg); }
  98% { transform: translate(-1px, 0px) rotate(-0.5deg); } }

@-webkit-keyframes shake-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-8px, 9px) rotate(1.5deg); }
  4% { -webkit-transform: translate(0px, 6px) rotate(-3.5deg); }
  6% { -webkit-transform: translate(-6px, -9px) rotate(2.5deg); }
  8% { -webkit-transform: translate(-4px, -8px) rotate(0.5deg); }
  10% { -webkit-transform: translate(-7px, -9px) rotate(0.5deg); }
  12% { -webkit-transform: translate(8px, -1px) rotate(2.5deg); }
  14% { -webkit-transform: translate(-8px, 0px) rotate(-2.5deg); }
  16% { -webkit-transform: translate(1px, -8px) rotate(-2.5deg); }
  18% { -webkit-transform: translate(-2px, -8px) rotate(-2.5deg); }
  20% { -webkit-transform: translate(-2px, 7px) rotate(-2.5deg); }
  22% { -webkit-transform: translate(9px, 2px) rotate(-3.5deg); }
  24% { -webkit-transform: translate(1px, -7px) rotate(1.5deg); }
  26% { -webkit-transform: translate(-4px, 1px) rotate(-3.5deg); }
  28% { -webkit-transform: translate(9px, -6px) rotate(-1.5deg); }
  30% { -webkit-transform: translate(-3px, 6px) rotate(2.5deg); }
  32% { -webkit-transform: translate(-7px, -1px) rotate(-2.5deg); }
  34% { -webkit-transform: translate(6px, 6px) rotate(1.5deg); }
  36% { -webkit-transform: translate(-4px, -5px) rotate(2.5deg); }
  38% { -webkit-transform: translate(6px, -2px) rotate(-3.5deg); }
  40% { -webkit-transform: translate(1px, -3px) rotate(-3.5deg); }
  42% { -webkit-transform: translate(8px, -6px) rotate(1.5deg); }
  44% { -webkit-transform: translate(6px, -1px) rotate(-3.5deg); }
  46% { -webkit-transform: translate(9px, -7px) rotate(0.5deg); }
  48% { -webkit-transform: translate(-4px, -9px) rotate(-3.5deg); }
  50% { -webkit-transform: translate(2px, -6px) rotate(1.5deg); }
  52% { -webkit-transform: translate(-4px, 8px) rotate(-1.5deg); }
  54% { -webkit-transform: translate(-3px, -7px) rotate(-1.5deg); }
  56% { -webkit-transform: translate(-4px, -3px) rotate(1.5deg); }
  58% { -webkit-transform: translate(8px, -7px) rotate(-1.5deg); }
  60% { -webkit-transform: translate(-9px, 6px) rotate(-3.5deg); }
  62% { -webkit-transform: translate(4px, 7px) rotate(-3.5deg); }
  64% { -webkit-transform: translate(-7px, 1px) rotate(-1.5deg); }
  66% { -webkit-transform: translate(9px, 3px) rotate(-1.5deg); }
  68% { -webkit-transform: translate(4px, 5px) rotate(2.5deg); }
  70% { -webkit-transform: translate(9px, 8px) rotate(-3.5deg); }
  72% { -webkit-transform: translate(-5px, 0px) rotate(1.5deg); }
  74% { -webkit-transform: translate(5px, 0px) rotate(-1.5deg); }
  76% { -webkit-transform: translate(-10px, 8px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(-5px, 3px) rotate(1.5deg); }
  80% { -webkit-transform: translate(-7px, -1px) rotate(2.5deg); }
  82% { -webkit-transform: translate(-3px, -8px) rotate(-3.5deg); }
  84% { -webkit-transform: translate(-9px, 6px) rotate(0.5deg); }
  86% { -webkit-transform: translate(4px, -8px) rotate(-2.5deg); }
  88% { -webkit-transform: translate(4px, -2px) rotate(1.5deg); }
  90% { -webkit-transform: translate(-6px, -4px) rotate(-1.5deg); }
  92% { -webkit-transform: translate(-8px, -7px) rotate(-3.5deg); }
  94% { -webkit-transform: translate(-3px, 9px) rotate(-3.5deg); }
  96% { -webkit-transform: translate(9px, -1px) rotate(-3.5deg); }
  98% { -webkit-transform: translate(-5px, 7px) rotate(-1.5deg); } }

@-ms-keyframes shake-slow { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(-6px, -8px) rotate(-1.5deg); }
  4% { -ms-transform: translate(3px, 5px) rotate(-2.5deg); }
  6% { -ms-transform: translate(-5px, 0px) rotate(1.5deg); }
  8% { -ms-transform: translate(3px, 4px) rotate(1.5deg); }
  10% { -ms-transform: translate(-4px, 8px) rotate(-3.5deg); }
  12% { -ms-transform: translate(9px, -4px) rotate(-2.5deg); }
  14% { -ms-transform: translate(2px, 6px) rotate(2.5deg); }
  16% { -ms-transform: translate(7px, 5px) rotate(-0.5deg); }
  18% { -ms-transform: translate(-9px, 3px) rotate(1.5deg); }
  20% { -ms-transform: translate(-4px, 3px) rotate(0.5deg); }
  22% { -ms-transform: translate(0px, 2px) rotate(-0.5deg); }
  24% { -ms-transform: translate(-4px, -1px) rotate(-0.5deg); }
  26% { -ms-transform: translate(6px, -2px) rotate(0.5deg); }
  28% { -ms-transform: translate(1px, 5px) rotate(-1.5deg); }
  30% { -ms-transform: translate(4px, 7px) rotate(-2.5deg); }
  32% { -ms-transform: translate(-3px, -7px) rotate(2.5deg); }
  34% { -ms-transform: translate(9px, 5px) rotate(1.5deg); }
  36% { -ms-transform: translate(7px, -7px) rotate(0.5deg); }
  38% { -ms-transform: translate(-8px, 3px) rotate(-3.5deg); }
  40% { -ms-transform: translate(0px, 0px) rotate(0.5deg); }
  42% { -ms-transform: translate(9px, -6px) rotate(2.5deg); }
  44% { -ms-transform: translate(4px, 6px) rotate(1.5deg); }
  46% { -ms-transform: translate(9px, 6px) rotate(2.5deg); }
  48% { -ms-transform: translate(4px, -10px) rotate(2.5deg); }
  50% { -ms-transform: translate(7px, -10px) rotate(-0.5deg); }
  52% { -ms-transform: translate(9px, 0px) rotate(-0.5deg); }
  54% { -ms-transform: translate(-9px, -10px) rotate(-2.5deg); }
  56% { -ms-transform: translate(-2px, -1px) rotate(-2.5deg); }
  58% { -ms-transform: translate(0px, -10px) rotate(-3.5deg); }
  60% { -ms-transform: translate(-4px, 9px) rotate(-0.5deg); }
  62% { -ms-transform: translate(-5px, -6px) rotate(2.5deg); }
  64% { -ms-transform: translate(-10px, -1px) rotate(-0.5deg); }
  66% { -ms-transform: translate(6px, -1px) rotate(0.5deg); }
  68% { -ms-transform: translate(3px, -8px) rotate(-0.5deg); }
  70% { -ms-transform: translate(-8px, 3px) rotate(-0.5deg); }
  72% { -ms-transform: translate(-6px, -2px) rotate(2.5deg); }
  74% { -ms-transform: translate(7px, -3px) rotate(2.5deg); }
  76% { -ms-transform: translate(-2px, -10px) rotate(-2.5deg); }
  78% { -ms-transform: translate(1px, 9px) rotate(2.5deg); }
  80% { -ms-transform: translate(5px, 0px) rotate(0.5deg); }
  82% { -ms-transform: translate(7px, -9px) rotate(-2.5deg); }
  84% { -ms-transform: translate(-2px, 0px) rotate(-0.5deg); }
  86% { -ms-transform: translate(-4px, -5px) rotate(-2.5deg); }
  88% { -ms-transform: translate(-6px, -3px) rotate(-3.5deg); }
  90% { -ms-transform: translate(-4px, -8px) rotate(1.5deg); }
  92% { -ms-transform: translate(9px, -8px) rotate(2.5deg); }
  94% { -ms-transform: translate(-4px, 7px) rotate(-3.5deg); }
  96% { -ms-transform: translate(-8px, 8px) rotate(-3.5deg); }
  98% { -ms-transform: translate(-10px, -7px) rotate(0.5deg); } }

@keyframes shake-slow { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(-3px, -3px) rotate(1.5deg); }
  4% { transform: translate(-4px, -4px) rotate(-1.5deg); }
  6% { transform: translate(5px, -4px) rotate(-2.5deg); }
  8% { transform: translate(-9px, -9px) rotate(2.5deg); }
  10% { transform: translate(-6px, -6px) rotate(-0.5deg); }
  12% { transform: translate(-10px, 7px) rotate(1.5deg); }
  14% { transform: translate(7px, -10px) rotate(-3.5deg); }
  16% { transform: translate(6px, 3px) rotate(0.5deg); }
  18% { transform: translate(-7px, 0px) rotate(0.5deg); }
  20% { transform: translate(8px, 0px) rotate(-0.5deg); }
  22% { transform: translate(-4px, -7px) rotate(0.5deg); }
  24% { transform: translate(9px, 5px) rotate(-3.5deg); }
  26% { transform: translate(-2px, 1px) rotate(2.5deg); }
  28% { transform: translate(7px, -10px) rotate(-3.5deg); }
  30% { transform: translate(0px, -8px) rotate(-0.5deg); }
  32% { transform: translate(-8px, 6px) rotate(0.5deg); }
  34% { transform: translate(5px, -1px) rotate(2.5deg); }
  36% { transform: translate(0px, 6px) rotate(1.5deg); }
  38% { transform: translate(-8px, 3px) rotate(0.5deg); }
  40% { transform: translate(5px, -2px) rotate(-0.5deg); }
  42% { transform: translate(-2px, -4px) rotate(0.5deg); }
  44% { transform: translate(-3px, -6px) rotate(2.5deg); }
  46% { transform: translate(1px, -6px) rotate(-0.5deg); }
  48% { transform: translate(9px, 7px) rotate(-3.5deg); }
  50% { transform: translate(-1px, 6px) rotate(-1.5deg); }
  52% { transform: translate(2px, 3px) rotate(0.5deg); }
  54% { transform: translate(5px, -9px) rotate(-0.5deg); }
  56% { transform: translate(6px, 0px) rotate(-0.5deg); }
  58% { transform: translate(-2px, -7px) rotate(-0.5deg); }
  60% { transform: translate(8px, -7px) rotate(2.5deg); }
  62% { transform: translate(-7px, 9px) rotate(-3.5deg); }
  64% { transform: translate(-7px, -10px) rotate(1.5deg); }
  66% { transform: translate(6px, -7px) rotate(-1.5deg); }
  68% { transform: translate(8px, 3px) rotate(-3.5deg); }
  70% { transform: translate(4px, -3px) rotate(-1.5deg); }
  72% { transform: translate(5px, 4px) rotate(-2.5deg); }
  74% { transform: translate(7px, -1px) rotate(-1.5deg); }
  76% { transform: translate(3px, -10px) rotate(1.5deg); }
  78% { transform: translate(-5px, 0px) rotate(1.5deg); }
  80% { transform: translate(5px, -5px) rotate(-3.5deg); }
  82% { transform: translate(-3px, 0px) rotate(-0.5deg); }
  84% { transform: translate(5px, -1px) rotate(1.5deg); }
  86% { transform: translate(9px, 2px) rotate(-1.5deg); }
  88% { transform: translate(4px, 3px) rotate(-1.5deg); }
  90% { transform: translate(9px, 6px) rotate(-0.5deg); }
  92% { transform: translate(8px, 8px) rotate(2.5deg); }
  94% { transform: translate(-6px, -10px) rotate(0.5deg); }
  96% { transform: translate(-8px, 1px) rotate(-2.5deg); }
  98% { transform: translate(0px, 6px) rotate(0.5deg); } }

@-webkit-keyframes shake-hard { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(9px, -10px) rotate(-2.5deg); }
  4% { -webkit-transform: translate(2px, -1px) rotate(1.5deg); }
  6% { -webkit-transform: translate(-10px, -9px) rotate(-3.5deg); }
  8% { -webkit-transform: translate(-9px, -1px) rotate(1.5deg); }
  10% { -webkit-transform: translate(-7px, 6px) rotate(-0.5deg); }
  12% { -webkit-transform: translate(-8px, 2px) rotate(1.5deg); }
  14% { -webkit-transform: translate(-9px, -6px) rotate(1.5deg); }
  16% { -webkit-transform: translate(-8px, -10px) rotate(1.5deg); }
  18% { -webkit-transform: translate(-10px, 2px) rotate(-3.5deg); }
  20% { -webkit-transform: translate(7px, -8px) rotate(0.5deg); }
  22% { -webkit-transform: translate(-6px, -1px) rotate(1.5deg); }
  24% { -webkit-transform: translate(9px, 0px) rotate(-2.5deg); }
  26% { -webkit-transform: translate(5px, 1px) rotate(2.5deg); }
  28% { -webkit-transform: translate(-8px, 9px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(-3px, 7px) rotate(1.5deg); }
  32% { -webkit-transform: translate(-8px, -10px) rotate(1.5deg); }
  34% { -webkit-transform: translate(2px, -2px) rotate(-2.5deg); }
  36% { -webkit-transform: translate(-9px, 8px) rotate(-3.5deg); }
  38% { -webkit-transform: translate(0px, 7px) rotate(-2.5deg); }
  40% { -webkit-transform: translate(-3px, -7px) rotate(0.5deg); }
  42% { -webkit-transform: translate(-1px, 1px) rotate(-1.5deg); }
  44% { -webkit-transform: translate(-8px, -1px) rotate(-1.5deg); }
  46% { -webkit-transform: translate(-1px, -6px) rotate(-3.5deg); }
  48% { -webkit-transform: translate(-10px, -8px) rotate(2.5deg); }
  50% { -webkit-transform: translate(9px, -2px) rotate(2.5deg); }
  52% { -webkit-transform: translate(2px, 8px) rotate(2.5deg); }
  54% { -webkit-transform: translate(-8px, -9px) rotate(-1.5deg); }
  56% { -webkit-transform: translate(-4px, -9px) rotate(-1.5deg); }
  58% { -webkit-transform: translate(-5px, -2px) rotate(-2.5deg); }
  60% { -webkit-transform: translate(5px, -1px) rotate(-1.5deg); }
  62% { -webkit-transform: translate(4px, -6px) rotate(-1.5deg); }
  64% { -webkit-transform: translate(0px, 3px) rotate(0.5deg); }
  66% { -webkit-transform: translate(-1px, -1px) rotate(-1.5deg); }
  68% { -webkit-transform: translate(4px, 9px) rotate(-1.5deg); }
  70% { -webkit-transform: translate(0px, 6px) rotate(-3.5deg); }
  72% { -webkit-transform: translate(-9px, 4px) rotate(-1.5deg); }
  74% { -webkit-transform: translate(-8px, -5px) rotate(-2.5deg); }
  76% { -webkit-transform: translate(-8px, -1px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(3px, 0px) rotate(1.5deg); }
  80% { -webkit-transform: translate(7px, 9px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-5px, -3px) rotate(-0.5deg); }
  84% { -webkit-transform: translate(-7px, -8px) rotate(-2.5deg); }
  86% { -webkit-transform: translate(-6px, 3px) rotate(0.5deg); }
  88% { -webkit-transform: translate(-1px, -7px) rotate(-2.5deg); }
  90% { -webkit-transform: translate(-10px, 9px) rotate(1.5deg); }
  92% { -webkit-transform: translate(3px, -2px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(8px, -4px) rotate(1.5deg); }
  96% { -webkit-transform: translate(1px, 0px) rotate(1.5deg); }
  98% { -webkit-transform: translate(-1px, 1px) rotate(-0.5deg); } }

@-ms-keyframes shake-hard { 0% { -ms-transform: translate(0px, 0px) rotate(0deg); }
  2% { -ms-transform: translate(7px, -8px) rotate(-3.5deg); }
  4% { -ms-transform: translate(-6px, -3px) rotate(1.5deg); }
  6% { -ms-transform: translate(-5px, 9px) rotate(0.5deg); }
  8% { -ms-transform: translate(9px, -4px) rotate(0.5deg); }
  10% { -ms-transform: translate(8px, 5px) rotate(-2.5deg); }
  12% { -ms-transform: translate(7px, -4px) rotate(-2.5deg); }
  14% { -ms-transform: translate(2px, 3px) rotate(0.5deg); }
  16% { -ms-transform: translate(-1px, -1px) rotate(-1.5deg); }
  18% { -ms-transform: translate(-10px, -7px) rotate(2.5deg); }
  20% { -ms-transform: translate(3px, 5px) rotate(-0.5deg); }
  22% { -ms-transform: translate(4px, -8px) rotate(1.5deg); }
  24% { -ms-transform: translate(-3px, 5px) rotate(0.5deg); }
  26% { -ms-transform: translate(-4px, 7px) rotate(-3.5deg); }
  28% { -ms-transform: translate(-6px, 7px) rotate(-3.5deg); }
  30% { -ms-transform: translate(-3px, 0px) rotate(1.5deg); }
  32% { -ms-transform: translate(3px, -4px) rotate(2.5deg); }
  34% { -ms-transform: translate(-3px, -7px) rotate(2.5deg); }
  36% { -ms-transform: translate(6px, 7px) rotate(1.5deg); }
  38% { -ms-transform: translate(5px, -3px) rotate(0.5deg); }
  40% { -ms-transform: translate(5px, 3px) rotate(-1.5deg); }
  42% { -ms-transform: translate(3px, -10px) rotate(1.5deg); }
  44% { -ms-transform: translate(8px, -7px) rotate(-2.5deg); }
  46% { -ms-transform: translate(-8px, 4px) rotate(2.5deg); }
  48% { -ms-transform: translate(3px, 9px) rotate(1.5deg); }
  50% { -ms-transform: translate(9px, -10px) rotate(-1.5deg); }
  52% { -ms-transform: translate(2px, -8px) rotate(-1.5deg); }
  54% { -ms-transform: translate(1px, -8px) rotate(-0.5deg); }
  56% { -ms-transform: translate(-10px, 0px) rotate(-3.5deg); }
  58% { -ms-transform: translate(-2px, -5px) rotate(0.5deg); }
  60% { -ms-transform: translate(-5px, -2px) rotate(-3.5deg); }
  62% { -ms-transform: translate(-5px, -4px) rotate(0.5deg); }
  64% { -ms-transform: translate(-3px, -2px) rotate(2.5deg); }
  66% { -ms-transform: translate(-3px, -5px) rotate(2.5deg); }
  68% { -ms-transform: translate(8px, -1px) rotate(-3.5deg); }
  70% { -ms-transform: translate(-4px, 7px) rotate(1.5deg); }
  72% { -ms-transform: translate(1px, -6px) rotate(-1.5deg); }
  74% { -ms-transform: translate(2px, 5px) rotate(-3.5deg); }
  76% { -ms-transform: translate(-9px, -5px) rotate(-2.5deg); }
  78% { -ms-transform: translate(-7px, -5px) rotate(-1.5deg); }
  80% { -ms-transform: translate(-3px, -8px) rotate(-2.5deg); }
  82% { -ms-transform: translate(-4px, 1px) rotate(-0.5deg); }
  84% { -ms-transform: translate(-10px, 4px) rotate(-2.5deg); }
  86% { -ms-transform: translate(-5px, -4px) rotate(0.5deg); }
  88% { -ms-transform: translate(-2px, 7px) rotate(-0.5deg); }
  90% { -ms-transform: translate(6px, -8px) rotate(-0.5deg); }
  92% { -ms-transform: translate(-5px, 2px) rotate(1.5deg); }
  94% { -ms-transform: translate(-7px, -9px) rotate(-3.5deg); }
  96% { -ms-transform: translate(-4px, 9px) rotate(-3.5deg); }
  98% { -ms-transform: translate(5px, 7px) rotate(1.5deg); } }

@keyframes shake-hard { 0% { transform: translate(0px, 0px) rotate(0deg); }
  2% { transform: translate(1px, -9px) rotate(-2.5deg); }
  4% { transform: translate(8px, 2px) rotate(1.5deg); }
  6% { transform: translate(-9px, 8px) rotate(1.5deg); }
  8% { transform: translate(-1px, 5px) rotate(-2.5deg); }
  10% { transform: translate(8px, 7px) rotate(0.5deg); }
  12% { transform: translate(-7px, -2px) rotate(-3.5deg); }
  14% { transform: translate(9px, 4px) rotate(-3.5deg); }
  16% { transform: translate(-6px, 9px) rotate(-3.5deg); }
  18% { transform: translate(-3px, 7px) rotate(2.5deg); }
  20% { transform: translate(4px, -8px) rotate(-2.5deg); }
  22% { transform: translate(-1px, -7px) rotate(1.5deg); }
  24% { transform: translate(6px, -5px) rotate(-0.5deg); }
  26% { transform: translate(5px, -2px) rotate(2.5deg); }
  28% { transform: translate(1px, 0px) rotate(-0.5deg); }
  30% { transform: translate(8px, 9px) rotate(1.5deg); }
  32% { transform: translate(6px, -7px) rotate(-2.5deg); }
  34% { transform: translate(-7px, 5px) rotate(-2.5deg); }
  36% { transform: translate(0px, 8px) rotate(-2.5deg); }
  38% { transform: translate(-6px, 2px) rotate(1.5deg); }
  40% { transform: translate(-1px, 8px) rotate(-0.5deg); }
  42% { transform: translate(-2px, -7px) rotate(0.5deg); }
  44% { transform: translate(2px, -8px) rotate(-0.5deg); }
  46% { transform: translate(5px, -3px) rotate(-2.5deg); }
  48% { transform: translate(7px, 2px) rotate(-0.5deg); }
  50% { transform: translate(2px, 1px) rotate(0.5deg); }
  52% { transform: translate(1px, 1px) rotate(2.5deg); }
  54% { transform: translate(-7px, 1px) rotate(0.5deg); }
  56% { transform: translate(6px, 1px) rotate(0.5deg); }
  58% { transform: translate(9px, 7px) rotate(-0.5deg); }
  60% { transform: translate(2px, 3px) rotate(-0.5deg); }
  62% { transform: translate(-2px, 6px) rotate(1.5deg); }
  64% { transform: translate(9px, 3px) rotate(-3.5deg); }
  66% { transform: translate(2px, 2px) rotate(-1.5deg); }
  68% { transform: translate(-9px, 3px) rotate(1.5deg); }
  70% { transform: translate(7px, -7px) rotate(-3.5deg); }
  72% { transform: translate(-5px, -2px) rotate(0.5deg); }
  74% { transform: translate(-7px, 3px) rotate(0.5deg); }
  76% { transform: translate(8px, -5px) rotate(1.5deg); }
  78% { transform: translate(-2px, 1px) rotate(2.5deg); }
  80% { transform: translate(0px, 4px) rotate(-3.5deg); }
  82% { transform: translate(2px, -3px) rotate(2.5deg); }
  84% { transform: translate(-1px, 2px) rotate(-0.5deg); }
  86% { transform: translate(-2px, -3px) rotate(1.5deg); }
  88% { transform: translate(5px, 8px) rotate(2.5deg); }
  90% { transform: translate(-6px, -10px) rotate(-2.5deg); }
  92% { transform: translate(-4px, -7px) rotate(-0.5deg); }
  94% { transform: translate(-8px, 8px) rotate(-2.5deg); }
  96% { transform: translate(-7px, 1px) rotate(-2.5deg); }
  98% { transform: translate(2px, -4px) rotate(-0.5deg); } }
#soundWord{
    background-image: url(img/sound.jpg);
    position: absolute;
    width: 83px;
    height: 24px;
    margin-top: 795px;
    margin-left: 43px;;
}
.audio{
    position: absolute;
    margin-top: 785px;
    margin-left: 195px;
    width: 390px;
}
#setaudio{
    background-color: #002027;
    border:none;
    height: 30px;
    width: 390px;
    text-align: center;
    color: white;
}
#connect{
    position: absolute;
    margin-top: 860px;
    margin-left: 43px;
    background-image: url(img/connect.jpg);
    width: 311px;
    height: 25px;
}
#checkbox{
    position: absolute;
    margin-left: 360px;
    margin-top: 860px;
}
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline;
    margin: 0 20px 0 20px;
}
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}
.container:hover input ~ .checkmark {
    background-color: #ccc;
}
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.container input:checked ~ .checkmark:after {
    display: block;
}
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;