apeiro

1
@media(max-width: 1000px){
2
  .triangle{
3
    scale: .85;
4
  }
5
}
6
@media(max-width: 700px){
7
  footer{
8
    -ms-grid-columns: 100%;
9
    grid-template-columns: 100%;
10
    height: 268px;
11
    padding: 40px 5%;
12
  }
13
  .info::after{
14
    height: 0;
15
    width: 80vw;
16
    position: absolute;
17
    right: 5vw;
18
    top: 100px;
19
    border: 2px solid white;
20
  }
21
  .moon{
22
    bottom: 268px;
23
  }
24
  .footerLogo{
25
    height: 80px;
26
  }
27
  .info > span:nth-child(1){
28
    margin-bottom: 5px;
29
    margin-top: 0;
30
  }
31
  .info > span:nth-child(2){
32
    position: relative;
33
    top: -20px;
34
  }
35
  .sponsor{
36
    max-height: 60px;
37
  }
38
}
39
@media(max-width: 650px){
40
  .girl{
41
    left: -8vw;
42
  }
43
  .arrow{
44
    bottom: calc(100vw/4);
45
  }
46
  .contact > h1{
47
    font-size: calc(100vw/10);
48
    bottom: calc(100vw/3);
49
  }
50
  #price > .side{
51
    scale: 0.7;
52
  }
53
  .coin, .owl{
54
    display: none;
55
  }
56
}
57
@media(max-width: 500px){
58
  .container,.search__input,form{
59
    max-width: 40vw
60
  }
61
  .pluses > .plusesH{
62
    text-align: left !important;
63
  }
64
  .contact > h1{
65
    font-size: calc(100vw/8);
66
    bottom: calc(100vw/2.5 - 10px);
67
  }
68
  .navButton{
69
    display: none;
70
  }
71
  .container{
72
    display: initial;
73
    max-width: 40vw !important;
74
    position: absolute;
75
    top: 12px;
76
    right: 12px;
77
  }
78
  nav{
79
    -ms-grid-columns: 25% 75%;
80
    grid-template-columns: 25% 75%;
81
  }
82
  .aboutH{
83
    font-size: 20px;
84
    top: 20px;
85
  }
86
  #price > h3{
87
    margin: 30px 0 0 0;
88
  }
89
}
90
@media(max-width: 430px){
91
  .arrow, .ico{
92
    scale: 0.8;
93
  }
94
  .ico{
95
    bottom: -20px;
96
  }
97
  #su{
98
    grid-gap: initial;
99
  }
100
  .ico:hover, .ico:focus{
101
    bottom: -15px;
102
  }
103
  .intro .apo{
104
    display: none;
105
  }
106
  .textWrapper{
107
    -ms-grid-column: 1;
108
    -ms-grid-column-span: 2;
109
    grid-column: 1/3;
110
    margin: 0 auto;
111
  }
112
}
113
@media(max-width: 360px){
114
  #more{
115
    margin: 60px auto;
116
  }
117
}
118
@media(max-width: 340px){
119
  .itemImg{
120
    scale: 0.65;
121
    max-width: 100%;
122
    height: auto;
123
    max-height: 200px;
124
    margin: auto 0 0 auto;
125
  }
126
  .switch{
127
    height: 35px;
128
    width: 35px;
129
  }
130
  #item > p{
131
    grid-column: 1/4;
132
  }
133
  .prev{
134
    top: 170px;
135
    left: min(-20vw, -100px);
136
  }
137
  .next{
138
    top: -249px;
139
    right: min(-20vw, -100px);
140
  }
141
  .arrow, .ico{
142
    scale: 0.7;
143
  }
144
  .ico{
145
    bottom: -30px;
146
  }
147
  #su{
148
    grid-gap: 0;
149
    -ms-grid-columns: 45px 0 45px 0 45px 0 45px 0 45px;
150
    grid-template-columns: repeat(5, 45px);
151
  }
152
  .ico:hover, .ico:focus{
153
    bottom: -25px;
154
  }
155
  .plusSmallMargin{
156
    margin: 10vw;
157
  }
158
  .slogan::before{
159
    left: 10px;
160
  }
161
  .slogan::after{
162
    right: 10px;
163
  }
164
  #ap{
165
    bottom: -10px;
166
    margin-bottom: -5px;
167
  }
168
}
169
@media(max-width: 280px){
170
  #more{
171
    margin-top: 100px;
172
  }
173
}
174

