1
@import url(fonts/clear-sans.css);
2
html, body {
3
  margin: 0;
4
  padding: 0;
5
  background: #faf8ef;
6
  color: #776e65;
7
  font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif;
8
  font-size: 18px; }
9

10
body {
11
  margin: 80px 0; }
12

13
.heading:after {
14
  content: "";
15
  display: block;
16
  clear: both; }
17

18
h1.title {
19
  font-size: 80px;
20
  font-weight: bold;
21
  margin: 0;
22
  display: block;
23
  float: left; }
24

25
@-webkit-keyframes move-up {
26
  0% {
27
    top: 25px;
28
    opacity: 1; }
29

30
  100% {
31
    top: -50px;
32
    opacity: 0; } }
33

34
@-moz-keyframes move-up {
35
  0% {
36
    top: 25px;
37
    opacity: 1; }
38

39
  100% {
40
    top: -50px;
41
    opacity: 0; } }
42

43
@keyframes move-up {
44
  0% {
45
    top: 25px;
46
    opacity: 1; }
47

48
  100% {
49
    top: -50px;
50
    opacity: 0; } }
51

52
.scores-container {
53
  float: right;
54
  text-align: right; }
55

56
.score-container, .best-container {
57
  position: relative;
58
  display: inline-block;
59
  background: #bbada0;
60
  padding: 15px 25px;
61
  font-size: 25px;
62
  height: 25px;
63
  line-height: 47px;
64
  font-weight: bold;
65
  border-radius: 3px;
66
  color: white;
67
  margin-top: 8px;
68
  text-align: center; }
