Browse code

Progress

Benjamin Roth authored on14/12/2022 00:09:31
Showing1 changed files
1 1
deleted file mode 100644
... ...
@@ -1,709 +0,0 @@
1
-@if not-imported("import_once_func") { @import "inc/import_once_func"; }
2
-//@import "inc/normalize.css"; // Normalize browser defaults
3
-
4
-@if not-imported("framework") { @import "inc/framework"; } // Load framework
5
-
6
-/* ------ COMMON CLASSES ------ */
7
-@if not-imported("common") { @import "inc/common"; }
8
-/* ------ BASE FONT STYLING ------ */
9
-@if not-imported("font") { @import "inc/font"; }
10
-/* ------ BASE FORM STYLING ------ */
11
-@if not-imported("form") { @import "inc/form"; }
12
-/* ------ CUSTOM ELEMENTS ------ */
13
-@if not-imported("custom-elements") { @import "inc/custom-elements"; }
14
-
15
-html {
16
-  height: 100%;
17
-}
18
-
19
-#logo {
20
-  position: absolute;
21
-  max-width: 35%;
22
-  left: 35px;
23
-  top: 25px;
24
-  width: 215px;
25
-
26
-  svg {
27
-    width: 100%;
28
-    vertical-align: middle;
29
-  }
30
-
31
-  @include for-mobile {
32
-    max-width: 20%;
33
-    left: 25px;
34
-    top: 15px;
35
-  }
36
-}
37
-
38
-.background-wrapper {
39
-  display: flex;
40
-  align-items: center;
41
-  height: 100%;
42
-
43
-  .background-wrapper-helper,
44
-  .background-wrapper-inner {
45
-    width: 100%;
46
-  }
47
-
48
-  .background-wrapper-inner {
49
-    width: 100%;
50
-    text-align: center;
51
-    padding: 100px 0;
52
-    /*flex: 0 0 auto;
53
-    width: 100%;
54
-    display: flex;
55
-    align-items: center;
56
-    justify-content: center;
57
-    flex-direction: column;*/
58
-  }
59
-}
60
-
61
-.teaser,
62
-.form {
63
-  max-width: 100%;
64
-  margin: 0 auto;
65
-
66
-  &.form {
67
-    //background: rgba(#fff,0.1);
68
-    padding: 40px 0 20px;
69
-    text-align: right;
70
-  }
71
-
72
-  @include for-max-size(1400px) {
73
-    width: 66%;
74
-  }
75
-
76
-  @include for-mobile {
77
-    width: auto;
78
-    padding-left: 25px !important;
79
-    padding-right: 25px !important;
80
-  }
81
-
82
-  .more,
83
-  .goto {
84
-    margin-top: 3em;
85
-    font-size: $font-size-default;
86
-    padding-bottom: 1.5em;
87
-    a {
88
-      @include button($color: $color-text-invert, $border-color: $color-text-invert, $background-color: transparent, $background-color-hover: transparent);
89
-      letter-spacing: 0.1em;
90
-      font-weight: 400;
91
-      height: 30px;
92
-      line-height: 20px;
93
-      padding: 3px 10px;
94
-      overflow: hidden;
95
-      z-index: 0;
96
-      text-transform: none;
97
-    }
98
-  }
99
-}
100
-.slideMeta {
101
-  .number {
102
-    position: absolute;
103
-    font-family: $font-family-alternate;
104
-    font-size: 535px;
105
-    left: 0;
106
-    top: 50%;
107
-    @include transform(translate(-33%, -50%));
108
-    opacity: .1;
109
-
110
-    @include for-max-size(1200px) {
111
-      font-size: 42vw;
112
-    }
113
-  }
114
-
115
-  .display {
116
-    position: absolute;
117
-    font-family: $font-family-handwriting;
118
-    font-size: 54px;
119
-    left: 0;
120
-    bottom: 50%;
121
-    @include transform(translateY(35vh));
122
-    opacity: .4;
123
-
124
-    @include for-max-size(1200px) {
125
-      font-size: 5vw;
126
-    }
127
-
128
-    @include for-mobile {
129
-      font-size: 30px;
130
-    }
131
-  }
132
-}
133
-
134
-.content-modal,
135
-.content-modal-transparent {
136
-  color: $color-text-invert;
137
-  font-family: $font-family;
138
-  font-size: font-size(18px);
139
-  font-weight: 300;
140
-  line-height: 1.3;
141
-  display: block;
142
-  position: fixed;
143
-  top: 0;
144
-  right: 0;
145
-  bottom: 0;
146
-  left: 0;
147
-  z-index: 10;
148
-  padding: 15px;
149
-  opacity: 0;
150
-  visibility: hidden;
151
-  background-color: rgba(0, 0, 0, 0.25);
152
-  @include box-sizing(border-box);
153
-  @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
154
-
155
-  body > & {
156
-    z-index: 1000;
157
-  }
158
-
159
-  h1,h2,h3,h4,h5,h6 {
160
-    color: $color-headline;
161
-    line-height: 1;
162
-  }
163
-
164
-  &.-show {
165
-    opacity: 1;
166
-    visibility: visible;
167
-    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
168
-
169
-    .full-content {
170
-      @include transform(translateX(0));
171
-      @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
172
-    }
173
-  }
174
-
175
-  .image_container {
176
-    &.float_above {
177
-      margin: 0 0 2rem 0;
178
-    }
179
-  }
180
-
181
-  .full-content {
182
-    @include box-sizing(border-box);
183
-    @include transform(translateX(100%));
184
-    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
185
-    position: absolute;
186
-    max-width: 100vw;
187
-
188
-    :not(.content-modal-transparent)& {
189
-      top: 0;
190
-      right: 0;
191
-      bottom: 0;
192
-      width: 650px;
193
-      text-align: center;
194
-      background-color: #000;
195
-      padding: 50px 45px 50px 60px;
196
-      overflow: hidden;
197
-    }
198
-
199
-    .content-modal-transparent& {
200
-      top: 50%;
201
-      right: auto;
202
-      bottom: auto;
203
-      left: 50%;
204
-      width: 1200px;
205
-      max-height: 100vh;
206
-      //max-height: -webkit-fill-available;
207
-      max-height: calc(100vh - 80px);
208
-      background-color: rgba(#000,0.8);
209
-      @include box-shadow(0 0 50px 10px #000);
210
-      padding: 80px 40px 60px;
211
-      overflow: hidden;
212
-      @include transform(translate(-50%,-50%));
213
-    }
214
-
215
-    .scrollcontent {
216
-      :not(.content-modal-transparent)& {
217
-        position: absolute;
218
-        top: 60px;
219
-        right: 60px;
220
-        bottom: 60px;
221
-        left: 60px;
222
-        padding: 10px 15px 10px 0;
223
-        max-height: calc(100vh - 100px);
224
-      }
225
-      @include box-sizing(border-box);
226
-      max-height: 100vh;
227
-      max-height: calc(100vh - 140px);
228
-      overflow-y: auto;
229
-    }
230
-
231
-    .close-modal {
232
-      position: absolute;
233
-      top: 15px;
234
-      left: 15px;
235
-      width: 30px;
236
-      height: 30px;
237
-      background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
238
-      //border: 1px $color-text solid;
239
-      cursor: pointer;
240
-
241
-      &:hover {
242
-        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BA0C2F' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
243
-      }
244
-
245
-      .content-modal-transparent& {
246
-        left: 50%;
247
-        @include transform(translateX(-50%));
248
-      }
249
-    }
250
-  }
251
-
252
-  .ce_hyperlink {
253
-    font-size: font-size(14px);
254
-    font-family: $font-family;
255
-    font-weight: 600;
256
-    letter-spacing: 0.1em;
257
-    text-transform: uppercase;
258
-    white-space: nowrap;
259
-
260
-    a {
261
-      display: inline-block;
262
-      color: $color-text;
263
-      padding: 10px 30px 10px 20px;
264
-      position: relative;
265
-      @include transition(all 0.25s ease);
266
-      border: 1px $color-link solid;
267
-      background-color: #000;
268
-
269
-      &:before {
270
-        position: absolute;
271
-        right: 0.5em;
272
-        top: 50%;
273
-        margin-top: -0.5em;
274
-        font-size: 1.25em;
275
-        width: 1em;
276
-        height: 1em;
277
-        content: '';
278
-        background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
279
-      }
280
-
281
-      &:hover {
282
-        color: $color-link;
283
-      }
284
-    }
285
-
286
-    &.alternate {
287
-      font-size: font-size(20px);
288
-      letter-spacing: normal;
289
-      font-family: $font-family-alternate;
290
-      text-transform: none;
291
-      font-weight: 700;
292
-
293
-      a {
294
-        background: none;
295
-        border: none;
296
-        padding: 0;
297
-        border-bottom: 2px $color-text solid;
298
-
299
-        &:before {
300
-          display: none;
301
-        }
302
-      }
303
-    }
304
-
305
-  }
306
-}
307
-
308
-#vertical-navigation {
309
-  opacity: 1;
310
-  visibility: visible;
311
-  @include transition(all 0.25s ease-out);
312
-  .mod_articlelist {
313
-    position: fixed;
314
-    right: 25px;
315
-    top: 50%;
316
-    width: 30px;
317
-    height: 50vh;
318
-    margin-top: -25vh;
319
-    z-index: 1000;
320
-
321
-    ul {
322
-      display: flex;
323
-      flex-direction: column;
324
-      justify-content: center;
325
-      height: 100%;
326
-    }
327
-
328
-    li.-hide {
329
-      display: none;
330
-    }
331
-
332
-    li:not(.-hide) {
333
-      flex: 3 3 0;
334
-      padding: 5px 0;
335
-
336
-      &.-small {
337
-        flex: 1 1 0;
338
-      }
339
-
340
-      &:first-child {
341
-        padding-top: 0;
342
-      }
343
-      &:last-child {
344
-        padding-bottom: 0;
345
-      }
346
-
347
-      a {
348
-        display: block;
349
-        position: relative;
350
-        height: 100%;
351
-        width: 100%;
352
-        background: #fff;
353
-        line-height: 1;
354
-        font-size: 0;
355
-        opacity: .35;
356
-        @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
357
-        @include transition(none);
358
-
359
-        div {
360
-          opacity: 0;
361
-          visibility: hidden;
362
-          position: absolute;
363
-          right: 100%;
364
-          top: 2px;
365
-          color: $color-text-invert;
366
-          text-transform: lowercase;
367
-          font-size: font-size(16px);
368
-          font-weight: 400;
369
-          padding-top: 3px;
370
-          padding-right: 2px;
371
-          @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
372
-          @include transform(translate(0, 15px));
373
-
374
-          &:before {
375
-            position: absolute;
376
-            left: 0;
377
-            bottom: 100%;
378
-            right: -10px;
379
-            height: 2px;
380
-            background-color: $color-link;
381
-            content: '';
382
-          }
383
-
384
-          .label-holder {
385
-            line-height: 1.3;
386
-            color: $color-text;
387
-            width: 150px;
388
-            min-height: 2.6em;
389
-            display: flex;
390
-            align-items: center;
391
-            background-color: $color-bg-senary;
392
-            padding: 5px;
393
-
394
-            .label {
395
-              flex: 1 0 0;
396
-              text-align: center;
397
-            }
398
-          }
399
-        }
400
-
401
-        &:hover,
402
-        &.active {
403
-          background: $color-bg-secondary;
404
-
405
-          &:before {
406
-            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
407
-            -webkit-background-size: 100% 100%;
408
-            background-size: 100% 100%;}
409
-
410
-          &:after {
411
-            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
412
-            -webkit-background-size: 100% 100%;
413
-            background-size: 100% 100%;}
414
-        }
415
-        &:hover {
416
-          div {
417
-            opacity: 1;
418
-            visibility: visible;
419
-            @include transform(translate(0,0));
420
-          }
421
-        }
422
-
423
-        &:before {
424
-          position: absolute;
425
-          left:0;
426
-          right: 0;
427
-          bottom: 100%;
428
-          height: 10px;
429
-          content: '';
430
-          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
431
-          -webkit-background-size: 100% 100%;
432
-          background-size: 100% 100%;
433
-        }
434
-
435
-        &:after {
436
-          position: absolute;
437
-          left:0;
438
-          right: 0;
439
-          top: 100%;
440
-          height: 10px;
441
-          content: '';
442
-          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
443
-          -webkit-background-size: 100% 100%;
444
-          background-size: 100% 100%;
445
-        }
446
-      }
447
-
448
-      &:first-child {
449
-        a {
450
-          &:before {
451
-            display: none;
452
-          }
453
-        }
454
-      }
455
-    }
456
-
457
-    @include for-mobile {
458
-      right: 15px;
459
-      top: 50%;
460
-      width: 20px;
461
-    }
462
-  }
463
-}
464
-
465
-
466
-
467
-/**
468
- * CURTAIN
469
- */
470
-
471
-#curtainstage {
472
-  position: absolute;
473
-  top: 0;
474
-  left: 0;
475
-  width: 100%;
476
-  height: 100%;
477
-  overflow: hidden;
478
-  /*background-color: rgb(0,0,0);
479
-  box-shadow: 0 0 0 2px white inset;*/
480
-}
481
-#curtain {
482
-  top: 0;
483
-  left: 0;
484
-  width: 100%;
485
-  height: 100%;
486
-  background: transparent;
487
-}
488
-
489
-#curtain .left,
490
-#curtain .right {
491
-  position: absolute;
492
-  top: 0;
493
-  width: 50%;
494
-  height: 100%;
495
-  //filter: brightness(120%);
496
-  background-image: url("/files/pub/Landingpage/Wein/curtain_rot.svg");
497
-  background-size: cover;
498
-  background-repeat: no-repeat;
499
-}
500
-
501
-#curtain .left {
502
-  left: 0;
503
-  transform-origin: top right;
504
-}
505
-#curtain .right {
506
-  left: 50%;
507
-  transform-origin: top left;
508
-}
509
-
510
-/* **********
511
-	opening
512
-********** */
513
-
514
-#curtainstage {
515
-	animation-name: curtain-remove;
516
-	animation-duration: 4s;
517
-	animation-fill-mode: forwards;
518
-}
519
-
520
-#curtain.open .left,
521
-#curtain.open .right {
522
-  filter: brightness(100%);
523
-}
524
-#curtain.open .left {
525
-  animation-fill-mode: forwards;
526
-  animation-name: curtain-opening, left-curtain-opening;
527
-  animation-duration: 2s, 4s;
528
-  animation-timing-function: ease-in-out, ease-in-out;
529
-  animation-delay: 0s, 0s;
530
-  animation-iteration-count: 1, 1;
531
-  animation-direction: normal, normal;
532
-}
533
-#curtain.open .right {
534
-  animation-fill-mode: forwards;
535
-  animation-name: curtain-opening, right-curtain-opening;
536
-  animation-duration: 2s, 4s;
537
-  animation-timing-function: ease-in-out, ease-in-out;
538
-  animation-delay: 0s, 0s;
539
-  animation-iteration-count: 1, 1;
540
-  animation-direction: normal, normal;
541
-}
542
-
543
-/* **********
544
-	animations
545
-********** */
546
-
547
-@keyframes curtain-remove { /* 2s */
548
-  from { visibility: visible; }
549
-  to { visibility: hidden; }
550
-}
551
-
552
-@keyframes curtain-opening { /* 2s */
553
-  from { filter: brightness(100%); }
554
-  to { filter: brightness(100%); }
555
-}
556
-
557
-@keyframes left-curtain-opening { /* 4s */
558
-  from { transform: translate(0) rotate(0) scale(1,1); }
559
-  to { transform: translate(-100%) rotate(20deg) scale(0,2); }
560
-}
561
-
562
-@keyframes right-curtain-opening { /* 4s */
563
-  from { transform: translate(0) rotate(0) scale(1,1); }
564
-  to { transform: translate(100%) rotate(-20deg) scale(0,2); }
565
-}
566
-
567
-.ce_gallery {
568
-  &.-references {
569
-    ul {
570
-      justify-content: center;
571
-
572
-     > li {
573
-       flex: 0 1 31.666%;
574
-       margin-bottom: 25px;
575
-       min-width: 150px;
576
-       figure {
577
-         text-align: center;
578
-       }
579
-     }
580
-    }
581
-  }
582
-}
583
-
584
-.background-wrapper{
585
-  .fp-section:not(:last-child) & {
586
-    .overlay {
587
-      &:before {
588
-        background-image: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' stroke='none' fill='%23FFFFFF' viewBox='0 0 64 64'%3E%3Cpath d='M45.5,13.5c0,-7.451 -6.049,-13.5 -13.5,-13.5c-7.451,0 -13.5,6.049 -13.5,13.5l0,21c0,7.451 6.049,13.5 13.5,13.5c7.451,0 13.5,-6.049 13.5,-13.5l0,-21Zm-1.047,0l-0,21c-0,6.873 -5.58,12.453 -12.453,12.453c-6.873,-0 -12.453,-5.58 -12.453,-12.453l0,-21c0,-6.873 5.58,-12.453 12.453,-12.453c6.873,0 12.453,5.58 12.453,12.453Z'/%3E%3Cpath d='M34,8.5c0,-1.104 -0.896,-2 -2,-2c-1.104,0 -2,0.896 -2,2l0,6c0,1.104 0.896,2 2,2c1.104,0 2,-0.896 2,-2l0,-6Zm-1.047,0l-0,6c-0,0.526 -0.427,0.953 -0.953,0.953c-0.526,-0 -0.953,-0.427 -0.953,-0.953c0,-0 0,-6 0,-6c0,-0.526 0.427,-0.953 0.953,-0.953c0.526,0 0.953,0.427 0.953,0.953Z'/%3E%3Cpath d='M18.318,50.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3Cpath d='M18.318,55.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3C/svg%3E");
589
-        width: 64px;
590
-        height: 64px;
591
-        content: '';
592
-        position: absolute;
593
-        bottom: 2rem;
594
-        left: 50%;
595
-        margin-left: -32px;
596
-        opacity: 0;
597
-      }
598
-    }
599
-  }
600
-  .fp-section:not(:last-child).active & {
601
-    .overlay {
602
-      &:before {
603
-        -webkit-animation: scroll-indicator 5s linear 6s infinite;
604
-        -moz-animation: scroll-indicator 5s linear 6s infinite;
605
-        animation: scroll-indicator 5s linear 6s infinite;
606
-      }
607
-    }
608
-  }
609
-}
610
-
611
-@-webkit-keyframes scroll-indicator {
612
-  0% {
613
-    opacity: 0;
614
-    -webkit-transform: translateY(-0.5rem);
615
-    -moz-transform: translateY(-0.5rem);
616
-    -ms-transform: translateY(-0.5rem);
617
-    -o-transform: translateY(-0.5rem);
618
-    transform: translateY(-0.5rem);
619
-  }
620
-  35% {
621
-    /*-webkit-transform: translateY(0.5rem);
622
-    -moz-transform: translateY(0.5rem);
623
-    -ms-transform: translateY(0.5rem);
624
-    -o-transform: translateY(0.5rem);
625
-    transform: translateY(0.5rem);*/
626
-  }
627
-  75% {
628
-    opacity: 0.5;
629
-    /*-webkit-transform: translateY(1rem);
630
-    -moz-transform: translateY(1rem);
631
-    -ms-transform: translateY(1rem);
632
-    -o-transform: translateY(1rem);
633
-    transform: translateY(1rem);*/
634
-  }
635
-  100% {
636
-    opacity: 0;
637
-    -webkit-transform: translateY(1rem);
638
-    -moz-transform: translateY(1rem);
639
-    -ms-transform: translateY(1rem);
640
-    -o-transform: translateY(1rem);
641
-    transform: translateY(1rem);
642
-  }
643
-}
644
-@-moz-keyframes scroll-indicator {
645
-  0% {
646
-    opacity: 0;
647
-    -webkit-transform: translateY(-0.5rem);
648
-    -moz-transform: translateY(-0.5rem);
649
-    -ms-transform: translateY(-0.5rem);
650
-    -o-transform: translateY(-0.5rem);
651
-    transform: translateY(-0.5rem);
652
-  }
653
-  35% {
654
-    /*-webkit-transform: translateY(0.5rem);
655
-    -moz-transform: translateY(0.5rem);
656
-    -ms-transform: translateY(0.5rem);
657
-    -o-transform: translateY(0.5rem);
658
-    transform: translateY(0.5rem);*/
659
-  }
660
-  75% {
661
-    opacity: 0.5;
662
-    /*-webkit-transform: translateY(1rem);
663
-    -moz-transform: translateY(1rem);
664
-    -ms-transform: translateY(1rem);
665
-    -o-transform: translateY(1rem);
666
-    transform: translateY(1rem);*/
667
-  }
668
-  100% {
669
-    opacity: 0;
670
-    -webkit-transform: translateY(1rem);
671
-    -moz-transform: translateY(1rem);
672
-    -ms-transform: translateY(1rem);
673
-    -o-transform: translateY(1rem);
674
-    transform: translateY(1rem);
675
-  }
676
-}
677
-@keyframes scroll-indicator {
678
-  0% {
679
-    opacity: 0;
680
-    -webkit-transform: translateY(-0.5rem);
681
-    -moz-transform: translateY(-0.5rem);
682
-    -ms-transform: translateY(-0.5rem);
683
-    -o-transform: translateY(-0.5rem);
684
-    transform: translateY(-0.5rem);
685
-  }
686
-  35% {
687
-    /*-webkit-transform: translateY(0.5rem);
688
-    -moz-transform: translateY(0.5rem);
689
-    -ms-transform: translateY(0.5rem);
690
-    -o-transform: translateY(0.5rem);
691
-    transform: translateY(0.5rem);*/
692
-  }
693
-  75% {
694
-    opacity: 0.5;
695
-    /*-webkit-transform: translateY(1rem);
696
-    -moz-transform: translateY(1rem);
697
-    -ms-transform: translateY(1rem);
698
-    -o-transform: translateY(1rem);
699
-    transform: translateY(1rem);*/
700
-  }
701
-  100% {
702
-    opacity: 0;
703
-    -webkit-transform: translateY(1rem);
704
-    -moz-transform: translateY(1rem);
705
-    -ms-transform: translateY(1rem);
706
-    -o-transform: translateY(1rem);
707
-    transform: translateY(1rem);
708
-  }
709
-}
710 0
\ No newline at end of file
Browse code

