1
@-webkit-keyframes anim {
2
  0%   { -webkit-transform: translateY(10px) }
3
  50% { -webkit-transform: translateY(-10px) }
4
  100% { -webkit-transform: translateY(10px) }
5
}
6
@-moz-keyframes anim {
7
  0%   { -moz-transform: translateY(10px) }
8
  50% { -moz-transform: translateY(-10px) }
9
  100% { -moz-transform: translateY(10px) }
10
}
11
@-o-keyframes anim {
12
  0%   { -o-transform: translateY(10px) }
13
  50% { -o-transform: translateY(-10px) }
14
  100% { -o-transform: translateY(10px) }
15
}
16
@keyframes anim {
17
  0%   { transform: translateY(10px) }
18
  50% { transform: translateY(-10px) }
19
  100% { transform: translateY(10px) }
20
}
21

22
@-webkit-keyframes animbg {
23
  0%   { -webkit-transform: translateY(5px) }
24
  50% { -webkit-transform: translateY(-5px) }
25
  100% { -webkit-transform: translateY(5px) }
26
}
27
@-moz-keyframes animbg {
28
  0%   { -moz-transform: translateY(5px) }
29
  50% { -moz-transform: translateY(-5px) }
30
  100% { -moz-transform: translateY(5px) }
31
}
32
@-o-keyframes animbg {
33
  0%   { -o-transform: translateY(5px) }
34
  50% { -o-transform: translateY(-5px) }
35
  100% { -o-transform: translateY(5px) }
36
}
37
@keyframes animbg {
38
  0%   { transform: translateY(5px) }
39
  50% { transform: translateY(-5px) }
40
  100% { transform: translateY(5px) }
41
}
42

43
* {
44
  -webkit-touch-callout: none;
45
  -webkit-user-select: none;
46
  -khtml-user-select: none;
47
  -moz-user-select: none;
48
  -ms-user-select: none;
49
  user-select: none;
50
}
51
html, body {
52
  overflow: hidden;
53
  font-family: 'BebasNeueRegular', arial, sans-serif;
54
  background: white;
55
}
56

57
#global {
58
  position: absolute;
59
  top: 0;
60
  right: 0;
61
  bottom: 0;
62
  left: 0;
63
  z-index: 0;
64
  background: url('bg.jpg') no-repeat center center fixed;
65
  overflow: hidden;
66
  text-align: center;
67
  -moz-background-size: cover;
68
  -webkit-background-size: cover;
69
  -ms-background-size: cover;
70
  -o-background-size: cover;
71
  background-size: cover;
72
  -webkit-transform: translateZ(0);
73
  -moz-transform: translateZ(0);
74
  -o-transform: translateZ(0);
75
  transform: translateZ(0);
76
  -webkit-animation: animbg 3s ease-in-out infinite;
77
  -moz-animation: animbg 3s ease-in-out infinite;
78
  -o-animation: animbg 3s ease-in-out infinite;
79
  animation: animbg 3s ease-in-out infinite;
80
}
81

82
#title {
83
  position: absolute;
84
  top: 5%;
85
  right: 0;
86
  bottom: 5%;
87
  left: 0;
88
  z-index: 1;
89
  background: url('title.png') no-repeat center top;
90
  -moz-background-size: auto 50%;
91
  -webkit-background-size: auto 50%;
92
  -ms-background-size: auto 50%;
93
  -o-background-size: auto 50%;
94
  background-size: auto 50%;
95
  -webkit-transform: translateZ(0);
96
  -moz-transform: translateZ(0);
97
  -o-transform: translateZ(0);
98
  transform: translateZ(0);
99
  -webkit-animation: anim 3s ease-in-out infinite;
100
  -moz-animation: anim 3s ease-in-out infinite;
101
  -o-animation: anim 3s ease-in-out infinite;
102
  animation: anim 3s ease-in-out infinite;
103
}
104

105
#menucontainer {
106
  position: absolute;
107
  top: auto;
108
  right: 0;
109
  bottom: 10%;
