1
#app-store-interstitial {
2
  overflow: hidden;
3
  position: absolute;
4
  font-family: EditUndoBrk;
5
  color: #fff;
6
  -webkit-touch-callout: none; /* iOS Safari */
7
  -webkit-user-select: none; /* Safari */
8
  -khtml-user-select: none; /* Konqueror HTML */
9
  -moz-user-select: none; /* Firefox */
10
  -ms-user-select: none; /* Internet Explorer/Edge */
11
  user-select: none; /* Non-prefixed version, currently
12
                                  supported by Chrome and Opera */
13
}
14

15
#app-store-interstital img {
16
  image-rendering: pixelated;
17
}
18

19
#app-store-interstitial img.smooth {
20
  image-rendering: initial;
21
}
22

23
#app-store-interstitial .container {
24
  position: absolute;
25
  left: 0;
26
  top: 0;
27
  width: 100%;
28
  height: 100%;
29
  display: flex;
30
  flex-direction: column;
31
  justify-content: center;
32
  align-items: center;
33
}
34

35
@media (orientation: portrait) {
36
  .landscape-only {
37
    display: none;
38
  }
39
}
40

41
@media (orientation: landscape) {
42
  .portrait-only {
43
    display: none;
44
  }
45
}
46

47
/* Screen 1 */
48

49
#screen-1 #side-characters {
50
  height: 100%;
51
  position: absolute;
52
  right: -5%;
53
  top: 0;
54
}
55

56
#screen-1 .center {
57
  display: flex;
58
  flex-direction: row;
59
  justify-content: center;
60
  align-items: center;
61
  width: 90%;
62
  margin: 7% 0;
63
}
64

65
#screen-1 .bottom {
66
  width: 100%;
67
  text-align: center;
68
}
69

70
#screen-1 .bottom img {
71
  width: 30%;
72
  max-width: 600px;
73
}
74

75
#screen-1 .usp-list {
76
  width: 40%;
77
  font-size: 1em;
78
  margin: 0;
79
  list-style: none;
80
  padding: 0 0 0 4%;
81
}
82

83
#screen-1 .usp-list li {
84
  margin: 5% 0;
85
}
86

87
#screen-1 .usp-list li img {
88
  display: inline-block;
89
  margin-right: 5%;
90
  width: 7%;
91
}
92

93
#screen-1 .usp-list .text {
94
  display: inline-block;
95
  width: 88%;
96
  vertical-align: middle;
97
}
98

99
#screen-1 h2 {
100
  font-size: 1.75em;
101
  text-align: center;
102
  line-height: 1.2em;
103
}
104

105
#screen-1 .crossy-road-app-icon {
106
  width: 24%;
107
}
108

109
#screen-1 .pixel-arrow {
110
  width: 5%;
111
  margin: 0 4%;
112
}
113

114
#screen-1 .pixel-device {
115
  width: 10%;
116
}
117

118
@media (orientation: portrait) {
119
  #screen-1 .bottom img {
120
    width: 70%;
121
  }
122

123
  #side-characters {
124
    display: none;
125
  }
126

127
  #screen-1 h2 {
128
    font-size: 2.5em;
129
    margin-bottom: 0;
130
  }
131

132
  #screen-1 .usp-list {
133
    width: 70%;
134
    font-size: 1.75em;
135
    margin: 2% 0;
136
    padding: 0;
137
  }
138

139
  #screen-1 .center {
140
    margin: 4% 0;
141
  }
142
}
143

144
/* Screen 2 */
145

146
#screen-2 h2 {
147
  font-size: 1.5em;
148
  line-height: 1.3em;
149
  text-align: center;
150
  margin: 0 6%;
151
}
152

153
#screen-2.container {
154
  justify-content: center;
155
}
156

157
#screen-2 .top {
158
  display: flex;
159
  flex-direction: row;
160
  align-items: center;
161
  justify-content: center;
162
  width: 90%;
163
}
164

165
#screen-2 .pixel-phone {
166
  width: 7%;
167
}
168

169
#screen-2 .pixel-tablet {
170
  width: 13%;
171
}
172

173
#screen-2 .bottom {
174
  position: relative;
175
  text-align: center;
176
  width: 80%;
177
  margin-top: 8%;
178
}
179

180
#screen-2 .search-bar {
181
  width: 100%;
182
}
183

184
#screen-2 #poki-text {
185
  position: absolute;
186
  left: 7%;
187
  color: #36b5e8;
188
  top: 50%;
189
  font-size: 2em;
190
  margin-top: -0.65em;
191
}
192

193
#screen-2 .hand {
194
  position: absolute;
195
  transform: rotate(-5deg);
196
  bottom: -25%;
197
  right: -3%;
198
  width: 30%;
199
}
200

201
#screen-2 #type-cursor {
202
  color: #ffd522;
203
  margin-left: 2%;
204
  animation: blink-animation 1s steps(2, start) infinite;
205
}
206

207
@keyframes blink-animation {
208
  to {
209
    visibility: hidden;
210
  }
211
}
212

213
/* Screen 3 */
214

215
#screen-3 .phone {
216
  width: 80%;
217
  transform: rotate(-5deg);
218
}
219

220
#screen-3 .hand {
221
  position: absolute;
222
  transform: rotate(-12deg);
223
  bottom: -25%;
224
  right: 10%;
225
  width: 40%;
226
}
227

228
/* Screen 4 */
229

230
#screen-4 .top {
231
  display: flex;
232
  flex-direction: row;
233
  align-items: center;
234
  justify-content: center;
235
}
236

237
#screen-4 .top .left {
238
  width: 20%;
239
  margin-right: 5%;
240
}
241

242
#screen-4 .top .right {
243
  width: 20%;
244
}
245

246
#screen-4 .crossy-road-app-icon,
247
#screen-4 .crossy-road-logo,
248
#screen-4 .hipster-whale-logo {
249
  width: 100%;
250
}
251

252
#screen-4 .crossy-road-logo {
253
  margin-bottom: 5%;
254
}
255

256
#screen-4 .center {
257
  display: flex;
258
  flex-direction: row;
259
  align-items: center;
260
  justify-content: center;
261
  width: 100%;
262
  margin: 7% 0;
263
}
264

265
#screen-4 .center img {
266
  display: inline-block;
267
  width: 60%;
268
}
269

270
#screen-4 .center .pixel-arrow {
271
  margin: 0 3%;
272
  width: 3%;
273
}
274

275
#screen-4 .center .pixel-device {
276
  width: 6%;
277
}
278

279
#screen-4 .bottom {
280
  width: 100%;
281
  text-align: center;
282
}
283

284
#screen-4 .bottom img {
285
  width: 20%;
286
}
287