175
@media(prefers-reduced-motion: no-preference){
176
  *{
177
    cursor: none;
178
  }
179
  @keyframes slideIn{
180
    from{
181
      opacity: 0;
182
      transform: translateX(-100%);
183
    }
184
    to{
185
      opacity: 1;
186
      transform: translateX(0);
187
    }
188
  }
189
  @-webkit-keyframes slideIn{
190
    from{
191
      opacity: 0;
192
      transform: translateX(-100%);
193
    }
194
    to{
195
      opacity: 1;
196
      transform: translateX(0);
197
    }
198
  }
199
  @keyframes slideOut{
200
    from{
201
      opacity: 1;
202
      transform: translateX(0);
203
    }
204
    to{
205
      opacity: 0;
206
      transform: translateX(100%);
207
    }
208
  }
209
  @-webkit-keyframes slideOut{
210
    from{
211
      opacity: 1;
212
      transform: translateX(0);
213
    }
214
    to{
215
      opacity: 0;
216
      transform: translateX(100%);
217
    }
218
  }
219
  @-webkit-keyframes unhide{
220
    from{
221
      height: 0;
222
      opacity: 0;
223
    }
224
    to{
225
      height: auto;
226
      opacity: 1;
227
    }
228
  }
229
  @keyframes unhide{
230
    from{
231
      height: 0;
232
      opacity: 0;
233
    }
234
    to{
235
      height: auto;
236
      opacity: 1;
237
    }
238
  }
239
  @-webkit-keyframes moveTriangle{
240
    0%{
241
      -webkit-transform: translateY(0) rotate(-15deg);
242
              transform: translateY(0) rotate(-15deg);
243
    }
244
    50%{
245
      -webkit-transform: translateY(-8px) rotate(-18deg);
246
              transform: translateY(-8px) rotate(-18deg);
247
    }
248
    100%{
249
      -webkit-transform: translateY(0) rotate(-15deg);
250
              transform: translateY(0) rotate(-15deg);
251
    }
252
  }
253
  @keyframes moveTriangle{
254
    0%{
255
      -webkit-transform: translateY(0) rotate(-15deg);
256
              transform: translateY(0) rotate(-15deg);
257
    }
258
    50%{
259
      -webkit-transform: translateY(-8px) rotate(-18deg);
260
              transform: translateY(-8px) rotate(-18deg);
261
    }
262
    100%{
263
      -webkit-transform: translateY(0) rotate(-15deg);
264
              transform: translateY(0) rotate(-15deg);
265
    }
266
  }
267
  @-webkit-keyframes moveUpDown{
268
    0%{
269
      -webkit-transform: translateY(0) rotate(0deg);
270
              transform: translateY(0) rotate(0deg);
271
    }
272
    50%{
273
      -webkit-transform: translateY(8px) rotate(2deg);
274
              transform: translateY(8px) rotate(2deg);
275
    }
276
    100%{
277
      -webkit-transform: translateY(0) rotate(0deg);
278
              transform: translateY(0) rotate(0deg);
279
    }
280
  }
281
  @keyframes moveUpDown{
282
    0%{
283
      -webkit-transform: translateY(0) rotate(0deg);
284
              transform: translateY(0) rotate(0deg);
285
    }
286
    50%{
287
      -webkit-transform: translateY(8px) rotate(2deg);
288
              transform: translateY(8px) rotate(2deg);
289
    }
290
    100%{
291
      -webkit-transform: translateY(0) rotate(0deg);
292
              transform: translateY(0) rotate(0deg);
293
    }
294
  }
295
  @-webkit-keyframes moveApeiro{
296
    0%{
297
      -webkit-transform: translateY(0) rotate(0deg);
298
              transform: translateY(0) rotate(0deg);
299
    }
300
    50%{
301
      -webkit-transform: translateY(10px) rotate(0deg);
302
              transform: translateY(10px) rotate(0deg);
303
    }
304
    100%{
305
      -webkit-transform: translateY(0) rotate(0deg);
306
              transform: translateY(0) rotate(0deg);
307
    }
308
  }
309
  @keyframes moveApeiro{
310
    0%{
311
      -webkit-transform: translateY(0) rotate(0deg);
312
              transform: translateY(0) rotate(0deg);
313
    }
314
    50%{
315
      -webkit-transform: translateY(10px) rotate(0deg);
316
              transform: translateY(10px) rotate(0deg);
317
    }
318
    100%{
319
      -webkit-transform: translateY(0) rotate(0deg);
320
              transform: translateY(0) rotate(0deg);
321
    }
322
  }
323
  @-webkit-keyframes moveAngle1{
324
    0%{
325
      -webkit-transform: translate(0, 0) rotate(0deg);
326
              transform: translate(0, 0) rotate(0deg);
327
    }
328
    25%{
329
      -webkit-transform: translate(-2px, -3px) rotate(-3deg);
330
              transform: translate(-2px, -3px) rotate(-3deg);
331
    }
332
    50%{
333
      -webkit-transform: translate(0, 0) rotate(0deg);
334
              transform: translate(0, 0) rotate(0deg);
335
    }
336
    75%{
337
      -webkit-transform: translate(3px, 2px) rotate(3deg);
338
              transform: translate(3px, 2px) rotate(3deg);
339
    }
340
    100%{
341
      -webkit-transform: translate(0, 0) rotate(0deg);
342
              transform: translate(0, 0) rotate(0deg);
343
    }
344
  }
345
  @keyframes moveAngle1{
346
    0%{
347
      -webkit-transform: translate(0, 0) rotate(0deg);
348
              transform: translate(0, 0) rotate(0deg);
349
    }
350
    25%{
351
      -webkit-transform: translate(-2px, -3px) rotate(-3deg);
352
              transform: translate(-2px, -3px) rotate(-3deg);
353
    }
354
    50%{
355
      -webkit-transform: translate(0, 0) rotate(0deg);
356
              transform: translate(0, 0) rotate(0deg);
357
    }
358
    75%{
359
      -webkit-transform: translate(3px, 2px) rotate(3deg);
360
              transform: translate(3px, 2px) rotate(3deg);
361
    }
362
    100%{
363
      -webkit-transform: translate(0, 0) rotate(0deg);
364
              transform: translate(0, 0) rotate(0deg);
365
    }
366
  }
367
  @-webkit-keyframes moveAngle2{
368
    0%{
369
      -webkit-transform: translate(0, 0) rotate(0deg);
370
              transform: translate(0, 0) rotate(0deg);
371
    }
372
    25%{
373
      -webkit-transform: translate(2px, 3px) rotate(3deg);
374
              transform: translate(2px, 3px) rotate(3deg);
375
    }
376
    50%{
377
      -webkit-transform: translate(0, 0) rotate(0deg);
378
              transform: translate(0, 0) rotate(0deg);
379
    }
380
    75%{
381
      -webkit-transform: translate(-3px, -2px) rotate(-3deg);
382
              transform: translate(-3px, -2px) rotate(-3deg);
383
    }
384
    100%{
385
      -webkit-transform: translate(0, 0) rotate(0deg);
386
              transform: translate(0, 0) rotate(0deg);
387
    }
388
  }
389
  @keyframes moveAngle2{
390
    0%{
391
      -webkit-transform: translate(0, 0) rotate(0deg);
392
              transform: translate(0, 0) rotate(0deg);
393
    }
394
    25%{
395
      -webkit-transform: translate(2px, 3px) rotate(3deg);
396
              transform: translate(2px, 3px) rotate(3deg);
397
    }
398
    50%{
399
      -webkit-transform: translate(0, 0) rotate(0deg);
400
              transform: translate(0, 0) rotate(0deg);
401
    }
402
    75%{
403
      -webkit-transform: translate(-3px, -2px) rotate(-3deg);
404
              transform: translate(-3px, -2px) rotate(-3deg);
405
    }
406
    100%{
407
      -webkit-transform: translate(0, 0) rotate(0deg);
408
              transform: translate(0, 0) rotate(0deg);
409
    }
410
  }
411
  @-webkit-keyframes coinRotate{
412
    0%{
413
      -webkit-transform: rotate(0deg) translate(-80px, 170px);
414
              transform: rotate(0deg) translate(-80px, 170px);
415
    }
416
    45%{
417
      -webkit-transform: rotate(-15deg) translate(-130px, 125px);
418
              transform: rotate(-15deg) translate(-130px, 125px);
419
    }
420
    55%{
421
      -webkit-transform: rotate(-15deg) translate(-130px, 125px);
422
              transform: rotate(-15deg) translate(-130px, 125px);
423
    }
424
    100%{
425
      -webkit-transform: rotate(0deg) translate(-80px, 170px);
426
              transform: rotate(0deg) translate(-80px, 170px);
427
    }
428
  }
429
  @keyframes coinRotate{
430
    0%{
431
      -webkit-transform: rotate(0deg) translate(-80px, 170px);
432
              transform: rotate(0deg) translate(-80px, 170px);
433
    }
434
    45%{
435
      -webkit-transform: rotate(-15deg) translate(-130px, 125px);
436
              transform: rotate(-15deg) translate(-130px, 125px);
437
    }
438
    55%{
439
      -webkit-transform: rotate(-15deg) translate(-130px, 125px);
440
              transform: rotate(-15deg) translate(-130px, 125px);
441
    }
442
    100%{
443
      -webkit-transform: rotate(0deg) translate(-80px, 170px);
444
              transform: rotate(0deg) translate(-80px, 170px);
445
    }
446
  }
447
}