110
  left: 0;
111
  z-index: 2;
112
}
113

114
#menu {
115
  position: relative;
116
  display: block;
117
  width: 100%;
118
  max-width: 600px;
119
  margin: auto;
120
  text-align: center;
121
  font-size: 2em;
122
  font-family: 'BebasNeueRegular', arial, sans-serif;
123
  text-transform: uppercase;
124
  color: #4190bb;
125
}
126

127
#menu div {
128
  padding: 0.1em 0 0 0;
129
  margin: 0 0;
130
  cursor: pointer;
131
  -moz-text-shadow: 0 0 10px rgb(255,255,255);
132
  -webkit-text-shadow: 0 0 10px rgb(255,255,255);
133
  text-shadow: 0 0 10px rgb(255,255,255);
134
  -webkit-transform-origin-y: 50%;
135
  -webkit-transition: -webkit-transform 0.2s;
136
  -webkit-transform: translateZ(0px) scaleY(0.8);
137
  transform-origin-y: 50%;
138
  transition: transform 0.2s ease;
139
  transform: translateZ(0px) scaleY(0.8);
140
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
141
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
142
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.5)), color-stop(60%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
143
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
144
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
145
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
146
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,0.5) 60%,rgba(255,255,255,0) 100%); /* W3C */
147
}
148

149
#menu div:hover {
150
  color: #f66439;
151
  -webkit-transform: scaleY(1.0);
152
  transform: scaleY(1.1);
153
}
154

155
#start {
156
  font-size: 1.8em;
157
  color: #f66439;
158
}
159

160
#start:hover {
161
  color: #f8854b !important;
162
}
163

164
#step-2 {
165
  position: absolute;
166
  top: 0;
167
  right: 0;
168
  bottom: 0;
169
  left: 0;
170
  background: black;
171
  vertical-align: bottom;
172
  text-align: center;
173
  padding: 20px;
174
  color: white;
175
  font-size: 2em;
176
  background-repeat: no-repeat;
177
  background-position: center center;
178
  -moz-background-size: 60% auto;
179
  -webkit-background-size: 60% auto;
180
  -ms-background-size: 60% auto;
181
  -o-background-size: 60% auto;
182
  background-size: 60% auto;
183
}
184

185
#step-3 {
186
  position: absolute;
187
  top: 0;
188
  right: 0;
189
  bottom: 0;
190
  left: 0;
191
  background: black;
192
}
193

194
#step-3 #progressbar {
195
  position: absolute;
196
  top: 0;
197
  right: auto;
198
  bottom: 0;
199
  left: 0;
200
  width: 0%;
201
  background: white;
202
}
203

204
#step-5 {
205
  position: absolute;
206
  top: 0;
207
  right: 0;
208
  bottom: 0;
209
  left: 0;
210
  background: black;
211
  text-align: center;
212
  padding: 100px 20px;
213
  color: white;
214
  font-size: 2em;
215
}
216

217
#step-5 #time {
218
  font-size: 4em
219
}
220

221
#leapinfo {
222
  position: absolute;
223
  top: 0;
224
  right: 0;
225
  bottom: 0;
226
  left: 0;
227
  background: rgba(0,0,0,0.8);
228
  color: white;
229
  text-align: center;
230
  font-size: 3em;
231
  padding-top: 200px;
232
  z-index: 999999;
233
}
234

235
#credits {
236
  position: absolute;
237
  top: 0;
238
  right: 0;
239
  bottom: 0;
240
  left: 0;
241
  z-index: 9999;
242
  background: black;
243
  overflow-y: auto;
244
  text-align: center;
245
  color: white;
246
  font-size: 1.1em;
247
  padding: 40px 20px;
248
}
249

250
#credits h3 {
251
  font-size: 2em;
252
  color: #666;
253
}
254

255
#credits b {
256
  font-size: 1.2em;
257
  color: #bbb;
258
}
259

260
#credits h4 {
261
  color: #555;
262
  font-size: 1.2em;
263
}
264

265