69
  .score-container:after, .best-container:after {
70
    position: absolute;
71
    width: 100%;
72
    top: 10px;
73
    left: 0;
74
    text-transform: uppercase;
75
    font-size: 13px;
76
    line-height: 13px;
77
    text-align: center;
78
    color: #eee4da; }
79
  .score-container .score-addition, .best-container .score-addition {
80
    position: absolute;
81
    right: 30px;
82
    color: red;
83
    font-size: 25px;
84
    line-height: 25px;
85
    font-weight: bold;
86
    color: rgba(119, 110, 101, 0.9);
87
    z-index: 100;
88
    -webkit-animation: move-up 600ms ease-in;
89
    -moz-animation: move-up 600ms ease-in;
90
    animation: move-up 600ms ease-in;
91
    -webkit-animation-fill-mode: both;
92
    -moz-animation-fill-mode: both;
93
    animation-fill-mode: both; }
94

95
.score-container:after {
96
  content: "Score"; }
97

98
.best-container:after {
99
  content: "Best"; }
100

101
p {
102
  margin-top: 0;
103
  margin-bottom: 10px;
104
  line-height: 1.65; }
105

106
a {
107
  color: #776e65;
108
  font-weight: bold;
109
  text-decoration: underline;
110
  cursor: pointer; }
111

112
strong.important {
113
  text-transform: uppercase; }
114

115
hr {
116
  border: none;
117
  border-bottom: 1px solid #d8d4d0;
118
  margin-top: 20px;
119
  margin-bottom: 30px; }
120

121
.container {
122
  width: 500px;
123
  margin: 0 auto; }
124

125
@-webkit-keyframes fade-in {
126
  0% {
127
    opacity: 0; }
128

129
  100% {
130
    opacity: 1; } }
131

132
@-moz-keyframes fade-in {
133
  0% {
134
    opacity: 0; }
135

136
  100% {
137
    opacity: 1; } }
138

139
@keyframes fade-in {
140
  0% {
141
    opacity: 0; }
142

143
  100% {
144
    opacity: 1; } }
145

146
.game-container {
147
  margin-top: 40px;
148
  position: relative;
149
  padding: 15px;
150
  cursor: default;
151
  -webkit-touch-callout: none;
152
  -webkit-user-select: none;
153
  -moz-user-select: none;
154
  background: #bbada0;
155
  border-radius: 6px;
156
  width: 500px;
157
  height: 500px;
158
  -ms-touch-action: none;
159
  -webkit-box-sizing: border-box;
160
  -moz-box-sizing: border-box;
161
  box-sizing: border-box; }
162
  .game-container .game-message {
163
    display: none;
164
    position: absolute;
165
    top: 0;
166
    right: 0;
167
    bottom: 0;
168
    left: 0;
169
    background: rgba(238, 228, 218, 0.5);
170
    z-index: 100;
171
    text-align: center;
172
    -webkit-animation: fade-in 800ms ease 1200ms;
173
    -moz-animation: fade-in 800ms ease 1200ms;
174
    animation: fade-in 800ms ease 1200ms;
175
    -webkit-animation-fill-mode: both;
176
    -moz-animation-fill-mode: both;
177
    animation-fill-mode: both; }
178
    .game-container .game-message p {
179
      font-size: 60px;
180
      font-weight: bold;
181
      height: 60px;
182
      line-height: 60px;
183
      margin-top: 222px; }
184
    .game-container .game-message .lower {
185
      display: block;
186
      margin-top: 59px; }
187
    .game-container .game-message a {
188
      display: inline-block;
189
      background: #8f7a66;
190
      border-radius: 3px;
191
      padding: 0 20px;
192
      text-decoration: none;
193
      color: #f9f6f2;
194
      height: 40px;
195
      line-height: 42px;
196
      margin-left: 9px; }
197
      .game-container .game-message a.keep-playing-button {
198
        display: none; }
199
      .game-container .game-message .score-sharing {
200
      display: inline-block;
201
      vertical-align: middle;
202
      margin-left: 10px; }
203
    .game-container .game-message.game-won {
204
      background: rgba(237, 194, 46, 0.5);
205
      color: #f9f6f2; }
206
      .game-container .game-message.game-won a.keep-playing-button {
207
        display: inline-block; }
208
    .game-container .game-message.game-won, .game-container .game-message.game-over {
209
      display: block; }
210

211
.grid-container {
212
  position: absolute;
213
  z-index: 1; }
214

215
.grid-row {
216
  margin-bottom: 15px; }
217
  .grid-row:last-child {
218
    margin-bottom: 0; }
219
  .grid-row:after {
220
    content: "";
221
    display: block;
222
    clear: both; }
223

224
.grid-cell {
225
  width: 106.25px;
226
  height: 106.25px;
227
  margin-right: 15px;
228
  float: left;
229
  border-radius: 3px;
230
  background: rgba(238, 228, 218, 0.35); }
231
  .grid-cell:last-child {
232
    margin-right: 0; }
233

234
.tile-container {
235
  position: absolute;
236
  z-index: 2; }
237

238
.tile, .tile .tile-inner {
239
  width: 107px;
240
  height: 107px;
241
  line-height: 116.25px; }
242
.tile.tile-position-1-1 {
243
  -webkit-transform: translate(0px, 0px);
244
  -moz-transform: translate(0px, 0px);
245
  transform: translate(0px, 0px); }
246
.tile.tile-position-1-2 {
247
  -webkit-transform: translate(0px, 121px);
248
  -moz-transform: translate(0px, 121px);
249
  transform: translate(0px, 121px); }
250
.tile.tile-position-1-3 {
251
  -webkit-transform: translate(0px, 242px);
252
  -moz-transform: translate(0px, 242px);
253
  transform: translate(0px, 242px); }
254
.tile.tile-position-1-4 {
255
  -webkit-transform: translate(0px, 363px);
256
  -moz-transform: translate(0px, 363px);
257
  transform: translate(0px, 363px); }
258
.tile.tile-position-2-1 {
259
  -webkit-transform: translate(121px, 0px);
260
  -moz-transform: translate(121px, 0px);
261
  transform: translate(121px, 0px); }
262
.tile.tile-position-2-2 {
263
  -webkit-transform: translate(121px, 121px);
264
  -moz-transform: translate(121px, 121px);
265
  transform: translate(121px, 121px); }
266
.tile.tile-position-2-3 {
267
  -webkit-transform: translate(121px, 242px);
268
  -moz-transform: translate(121px, 242px);
269
  transform: translate(121px, 242px); }
270
.tile.tile-position-2-4 {
271
  -webkit-transform: translate(121px, 363px);
272
  -moz-transform: translate(121px, 363px);
273
  transform: translate(121px, 363px); }
274
.tile.tile-position-3-1 {
275
  -webkit-transform: translate(242px, 0px);
276
  -moz-transform: translate(242px, 0px);
277
  transform: translate(242px, 0px); }
278
.tile.tile-position-3-2 {
279
  -webkit-transform: translate(242px, 121px);
280
  -moz-transform: translate(242px, 121px);
281
  transform: translate(242px, 121px); }
282
.tile.tile-position-3-3 {
283
  -webkit-transform: translate(242px, 242px);
284
  -moz-transform: translate(242px, 242px);
285
  transform: translate(242px, 242px); }
286
.tile.tile-position-3-4 {
287
  -webkit-transform: translate(242px, 363px);
288
  -moz-transform: translate(242px, 363px);
289
  transform: translate(242px, 363px); }
290
.tile.tile-position-4-1 {
291
  -webkit-transform: translate(363px, 0px);
292
  -moz-transform: translate(363px, 0px);
293
  transform: translate(363px, 0px); }
294
.tile.tile-position-4-2 {
295
  -webkit-transform: translate(363px, 121px);
296
  -moz-transform: translate(363px, 121px);
297
  transform: translate(363px, 121px); }
298
.tile.tile-position-4-3 {
299
  -webkit-transform: translate(363px, 242px);
300
  -moz-transform: translate(363px, 242px);
301
  transform: translate(363px, 242px); }
302
.tile.tile-position-4-4 {
303
  -webkit-transform: translate(363px, 363px);
304
  -moz-transform: translate(363px, 363px);
305
  transform: translate(363px, 363px); }
306

307
.tile {
308
  position: absolute;
309
  -webkit-transition: 100ms ease-in-out;
310
  -moz-transition: 100ms ease-in-out;
311
  transition: 100ms ease-in-out;
312
  -webkit-transition-property: -webkit-transform;
313
  -moz-transition-property: -moz-transform;
314
  transition-property: transform; }
315
  .tile .tile-inner {
316
    border-radius: 3px;
317
    background: #eee4da;
318
    text-align: center;
319
    font-weight: bold;
320
    z-index: 10;
321
    font-size: 55px; }
322
  .tile.tile-2 .tile-inner {
323
    background: #eee4da;
324
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
325
  .tile.tile-4 .tile-inner {
326
    background: #ede0c8;
327
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
328
  .tile.tile-8 .tile-inner {
329
    color: #f9f6f2;
330
    background: #f2b179; }
331
  .tile.tile-16 .tile-inner {
332
    color: #f9f6f2;
333
    background: #f59563; }
334
  .tile.tile-32 .tile-inner {
335
    color: #f9f6f2;
336
    background: #f67c5f; }
337
  .tile.tile-64 .tile-inner {
338
    color: #f9f6f2;
339
    background: #f65e3b; }
340
  .tile.tile-128 .tile-inner {
341
    color: #f9f6f2;
342
    background: #edcf72;
343
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
344
    font-size: 45px; }
345
    @media screen and (max-width: 520px) {
346
      .tile.tile-128 .tile-inner {
347
        font-size: 25px; } }
348
  .tile.tile-256 .tile-inner {
349
    color: #f9f6f2;
350
    background: #edcc61;
351
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
352
    font-size: 45px; }
353
    @media screen and (max-width: 520px) {
354
      .tile.tile-256 .tile-inner {
355
        font-size: 25px; } }
356
  .tile.tile-512 .tile-inner {
357
    color: #f9f6f2;
358
    background: #edc850;
359
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
360
    font-size: 45px; }
361
    @media screen and (max-width: 520px) {
362
      .tile.tile-512 .tile-inner {
363
        font-size: 25px; } }
364
  .tile.tile-1024 .tile-inner {
365
    color: #f9f6f2;
366
    background: #edc53f;
367
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
368
    font-size: 35px; }
369
    @media screen and (max-width: 520px) {
370
      .tile.tile-1024 .tile-inner {
371
        font-size: 15px; } }
372
  .tile.tile-2048 .tile-inner {
373
    color: #f9f6f2;
374
    background: #edc22e;
375
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
376
    font-size: 35px; }
377
    @media screen and (max-width: 520px) {
378
      .tile.tile-2048 .tile-inner {
379
        font-size: 15px; } }
380
  .tile.tile-super .tile-inner {
381
    color: #f9f6f2;
382
    background: #3c3a32;
383
    font-size: 30px; }
384
    @media screen and (max-width: 520px) {
385
      .tile.tile-super .tile-inner {
386
        font-size: 10px; } }
387

388
@-webkit-keyframes appear {
389
  0% {
390
    opacity: 0;
391
    -webkit-transform: scale(0);
392
    -moz-transform: scale(0);
393
    transform: scale(0); }
394

395
  100% {
396
    opacity: 1;
397
    -webkit-transform: scale(1);
398
    -moz-transform: scale(1);
399
    transform: scale(1); } }
400

401
@-moz-keyframes appear {
402
  0% {
403
    opacity: 0;
404
    -webkit-transform: scale(0);
405
    -moz-transform: scale(0);
406
    transform: scale(0); }
407

408
  100% {
409
    opacity: 1;
410
    -webkit-transform: scale(1);
411
    -moz-transform: scale(1);
412
    transform: scale(1); } }
413

414
@keyframes appear {
415
  0% {
416
    opacity: 0;
417
    -webkit-transform: scale(0);
418
    -moz-transform: scale(0);
419
    transform: scale(0); }
420

421
  100% {
422
    opacity: 1;
423
    -webkit-transform: scale(1);
424
    -moz-transform: scale(1);
425
    transform: scale(1); } }
426

427
.tile-new .tile-inner {
428
  -webkit-animation: appear 200ms ease 100ms;
429
  -moz-animation: appear 200ms ease 100ms;
430
  animation: appear 200ms ease 100ms;
431
  -webkit-animation-fill-mode: backwards;
432
  -moz-animation-fill-mode: backwards;
433
  animation-fill-mode: backwards; }
434

435
@-webkit-keyframes pop {
436
  0% {
437
    -webkit-transform: scale(0);
438
    -moz-transform: scale(0);
439
    transform: scale(0); }
440

441
  50% {
442
    -webkit-transform: scale(1.2);
443
    -moz-transform: scale(1.2);
444
    transform: scale(1.2); }
445

446
  100% {
447
    -webkit-transform: scale(1);
448
    -moz-transform: scale(1);
449
    transform: scale(1); } }
450

451
@-moz-keyframes pop {
452
  0% {
453
    -webkit-transform: scale(0);
454
    -moz-transform: scale(0);
455
    transform: scale(0); }
456

457
  50% {
458
    -webkit-transform: scale(1.2);
459
    -moz-transform: scale(1.2);
460
    transform: scale(1.2); }
461

462
  100% {
463
    -webkit-transform: scale(1);
464
    -moz-transform: scale(1);
465
    transform: scale(1); } }
466

467
@keyframes pop {
468
  0% {
469
    -webkit-transform: scale(0);
470
    -moz-transform: scale(0);
471
    transform: scale(0); }
472

473
  50% {
474
    -webkit-transform: scale(1.2);
475
    -moz-transform: scale(1.2);
476
    transform: scale(1.2); }
477

478
  100% {
479
    -webkit-transform: scale(1);
480
    -moz-transform: scale(1);
481
    transform: scale(1); } }
482

483
.tile-merged .tile-inner {
484
  z-index: 20;
485
  -webkit-animation: pop 200ms ease 100ms;
486
  -moz-animation: pop 200ms ease 100ms;
487
  animation: pop 200ms ease 100ms;
488
  -webkit-animation-fill-mode: backwards;
489
  -moz-animation-fill-mode: backwards;
490
  animation-fill-mode: backwards; }
491

492
.game-intro {
493
  margin-bottom: 0; }
494

495
.game-explanation {
496
  margin-top: 50px; }
497

498
.sharing {
499
  margin-top: 20px;
500
  text-align: center; }
501
  .sharing > iframe, .sharing > span, .sharing > form {
502
    display: inline-block;
503
    vertical-align: middle; }
504

505
@media screen and (max-width: 520px) {
506
  html, body {
507
    font-size: 15px; }
508

509
  body {
510
    margin: 20px 0;
511
    padding: 0 20px; }
512

513
  h1.title {
514
    font-size: 27px;
515
    margin-top: 15px; }
516

517
  .container {
518
    width: 280px;
519
    margin: 0 auto; }
520

521
  .score-container, .best-container {
522
    margin-top: 0;
523
    padding: 15px 10px;
524
    min-width: 40px; }
525

526
  .heading {
527
    margin-bottom: 10px; }
528

529
  .game-container {
530
    margin-top: 40px;
531
    position: relative;
532
    padding: 10px;
533
    cursor: default;
534
    -webkit-touch-callout: none;
535
    -webkit-user-select: none;
536
    -moz-user-select: none;
537
    background: #bbada0;
538
    border-radius: 6px;
539
    width: 280px;
540
    height: 280px;
541
    -ms-touch-action: none;
542
    -webkit-box-sizing: border-box;
543
    -moz-box-sizing: border-box;
544
    box-sizing: border-box; }
545
    .game-container .game-message {
546
      display: none;
547
      position: absolute;
548
      top: 0;
549
      right: 0;
550
      bottom: 0;
551
      left: 0;
552
      background: rgba(238, 228, 218, 0.5);
553
      z-index: 100;
554
      text-align: center;
555
      -webkit-animation: fade-in 800ms ease 1200ms;
556
      -moz-animation: fade-in 800ms ease 1200ms;
557
      animation: fade-in 800ms ease 1200ms;
558
      -webkit-animation-fill-mode: both;
559
      -moz-animation-fill-mode: both;
560
      animation-fill-mode: both; }
561
      .game-container .game-message p {
562
        font-size: 60px;
563
        font-weight: bold;
564
        height: 60px;
565
        line-height: 60px;
566
        margin-top: 222px; }
567
      .game-container .game-message .lower {
568
        display: block;
569
        margin-top: 59px; }
570
      .game-container .game-message a {
571
        display: inline-block;
572
        background: #8f7a66;
573
        border-radius: 3px;
574
        padding: 0 20px;
575
        text-decoration: none;
576
        color: #f9f6f2;
577
        height: 40px;
578
        line-height: 42px;
579
        margin-left: 9px; }
580
        .game-container .game-message a.keep-playing-button {
581
          display: none; }
582
        .game-container .game-message .score-sharing {
583
        display: inline-block;
584
        vertical-align: middle;
585
        margin-left: 10px; }
586
      .game-container .game-message.game-won {
587
        background: rgba(237, 194, 46, 0.5);
588
        color: #f9f6f2; }
589
        .game-container .game-message.game-won a.keep-playing-button {
590
          display: inline-block; }
591
      .game-container .game-message.game-won, .game-container .game-message.game-over {
592
        display: block; }
593

594
  .grid-container {
595
    position: absolute;
596
    z-index: 1; }
597

598
  .grid-row {
599
    margin-bottom: 10px; }
600
    .grid-row:last-child {
601
      margin-bottom: 0; }
602
    .grid-row:after {
603
      content: "";
604
      display: block;
605
      clear: both; }
606

607
  .grid-cell {
608
    width: 57.5px;
609
    height: 57.5px;
610
    margin-right: 10px;
611
    float: left;
612
    border-radius: 3px;
613
    background: rgba(238, 228, 218, 0.35); }
614
    .grid-cell:last-child {
615
      margin-right: 0; }
616

617
  .tile-container {
618
    position: absolute;
619
    z-index: 2; }
620

621
  .tile, .tile .tile-inner {
622
    width: 58px;
623
    height: 58px;
624
    line-height: 67.5px; }
625
  .tile.tile-position-1-1 {
626
    -webkit-transform: translate(0px, 0px);
627
    -moz-transform: translate(0px, 0px);
628
    transform: translate(0px, 0px); }
629
  .tile.tile-position-1-2 {
630
    -webkit-transform: translate(0px, 67px);
631
    -moz-transform: translate(0px, 67px);
632
    transform: translate(0px, 67px); }
633
  .tile.tile-position-1-3 {
634
    -webkit-transform: translate(0px, 135px);
635
    -moz-transform: translate(0px, 135px);
636
    transform: translate(0px, 135px); }
637
  .tile.tile-position-1-4 {
638
    -webkit-transform: translate(0px, 202px);
639
    -moz-transform: translate(0px, 202px);
640
    transform: translate(0px, 202px); }
641
  .tile.tile-position-2-1 {
642
    -webkit-transform: translate(67px, 0px);
643
    -moz-transform: translate(67px, 0px);
644
    transform: translate(67px, 0px); }
645
  .tile.tile-position-2-2 {
646
    -webkit-transform: translate(67px, 67px);
647
    -moz-transform: translate(67px, 67px);
648
    transform: translate(67px, 67px); }
649
  .tile.tile-position-2-3 {
650
    -webkit-transform: translate(67px, 135px);
651
    -moz-transform: translate(67px, 135px);
652
    transform: translate(67px, 135px); }
653
  .tile.tile-position-2-4 {
654
    -webkit-transform: translate(67px, 202px);
655
    -moz-transform: translate(67px, 202px);
656
    transform: translate(67px, 202px); }
657
  .tile.tile-position-3-1 {
658
    -webkit-transform: translate(135px, 0px);
659
    -moz-transform: translate(135px, 0px);
660
    transform: translate(135px, 0px); }
661
  .tile.tile-position-3-2 {
662
    -webkit-transform: translate(135px, 67px);
663
    -moz-transform: translate(135px, 67px);
664
    transform: translate(135px, 67px); }
665
  .tile.tile-position-3-3 {
666
    -webkit-transform: translate(135px, 135px);
667
    -moz-transform: translate(135px, 135px);
668
    transform: translate(135px, 135px); }
669
  .tile.tile-position-3-4 {
670
    -webkit-transform: translate(135px, 202px);
671
    -moz-transform: translate(135px, 202px);
672
    transform: translate(135px, 202px); }
673
  .tile.tile-position-4-1 {
674
    -webkit-transform: translate(202px, 0px);
675
    -moz-transform: translate(202px, 0px);
676
    transform: translate(202px, 0px); }
677
  .tile.tile-position-4-2 {
678
    -webkit-transform: translate(202px, 67px);
679
    -moz-transform: translate(202px, 67px);
680
    transform: translate(202px, 67px); }
681
  .tile.tile-position-4-3 {
682
    -webkit-transform: translate(202px, 135px);
683
    -moz-transform: translate(202px, 135px);
684
    transform: translate(202px, 135px); }
685
  .tile.tile-position-4-4 {
686
    -webkit-transform: translate(202px, 202px);
687
    -moz-transform: translate(202px, 202px);
688
    transform: translate(202px, 202px); }
689

690
  .game-container {
691
    margin-top: 20px; }
692

693
  .tile .tile-inner {
694
    font-size: 35px; }
695

696
  .game-message p {
697
    font-size: 30px !important;
698
    height: 30px !important;
699
    line-height: 30px !important;
700
    margin-top: 90px !important; }
701
  .game-message .lower {
702
 margin-top: 30px !important; }
703
 
704
   .sharing > iframe, .sharing > span, .sharing > form {
705
     display: block;
706
     margin: 0 auto;
707
     margin-bottom: 20px; } }
708
 .pp-donate button {
709
   -webkit-appearance: none;
710
   -moz-appearance: none;
711
   appearance: none;
712
   border: none;
713
   font: inherit;
714
   color: inherit;
715
   cursor: pointer;
716
   display: inline-block;
717
   background: #8f7a66;
718
   border-radius: 3px;
719
   padding: 0 20px;
720
   text-decoration: none;
721
   color: #f9f6f2;
722
   height: 40px;
723
   line-height: 42px; }
724
   .pp-donate button img {
725
     vertical-align: -4px;
726
     margin-right: 8px; }
727
 
728
 .btc-donate {
729
   position: relative;
730
   margin-left: 10px;
731
   display: inline-block;
732
   background: #8f7a66;
733
   border-radius: 3px;
734
   padding: 0 20px;
735
   text-decoration: none;
736
   color: #f9f6f2;
737
   height: 40px;
738
   line-height: 42px;
739
   cursor: pointer; }
740
   .btc-donate img {
741
     vertical-align: -4px;
742
     margin-right: 8px; }
743
   .btc-donate a {
744
     color: #f9f6f2;
745
     text-decoration: none;
746
     font-weight: normal; }
747
   .btc-donate .address {
748
     cursor: auto;
749
     position: absolute;
750
     width: 340px;
751
     right: 50%;
752
     margin-right: -170px;
753
     padding-bottom: 7px;
754
     top: -30px;
755
     opacity: 0;
756
     pointer-events: none;
757
     -webkit-transition: 400ms ease;
758
     -moz-transition: 400ms ease;
759
     transition: 400ms ease;
760
     -webkit-transition-property: top, opacity;
761
     -moz-transition-property: top, opacity;
762
     transition-property: top, opacity; }
763
     .btc-donate .address:after {
764
       position: absolute;
765
       border-top: 10px solid #bbada0;
766
       border-right: 7px solid transparent;
767
       border-left: 7px solid transparent;
768
       content: "";
769
       bottom: 0px;
770
       left: 50%;
771
       margin-left: -7px; }
772
     .btc-donate .address code {
773
       background-color: #bbada0;
774
       padding: 10px 15px;
775
       width: 100%;
776
       border-radius: 3px;
777
       line-height: 1;
778
       font-weight: normal;
779
       font-size: 15px;
780
       font-family: Consolas, "Liberation Mono", Courier, monospace;
781
       text-align: center; }
782
   .btc-donate:hover .address, .btc-donate .address:hover .address {
783
     opacity: 1;
784
     top: -45px;
785
     pointer-events: auto; }
786
   @media screen and (max-width: 480px) {
787
     .btc-donate {
788
       width: 120px; }
789
       .btc-donate .address {
790
         margin-right: -150px;
791
         width: 300px; }
792
         .btc-donate .address code {
793
           font-size: 13px; }
794
         .btc-donate .address:after {
795
           left: 50%;
796
           bottom: 2px; } }
797