Initial commit

Benjamin Roth authored on07/11/2022 09:19:06
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,709 @@
1
+@if not-imported("import_once_func") { @import "inc/import_once_func"; }
2
+//@import "inc/normalize.css"; // Normalize browser defaults
3
+
4
+@if not-imported("framework") { @import "inc/framework"; } // Load framework
5
+
6
+/* ------ COMMON CLASSES ------ */
7
+@if not-imported("common") { @import "inc/common"; }
8
+/* ------ BASE FONT STYLING ------ */
9
+@if not-imported("font") { @import "inc/font"; }
10
+/* ------ BASE FORM STYLING ------ */
11
+@if not-imported("form") { @import "inc/form"; }
12
+/* ------ CUSTOM ELEMENTS ------ */
13
+@if not-imported("custom-elements") { @import "inc/custom-elements"; }
14
+
15
+html {
16
+  height: 100%;
17
+}
18
+
19
+#logo {
20
+  position: absolute;
21
+  max-width: 35%;
22
+  left: 35px;
23
+  top: 25px;
24
+  width: 215px;
25
+
26
+  svg {
27
+    width: 100%;
28
+    vertical-align: middle;
29
+  }
30
+
31
+  @include for-mobile {
32
+    max-width: 20%;
33
+    left: 25px;
34
+    top: 15px;
35
+  }
36
+}
37
+
38
+.background-wrapper {
39
+  display: flex;
40
+  align-items: center;
41
+  height: 100%;
42
+
43
+  .background-wrapper-helper,
44
+  .background-wrapper-inner {
45
+    width: 100%;
46
+  }
47
+
48
+  .background-wrapper-inner {
49
+    width: 100%;
50
+    text-align: center;
51
+    padding: 100px 0;
52
+    /*flex: 0 0 auto;
53
+    width: 100%;
54
+    display: flex;
55
+    align-items: center;
56
+    justify-content: center;
57
+    flex-direction: column;*/
58
+  }
59
+}
60
+
61
+.teaser,
62
+.form {
63
+  max-width: 100%;
64
+  margin: 0 auto;
65
+
66
+  &.form {
67
+    //background: rgba(#fff,0.1);
68
+    padding: 40px 0 20px;
69
+    text-align: right;
70
+  }
71
+
72
+  @include for-max-size(1400px) {
73
+    width: 66%;
74
+  }
75
+
76
+  @include for-mobile {
77
+    width: auto;
78
+    padding-left: 25px !important;
79
+    padding-right: 25px !important;
80
+  }
81
+
82
+  .more,
83
+  .goto {
84
+    margin-top: 3em;
85
+    font-size: $font-size-default;
86
+    padding-bottom: 1.5em;
87
+    a {
88
+      @include button($color: $color-text-invert, $border-color: $color-text-invert, $background-color: transparent, $background-color-hover: transparent);
89
+      letter-spacing: 0.1em;
90
+      font-weight: 400;
91
+      height: 30px;
92
+      line-height: 20px;
93
+      padding: 3px 10px;
94
+      overflow: hidden;
95
+      z-index: 0;
96
+      text-transform: none;
97
+    }
98
+  }
99
+}
100
+.slideMeta {
101
+  .number {
102
+    position: absolute;
103
+    font-family: $font-family-alternate;
104
+    font-size: 535px;
105
+    left: 0;
106
+    top: 50%;
107
+    @include transform(translate(-33%, -50%));
108
+    opacity: .1;
109
+
110
+    @include for-max-size(1200px) {
111
+      font-size: 42vw;
112
+    }
113
+  }
114
+
115
+  .display {
116
+    position: absolute;
117
+    font-family: $font-family-handwriting;
118
+    font-size: 54px;
119
+    left: 0;
120
+    bottom: 50%;
121
+    @include transform(translateY(35vh));
122
+    opacity: .4;
123
+
124
+    @include for-max-size(1200px) {
125
+      font-size: 5vw;
126
+    }
127
+
128
+    @include for-mobile {
129
+      font-size: 30px;
130
+    }
131
+  }
132
+}
133
+
134
+.content-modal,
135
+.content-modal-transparent {
136
+  color: $color-text-invert;
137
+  font-family: $font-family;
138
+  font-size: font-size(18px);
139
+  font-weight: 300;
140
+  line-height: 1.3;
141
+  display: block;
142
+  position: fixed;
143
+  top: 0;
144
+  right: 0;
145
+  bottom: 0;
146
+  left: 0;
147
+  z-index: 10;
148
+  padding: 15px;
149
+  opacity: 0;
150
+  visibility: hidden;
151
+  background-color: rgba(0, 0, 0, 0.25);
152
+  @include box-sizing(border-box);
153
+  @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
154
+
155
+  body > & {
156
+    z-index: 1000;
157
+  }
158
+
159
+  h1,h2,h3,h4,h5,h6 {
160
+    color: $color-headline;
161
+    line-height: 1;
162
+  }
163
+
164
+  &.-show {
165
+    opacity: 1;
166
+    visibility: visible;
167
+    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
168
+
169
+    .full-content {
170
+      @include transform(translateX(0));
171
+      @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.3s);
172
+    }
173
+  }
174
+
175
+  .image_container {
176
+    &.float_above {
177
+      margin: 0 0 2rem 0;
178
+    }
179
+  }
180
+
181
+  .full-content {
182
+    @include box-sizing(border-box);
183
+    @include transform(translateX(100%));
184
+    @include transition(all 0.6s cubic-bezier(0.25, 1, 0.5, 1));
185
+    position: absolute;
186
+    max-width: 100vw;
187
+
188
+    :not(.content-modal-transparent)& {
189
+      top: 0;
190
+      right: 0;
191
+      bottom: 0;
192
+      width: 650px;
193
+      text-align: center;
194
+      background-color: #000;
195
+      padding: 50px 45px 50px 60px;
196
+      overflow: hidden;
197
+    }
198
+
199
+    .content-modal-transparent& {
200
+      top: 50%;
201
+      right: auto;
202
+      bottom: auto;
203
+      left: 50%;
204
+      width: 1200px;
205
+      max-height: 100vh;
206
+      //max-height: -webkit-fill-available;
207
+      max-height: calc(100vh - 80px);
208
+      background-color: rgba(#000,0.8);
209
+      @include box-shadow(0 0 50px 10px #000);
210
+      padding: 80px 40px 60px;
211
+      overflow: hidden;
212
+      @include transform(translate(-50%,-50%));
213
+    }
214
+
215
+    .scrollcontent {
216
+      :not(.content-modal-transparent)& {
217
+        position: absolute;
218
+        top: 60px;
219
+        right: 60px;
220
+        bottom: 60px;
221
+        left: 60px;
222
+        padding: 10px 15px 10px 0;
223
+        max-height: calc(100vh - 100px);
224
+      }
225
+      @include box-sizing(border-box);
226
+      max-height: 100vh;
227
+      max-height: calc(100vh - 140px);
228
+      overflow-y: auto;
229
+    }
230
+
231
+    .close-modal {
232
+      position: absolute;
233
+      top: 15px;
234
+      left: 15px;
235
+      width: 30px;
236
+      height: 30px;
237
+      background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
238
+      //border: 1px $color-text solid;
239
+      cursor: pointer;
240
+
241
+      &:hover {
242
+        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BA0C2F' viewBox='0 0 32 32'%3E%3Cpath d='M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z'%3E%3C/path%3E%3Cpath d='M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z'%3E%3C/path%3E%3Cpath d='M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z'%3E%3C/path%3E%3Cpath d='M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
243
+      }
244
+
245
+      .content-modal-transparent& {
246
+        left: 50%;
247
+        @include transform(translateX(-50%));
248
+      }
249
+    }
250
+  }
251
+
252
+  .ce_hyperlink {
253
+    font-size: font-size(14px);
254
+    font-family: $font-family;
255
+    font-weight: 600;
256
+    letter-spacing: 0.1em;
257
+    text-transform: uppercase;
258
+    white-space: nowrap;
259
+
260
+    a {
261
+      display: inline-block;
262
+      color: $color-text;
263
+      padding: 10px 30px 10px 20px;
264
+      position: relative;
265
+      @include transition(all 0.25s ease);
266
+      border: 1px $color-link solid;
267
+      background-color: #000;
268
+
269
+      &:before {
270
+        position: absolute;
271
+        right: 0.5em;
272
+        top: 50%;
273
+        margin-top: -0.5em;
274
+        font-size: 1.25em;
275
+        width: 1em;
276
+        height: 1em;
277
+        content: '';
278
+        background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
279
+      }
280
+
281
+      &:hover {
282
+        color: $color-link;
283
+      }
284
+    }
285
+
286
+    &.alternate {
287
+      font-size: font-size(20px);
288
+      letter-spacing: normal;
289
+      font-family: $font-family-alternate;
290
+      text-transform: none;
291
+      font-weight: 700;
292
+
293
+      a {
294
+        background: none;
295
+        border: none;
296
+        padding: 0;
297
+        border-bottom: 2px $color-text solid;
298
+
299
+        &:before {
300
+          display: none;
301
+        }
302
+      }
303
+    }
304
+
305
+  }
306
+}
307
+
308
+#vertical-navigation {
309
+  opacity: 1;
310
+  visibility: visible;
311
+  @include transition(all 0.25s ease-out);
312
+  .mod_articlelist {
313
+    position: fixed;
314
+    right: 25px;
315
+    top: 50%;
316
+    width: 30px;
317
+    height: 50vh;
318
+    margin-top: -25vh;
319
+    z-index: 1000;
320
+
321
+    ul {
322
+      display: flex;
323
+      flex-direction: column;
324
+      justify-content: center;
325
+      height: 100%;
326
+    }
327
+
328
+    li.-hide {
329
+      display: none;
330
+    }
331
+
332
+    li:not(.-hide) {
333
+      flex: 3 3 0;
334
+      padding: 5px 0;
335
+
336
+      &.-small {
337
+        flex: 1 1 0;
338
+      }
339
+
340
+      &:first-child {
341
+        padding-top: 0;
342
+      }
343
+      &:last-child {
344
+        padding-bottom: 0;
345
+      }
346
+
347
+      a {
348
+        display: block;
349
+        position: relative;
350
+        height: 100%;
351
+        width: 100%;
352
+        background: #fff;
353
+        line-height: 1;
354
+        font-size: 0;
355
+        opacity: .35;
356
+        @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
357
+        @include transition(none);
358
+
359
+        div {
360
+          opacity: 0;
361
+          visibility: hidden;
362
+          position: absolute;
363
+          right: 100%;
364
+          top: 2px;
365
+          color: $color-text-invert;
366
+          text-transform: lowercase;
367
+          font-size: font-size(16px);
368
+          font-weight: 400;
369
+          padding-top: 3px;
370
+          padding-right: 2px;
371
+          @include transition(all 0.25s cubic-bezier(0.5, 1, 0.89, 1));
372
+          @include transform(translate(0, 15px));
373
+
374
+          &:before {
375
+            position: absolute;
376
+            left: 0;
377
+            bottom: 100%;
378
+            right: -10px;
379
+            height: 2px;
380
+            background-color: $color-link;
381
+            content: '';
382
+          }
383
+
384
+          .label-holder {
385
+            line-height: 1.3;
386
+            color: $color-text;
387
+            width: 150px;
388
+            min-height: 2.6em;
389
+            display: flex;
390
+            align-items: center;
391
+            background-color: $color-bg-senary;
392
+            padding: 5px;
393
+
394
+            .label {
395
+              flex: 1 0 0;
396
+              text-align: center;
397
+            }
398
+          }
399
+        }
400
+
401
+        &:hover,
402
+        &.active {
403
+          background: $color-bg-secondary;
404
+
405
+          &:before {
406
+            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
407
+            -webkit-background-size: 100% 100%;
408
+            background-size: 100% 100%;}
409
+
410
+          &:after {
411
+            background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='#{str-replace($color-bg-secondary,'#','%23')}' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
412
+            -webkit-background-size: 100% 100%;
413
+            background-size: 100% 100%;}
414
+        }
415
+        &:hover {
416
+          div {
417
+            opacity: 1;
418
+            visibility: visible;
419
+            @include transform(translate(0,0));
420
+          }
421
+        }
422
+
423
+        &:before {
424
+          position: absolute;
425
+          left:0;
426
+          right: 0;
427
+          bottom: 100%;
428
+          height: 10px;
429
+          content: '';
430
+          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,4 L50,14 L100,4 L100,15 L0,15z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
431
+          -webkit-background-size: 100% 100%;
432
+          background-size: 100% 100%;
433
+        }
434
+
435
+        &:after {
436
+          position: absolute;
437
+          left:0;
438
+          right: 0;
439
+          top: 100%;
440
+          height: 10px;
441
+          content: '';
442
+          background: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='25' fill='%23fff' viewBox='0 0 100 15' preserveAspectRatio='none' %3E%3Cpath d='M0,0 L100,0 L50,10z'%3E%3C/path%3E%3C/svg%3E") no-repeat 100% 50%;
443
+          -webkit-background-size: 100% 100%;
444
+          background-size: 100% 100%;
445
+        }
446
+      }
447
+
448
+      &:first-child {
449
+        a {
450
+          &:before {
451
+            display: none;
452
+          }
453
+        }
454
+      }
455
+    }
456
+
457
+    @include for-mobile {
458
+      right: 15px;
459
+      top: 50%;
460
+      width: 20px;
461
+    }
462
+  }
463
+}
464
+
465
+
466
+
467
+/**
468
+ * CURTAIN
469
+ */
470
+
471
+#curtainstage {
472
+  position: absolute;
473
+  top: 0;
474
+  left: 0;
475
+  width: 100%;
476
+  height: 100%;
477
+  overflow: hidden;
478
+  /*background-color: rgb(0,0,0);
479
+  box-shadow: 0 0 0 2px white inset;*/
480
+}
481
+#curtain {
482
+  top: 0;
483
+  left: 0;
484
+  width: 100%;
485
+  height: 100%;
486
+  background: transparent;
487
+}
488
+
489
+#curtain .left,
490
+#curtain .right {
491
+  position: absolute;
492
+  top: 0;
493
+  width: 50%;
494
+  height: 100%;
495
+  //filter: brightness(120%);
496
+  background-image: url("/files/pub/Landingpage/Wein/curtain_rot.svg");
497
+  background-size: cover;
498
+  background-repeat: no-repeat;
499
+}
500
+
501
+#curtain .left {
502
+  left: 0;
503
+  transform-origin: top right;
504
+}
505
+#curtain .right {
506
+  left: 50%;
507
+  transform-origin: top left;
508
+}
509
+
510
+/* **********
511
+	opening
512
+********** */
513
+
514
+#curtainstage {
515
+	animation-name: curtain-remove;
516
+	animation-duration: 4s;
517
+	animation-fill-mode: forwards;
518
+}
519
+
520
+#curtain.open .left,
521
+#curtain.open .right {
522
+  filter: brightness(100%);
523
+}
524
+#curtain.open .left {
525
+  animation-fill-mode: forwards;
526
+  animation-name: curtain-opening, left-curtain-opening;
527
+  animation-duration: 2s, 4s;
528
+  animation-timing-function: ease-in-out, ease-in-out;
529
+  animation-delay: 0s, 0s;
530
+  animation-iteration-count: 1, 1;
531
+  animation-direction: normal, normal;
532
+}
533
+#curtain.open .right {
534
+  animation-fill-mode: forwards;
535
+  animation-name: curtain-opening, right-curtain-opening;
536
+  animation-duration: 2s, 4s;
537
+  animation-timing-function: ease-in-out, ease-in-out;
538
+  animation-delay: 0s, 0s;
539
+  animation-iteration-count: 1, 1;
540
+  animation-direction: normal, normal;
541
+}
542
+
543
+/* **********
544
+	animations
545
+********** */
546
+
547
+@keyframes curtain-remove { /* 2s */
548
+  from { visibility: visible; }
549
+  to { visibility: hidden; }
550
+}
551
+
552
+@keyframes curtain-opening { /* 2s */
553
+  from { filter: brightness(100%); }
554
+  to { filter: brightness(100%); }
555
+}
556
+
557
+@keyframes left-curtain-opening { /* 4s */
558
+  from { transform: translate(0) rotate(0) scale(1,1); }
559
+  to { transform: translate(-100%) rotate(20deg) scale(0,2); }
560
+}
561
+
562
+@keyframes right-curtain-opening { /* 4s */
563
+  from { transform: translate(0) rotate(0) scale(1,1); }
564
+  to { transform: translate(100%) rotate(-20deg) scale(0,2); }
565
+}
566
+
567
+.ce_gallery {
568
+  &.-references {
569
+    ul {
570
+      justify-content: center;
571
+
572
+     > li {
573
+       flex: 0 1 31.666%;
574
+       margin-bottom: 25px;
575
+       min-width: 150px;
576
+       figure {
577
+         text-align: center;
578
+       }
579
+     }
580
+    }
581
+  }
582
+}
583
+
584
+.background-wrapper{
585
+  .fp-section:not(:last-child) & {
586
+    .overlay {
587
+      &:before {
588
+        background-image: url("data:image/svg+xml; charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' stroke='none' fill='%23FFFFFF' viewBox='0 0 64 64'%3E%3Cpath d='M45.5,13.5c0,-7.451 -6.049,-13.5 -13.5,-13.5c-7.451,0 -13.5,6.049 -13.5,13.5l0,21c0,7.451 6.049,13.5 13.5,13.5c7.451,0 13.5,-6.049 13.5,-13.5l0,-21Zm-1.047,0l-0,21c-0,6.873 -5.58,12.453 -12.453,12.453c-6.873,-0 -12.453,-5.58 -12.453,-12.453l0,-21c0,-6.873 5.58,-12.453 12.453,-12.453c6.873,0 12.453,5.58 12.453,12.453Z'/%3E%3Cpath d='M34,8.5c0,-1.104 -0.896,-2 -2,-2c-1.104,0 -2,0.896 -2,2l0,6c0,1.104 0.896,2 2,2c1.104,0 2,-0.896 2,-2l0,-6Zm-1.047,0l-0,6c-0,0.526 -0.427,0.953 -0.953,0.953c-0.526,-0 -0.953,-0.427 -0.953,-0.953c0,-0 0,-6 0,-6c0,-0.526 0.427,-0.953 0.953,-0.953c0.526,0 0.953,0.427 0.953,0.953Z'/%3E%3Cpath d='M18.318,50.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3Cpath d='M18.318,55.491l13.5,5c0.117,0.043 0.247,0.043 0.364,0l13.5,-5c0.271,-0.1 0.409,-0.402 0.309,-0.673c-0.1,-0.271 -0.402,-0.409 -0.673,-0.309l-13.318,4.933c0,-0 -13.318,-4.933 -13.318,-4.933c-0.271,-0.1 -0.573,0.038 -0.673,0.309c-0.1,0.271 0.038,0.573 0.309,0.673Z'/%3E%3C/svg%3E");
589
+        width: 64px;
590
+        height: 64px;
591
+        content: '';
592
+        position: absolute;
593
+        bottom: 2rem;
594
+        left: 50%;
595
+        margin-left: -32px;
596
+        opacity: 0;
597
+      }
598
+    }
599
+  }
600
+  .fp-section:not(:last-child).active & {
601
+    .overlay {
602
+      &:before {
603
+        -webkit-animation: scroll-indicator 5s linear 6s infinite;
604
+        -moz-animation: scroll-indicator 5s linear 6s infinite;
605
+        animation: scroll-indicator 5s linear 6s infinite;
606
+      }
607
+    }
608
+  }
609
+}
610
+
611
+@-webkit-keyframes scroll-indicator {
612
+  0% {
613
+    opacity: 0;
614
+    -webkit-transform: translateY(-0.5rem);
615
+    -moz-transform: translateY(-0.5rem);
616
+    -ms-transform: translateY(-0.5rem);
617
+    -o-transform: translateY(-0.5rem);
618
+    transform: translateY(-0.5rem);
619
+  }
620
+  35% {
621
+    /*-webkit-transform: translateY(0.5rem);
622
+    -moz-transform: translateY(0.5rem);
623
+    -ms-transform: translateY(0.5rem);
624
+    -o-transform: translateY(0.5rem);
625
+    transform: translateY(0.5rem);*/
626
+  }
627
+  75% {
628
+    opacity: 0.5;
629
+    /*-webkit-transform: translateY(1rem);
630
+    -moz-transform: translateY(1rem);
631
+    -ms-transform: translateY(1rem);
632
+    -o-transform: translateY(1rem);
633
+    transform: translateY(1rem);*/
634
+  }
635
+  100% {
636
+    opacity: 0;
637
+    -webkit-transform: translateY(1rem);
638
+    -moz-transform: translateY(1rem);
639
+    -ms-transform: translateY(1rem);
640
+    -o-transform: translateY(1rem);
641
+    transform: translateY(1rem);
642
+  }
643
+}
644
+@-moz-keyframes scroll-indicator {
645
+  0% {
646
+    opacity: 0;
647
+    -webkit-transform: translateY(-0.5rem);
648
+    -moz-transform: translateY(-0.5rem);
649
+    -ms-transform: translateY(-0.5rem);
650
+    -o-transform: translateY(-0.5rem);
651
+    transform: translateY(-0.5rem);
652
+  }
653
+  35% {
654
+    /*-webkit-transform: translateY(0.5rem);
655
+    -moz-transform: translateY(0.5rem);
656
+    -ms-transform: translateY(0.5rem);
657
+    -o-transform: translateY(0.5rem);
658
+    transform: translateY(0.5rem);*/
659
+  }
660
+  75% {
661
+    opacity: 0.5;
662
+    /*-webkit-transform: translateY(1rem);
663
+    -moz-transform: translateY(1rem);
664
+    -ms-transform: translateY(1rem);
665
+    -o-transform: translateY(1rem);
666
+    transform: translateY(1rem);*/
667
+  }
668
+  100% {
669
+    opacity: 0;
670
+    -webkit-transform: translateY(1rem);
671
+    -moz-transform: translateY(1rem);
672
+    -ms-transform: translateY(1rem);
673
+    -o-transform: translateY(1rem);
674
+    transform: translateY(1rem);
675
+  }
676
+}
677
+@keyframes scroll-indicator {
678
+  0% {
679
+    opacity: 0;
680
+    -webkit-transform: translateY(-0.5rem);
681
+    -moz-transform: translateY(-0.5rem);
682
+    -ms-transform: translateY(-0.5rem);
683
+    -o-transform: translateY(-0.5rem);
684
+    transform: translateY(-0.5rem);
685
+  }
686
+  35% {
687
+    /*-webkit-transform: translateY(0.5rem);
688
+    -moz-transform: translateY(0.5rem);
689
+    -ms-transform: translateY(0.5rem);
690
+    -o-transform: translateY(0.5rem);
691
+    transform: translateY(0.5rem);*/
692
+  }
693
+  75% {
694
+    opacity: 0.5;
695
+    /*-webkit-transform: translateY(1rem);
696
+    -moz-transform: translateY(1rem);
697
+    -ms-transform: translateY(1rem);
698
+    -o-transform: translateY(1rem);
699
+    transform: translateY(1rem);*/
700
+  }
701
+  100% {
702
+    opacity: 0;
703
+    -webkit-transform: translateY(1rem);
704
+    -moz-transform: translateY(1rem);
705
+    -ms-transform: translateY(1rem);
706
+    -o-transform: translateY(1rem);
707
+    transform: translateY(1rem);
708
+  }
709
+}
0 710
\ No newline at end of file