Browse code

Progress

Benjamin Roth authored on14/12/2022 00:09:31
Showing1 changed files
1 1
deleted file mode 100644
... ...
@@ -1,890 +0,0 @@
1
-@if not-imported("import_once_func") { @import "import_once_func"; }
2
-@if not-imported("framework") { @import "framework"; }
3
-
4
-.content-wrapper {
5
-  @include centered-1200;
6
-  @include box-sizing(border-box);
7
-}
8
-
9
-.video_container {
10
-  video {
11
-    vertical-align: middle;
12
-  }
13
-
14
-  .responsive {
15
-    overflow: hidden;
16
-    position: relative;
17
-
18
-    video {
19
-      max-width:100%;
20
-      height:auto;
21
-      left: 0;
22
-      position: absolute;
23
-      top: 0;
24
-    }
25
-
26
-    iframe {
27
-      border: 0;
28
-      height: 100%;
29
-      left: 0;
30
-      position: absolute;
31
-      top: 0;
32
-      width: 100%;
33
-    }
34
-
35
-    &.ratio-169 {
36
-      padding-top: 56.25%;
37
-    }
38
-    &.ratio-1610 {
39
-      padding-top: 62.5%;
40
-    }
41
-    &.ratio-219 {
42
-      padding-top: 42.85%;
43
-    }
44
-    &.ratio-43 {
45
-      padding-top: 75%;
46
-    }
47
-    &.ratio-32 {
48
-      padding-top: 66.66%;
49
-    }
50
-  }
51
-}
52
-
53
-.image_container {
54
-
55
-  &,
56
-  picture {
57
-    overflow: hidden;
58
-  }
59
-
60
-  img {
61
-    vertical-align: middle;
62
-  }
63
-
64
-  a {
65
-    display: inline-block;
66
-    vertical-align: bottom;
67
-    overflow: hidden;
68
-    position: relative;
69
-
70
-    &:before/*,
71
-    &:after*/ {
72
-      -webkit-transition: all 0.25s;
73
-      -moz-transition: all 0.25s;
74
-      -ms-transition: all 0.25s;
75
-      -o-transition: all 0.25s;
76
-      transition: all 0.25s;
77
-    }
78
-
79
-    &:before {
80
-      //background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"></svg>');
81
-      background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1.5em" height="1.5em" viewBox="0 0 32 32"%3E%3Cpath d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"/%3E%3C/svg%3E') 50% 50% no-repeat;
82
-      position: absolute;
83
-      top: 0;
84
-      bottom: 0;
85
-      left: 0;
86
-      right: 0;
87
-      visibility: hidden;
88
-      opacity: 0;
89
-      content: '';
90
-    }
91
-    /*&:after {
92
-      @include icon('\e906',26px);
93
-      position: absolute;
94
-      left: 50%;
95
-      top: 50%;
96
-      visibility: hidden;
97
-      opacity: 0;
98
-      margin: -13px 0 0 -13px;
99
-      color: rgba(0, 0, 0, 0.75);
100
-      -webkit-transform: scale3d(0.5,0.5,1);
101
-      -moz-transform: scale3d(0.5,0.5,1);
102
-      -ms-transform: scale3d(0.5,0.5,1);
103
-      -o-transform: scale3d(0.5,0.5,1);
104
-      transform: scale3d(0.5,0.5,1);
105
-    }*/
106
-
107
-    &:hover {
108
-      &:before/*,
109
-      &:after*/ {
110
-        opacity: 1;
111
-        visibility: visible;
112
-      }
113
-
114
-      /*&:after {
115
-        -webkit-transform: scale3d(1,1,1);
116
-        -moz-transform: scale3d(1,1,1);
117
-        -ms-transform: scale3d(1,1,1);
118
-        -o-transform: scale3d(1,1,1);
119
-        transform: scale3d(1,1,1);
120
-      }*/
121
-    }
122
-  }
123
-
124
-  figcaption {
125
-    padding: 5px 0 0;
126
-    font-size: font-size(13px);
127
-    color: $color-text-breadcrumb;
128
-    line-height: 1.3;
129
-  }
130
-
131
-  &.float_right {
132
-    float: right;
133
-    margin: 0 0 $gutter-default $gutter-default;
134
-  }
135
-
136
-  &.float_left {
137
-    float: left;
138
-    margin: 0 $gutter-default $gutter-default 0;
139
-  }
140
-
141
-  @media screen and (max-width: 599px) {
142
-    &.float_right {
143
-      float: none;
144
-      margin: 0 0 $gutter-default;
145
-    }
146
-
147
-    &.float_left {
148
-      float: none;
149
-      margin: 0 0 $gutter-default;
150
-    }
151
-  }
152
-}
153
-
154
-.embed-wrapper {
155
-  position: relative;
156
-  .embed-arrow {
157
-    z-index: 2;
158
-    background-color: $color-bg-tertiary;
159
-    color: $color-text-invert;
160
-
161
-    position: absolute;
162
-    left: 0;
163
-    top: 0;
164
-    bottom: 0;
165
-    right: 60%;
166
-    right: calc(50% + 250px);
167
-
168
-    @include for-max-size(1200px) {
169
-      right: auto;
170
-      width: 250px;
171
-    }
172
-
173
-    &:before {
174
-      position: absolute;
175
-      top:0;
176
-      bottom: 0;
177
-      left: 100%;
178
-      width: 50px;
179
-      content: '';
180
-      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
181
-      -webkit-background-size: 100% 100%;
182
-      background-size: 100% 100%;
183
-    }
184
-
185
-    + .embed-map {
186
-      right: 0;
187
-      left: 40%;
188
-      left: calc(50% - 250px);
189
-      width: auto;
190
-
191
-      @include for-max-size(1200px) {
192
-        left: 0;
193
-        padding-left: 250px;
194
-
195
-        iframe {
196
-          left: 250px;
197
-          right: 0;
198
-          width: calc(100% - 250px);
199
-        }
200
-      }
201
-    }
202
-  }
203
-  .embed-map {
204
-    z-index: 1;
205
-    position: absolute;
206
-    left: 0;
207
-    top: 0;
208
-    width: 100%;
209
-    height: 100%;
210
-    overflow: hidden;
211
-
212
-    iframe {
213
-      position: absolute;
214
-      top: 0;
215
-      left: 0;
216
-      width: 100%;
217
-      height: 100%;
218
-    }
219
-  }
220
-
221
-  .embed-arrow-inside {
222
-    @include aspect-ratio(2,0.75,true);
223
-    @include centered-1200;
224
-    //z-index: 1;
225
-    display: flex;
226
-    align-items: center;
227
-
228
-    .embed-arrow-text-holder {
229
-      display: inline-flex;
230
-      justify-content: center;
231
-      width: 50%;
232
-      padding-right: 250px;
233
-      @include box-sizing(border-box);
234
-
235
-      @include for-max-size(1200px) {
236
-        width: 235px;
237
-        padding-right: 0;
238
-      }
239
-    }
240
-    .embed-arrow-text {
241
-      z-index: 2;
242
-      em, i {
243
-        font-style: normal;
244
-        color: $color-text-alt;
245
-      }
246
-
247
-      & {
248
-        color: $color-text-invert;
249
-      }
250
-
251
-      h1, h2, h3, h4, h5, h6 {
252
-        text-align: left;
253
-        color: $color-text-alt;
254
-
255
-        em, i {
256
-          color: $color-text-invert;
257
-        }
258
-      }
259
-    }
260
-  }
261
-
262
-  @include for-mobile {
263
-    display: flex;
264
-    flex-direction: column;
265
-    .embed-arrow {
266
-      display: none;
267
-
268
-      + .embed-map {
269
-        order: 2;
270
-        position: relative;
271
-        padding: 0;
272
-        @include aspect-ratio(2,1);
273
-
274
-        iframe {
275
-          width: 100%;
276
-          left: 0;
277
-        }
278
-      }
279
-    }
280
-    .embed-arrow-inside {
281
-      width: 100%;
282
-      justify-content: center;
283
-      order: 1;
284
-      background: $color-bg-tertiary;
285
-
286
-      .embed-arrow-text-holder {
287
-        padding: 50px 0;
288
-        &,
289
-        h1,h2,h3,h4,h5,h6 {
290
-          text-align: center;
291
-        }
292
-      }
293
-    }
294
-  }
295
-}
296
-
297
-/**
298
- * Icon handling
299
- */
300
-*[data-icon] {
301
-  &:before {
302
-    @include icon;
303
-    content: attr(data-icon);
304
-    margin-right: 0.5ex;
305
-  }
306
-  &.-after {
307
-    &:before {
308
-      content: none;
309
-    }
310
-    &:after {
311
-      @include icon(attr(data-icon));
312
-      margin-left: 0.5ex;
313
-    }
314
-  }
315
-}
316
-
317
-.show-mobile {
318
-  display: none;
319
-  @include for-mobile {
320
-    display: block;
321
-  }
322
-}
323
-.show-tablet {
324
-  display: none;
325
-  @include for-tablet {
326
-    display: block;
327
-  }
328
-}
329
-.show-tablet-up {
330
-  display: none;
331
-  @include for-tablet-up {
332
-    display: block;
333
-  }
334
-}
335
-.show-desktop-up {
336
-  display: none;
337
-  @include for-desktop-up {
338
-    display: block;
339
-  }
340
-}
341
-
342
-/**
343
- * Separator
344
- */
345
-hr {
346
-  border: none;
347
-  border-bottom: 1px $color-stroke-grey solid;
348
-  margin: 1.5em 0;
349
-}
350
-
351
-/**
352
- * Lists
353
- */
354
-ul,
355
-ol {
356
-  &.list {
357
-    padding-top: 0.25em;
358
-    margin-bottom: 0.75em;
359
-
360
-    li {
361
-      position: relative;
362
-      line-height: 1.3;
363
-      padding: 0 0 0.25em 15px;
364
-
365
-      &:last-child {
366
-        padding-bottom: 0;
367
-      }
368
-
369
-      &:before {
370
-        //@include icon("\e913",100%,1);
371
-        line-height: 1;
372
-        font-size: 100%;
373
-        content: '\2022';
374
-        color: $color-list-icon;
375
-        position: absolute;
376
-        left: 0;
377
-        top: 0.1em;
378
-      }
379
-
380
-      &[data-icon] {
381
-        &:before {
382
-          content: attr(data-icon);
383
-        }
384
-      }
385
-    }
386
-
387
-    &.list-check {
388
-      li {
389
-        &:before {
390
-          content: '\e98e';
391
-        }
392
-      }
393
-    }
394
-  }
395
-
396
-  &.attribute_list {
397
-    -webkit-box-sizing: border-box;
398
-    -moz-box-sizing: border-box;
399
-    box-sizing: border-box;
400
-
401
-    .attribute {
402
-      font-size: font-size(13px);
403
-      text-transform: uppercase;
404
-      font-weight: 600;
405
-      line-height: 1/13*(12*1.5);
406
-      letter-spacing: 0.1em;
407
-      position: relative;
408
-      padding: 0.25em 0 0.25em 140px;
409
-      min-height: 1.5em;
410
-
411
-      .label {
412
-        font-size: font-size(12px);
413
-        text-transform: uppercase;
414
-        font-weight: 600;
415
-        line-height: 1.5;
416
-        letter-spacing: 0.1em;
417
-        color: $color-bg-quaternary;
418
-        position: absolute;
419
-        max-width: 130px;
420
-        left: 0;
421
-        top: 0.25em;
422
-
423
-        &:after {
424
-          //content: ':';
425
-        }
426
-      }
427
-
428
-      @include for-mobile {
429
-        padding-left: 0;
430
-        margin-bottom: 0.5em;
431
-        .label {
432
-          position: relative;
433
-          left: auto;
434
-          top: auto;
435
-          display: block;
436
-        }
437
-      }
438
-
439
-      &.rows {
440
-        padding-left: 0;
441
-        font-family: $font-family-alternate;
442
-        font-size: font-size(16px);
443
-        letter-spacing: normal;
444
-        text-transform: none;
445
-        line-height: 1/16*(12*1.5);
446
-        margin-bottom: 0.5em;
447
-
448
-        p {
449
-          margin-bottom: 0.5em;
450
-        }
451
-
452
-        .label {
453
-          font-family: $font-family;
454
-          font-size: font-size(12px);
455
-          position: relative;
456
-          left: auto;
457
-          top: auto;
458
-          display: block;
459
-        }
460
-      }
461
-
462
-      &.spacing {
463
-        margin-bottom: 1.5em;
464
-      }
465
-    }
466
-  }
467
-}
468
-
469
-ol {
470
-  padding-left: 1.1em;
471
-
472
-  &.list {
473
-    li {
474
-      padding-left: 5px;
475
-
476
-      &:before {
477
-        content: none;
478
-      }
479
-    }
480
-  }
481
-}
482
-
483
-.ce_text {
484
-  ul,ol {
485
-    @extend .list;
486
-  }
487
-
488
-  a:not(.button) {
489
-    &[target="_blank"]:not(.-ico-dl) {
490
-      &:before {
491
-        content: '';
492
-        width: 1em;
493
-        height: 1em;
494
-        display: inline-block;
495
-        position: relative;
496
-        background: $color-link;
497
-        -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
498
-        mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
499
-        -webkit-mask-repeat: no-repeat;
500
-        mask-repeat: no-repeat;
501
-        vertical-align: top;
502
-        margin-right: 10px;
503
-        @include transition(all 0.2s ease);
504
-      }
505
-
506
-      &:hover {
507
-        &:before {
508
-          background: mix($color-link,#000,80%);
509
-          @include transform(translateX(5px));
510
-        }
511
-      }
512
-    }
513
-    /*&.-ico-dl {
514
-      &:before {
515
-        @include icon('\e908');
516
-        margin-right: 5px;
517
-      }
518
-    }
519
-    &.-ico-goto {
520
-      &:before {
521
-        @include icon('\e90a');
522
-        margin-right: 5px;
523
-      }
524
-    }*/
525
-  }
526
-}
527
-
528
-/**
529
- * Multi column text
530
- */
531
-.ce_text {
532
-
533
-  &.layout_2col {
534
-
535
-    .text {
536
-      -webkit-column-count: 2;
537
-      -moz-column-count: 2;
538
-      column-count: 2;
539
-      -webkit-column-gap: $gutter-default;
540
-      -moz-column-gap: $gutter-default;
541
-      column-gap: $gutter-default;
542
-
543
-      p, div, ul, ol, dl {
544
-        break-inside: avoid-column;
545
-        break-before: auto;
546
-      }
547
-
548
-      h1, h2, h3, h4, h5, h6 {
549
-        break-inside: avoid-column;
550
-        break-after: avoid-column;
551
-      }
552
-    }
553
-
554
-    @media screen and (max-width: 599px) {
555
-      .text {
556
-        -webkit-column-count: 1;
557
-        -moz-column-count: 1;
558
-        column-count: 1;
559
-      }
560
-    }
561
-  }
562
-}
563
-
564
-/**
565
- * Back links
566
- */
567
-p.back,
568
-.ce_hyperlink.back {
569
-  clear: both;
570
-  > a {
571
-    text-transform: uppercase;
572
-    font-size: font-size(14px);
573
-    font-weight: 600;
574
-    color: $color-text;
575
-    letter-spacing: 0.1em;
576
-
577
-    svg {
578
-      vertical-align: -1px;
579
-      font-size: font-size(12px);
580
-    }
581
-  }
582
-}
583
-
584
-/**
585
- * Boxes
586
- */
587
-%box {
588
-  @include box;
589
-}
590
-
591
-%box-white {
592
-  @include box-white;
593
-}
594
-
595
-%box-grey {
596
-  @include box-grey;
597
-}
598
-
599
-.box {
600
-  @extend %box;
601
-}
602
-
603
-/**
604
- * Slider related
605
- */
606
-.negate-slider-pagination {
607
-  margin-bottom: -30px;
608
-
609
-  /*@media screen and (max-width: 900px) {
610
-    &.-medium-col-1-1 {
611
-      margin-bottom: 0;
612
-    }
613
-  }
614
-  @media screen and (max-width: 599px) {
615
-    &.-small-col-1-1 {
616
-      margin-bottom: 0;
617
-    }
618
-  }*/
619
-}
620
-
621
-/**
622
- * PAGINATION
623
- */
624
-.pagination {
625
-  @include box;
626
-  line-height: 35px;
627
-  display: flex;
628
-  p {
629
-    font-size: font-size(14px);
630
-    float: left;
631
-    font-weight: 600;
632
-    letter-spacing: 0.1em;
633
-    text-transform: uppercase;
634
-    margin: 0 auto 0 0;
635
-  }
636
-
637
-  ul {
638
-    text-align: center;
639
-    position: relative;
640
-    padding: 0;
641
-    margin: 0 0 0 auto;
642
-  }
643
-
644
-  li {
645
-    display: inline-block;
646
-    vertical-align: middle;
647
-    margin-bottom: 0;
648
-
649
-    a {
650
-      &:hover {
651
-        border-bottom-color: $color-bg-secondary;
652
-        color: mix($color-link,#000,60%);
653
-      }
654
-    }
655
-
656
-    a,strong {
657
-      font-weight: 400;
658
-      display: block;
659
-      min-width: 1.5em;
660
-      height: 2em;
661
-      line-height: 2em;
662
-      padding: 0 0.125em;
663
-      -webkit-box-sizing: border-box;
664
-      -moz-box-sizing: border-box;
665
-      box-sizing: border-box;
666
-      border-bottom: 2px transparent solid;
667
-      color: $color-link;
668
-      text-align: center;
669
-      -webkit-transition: all 0.25s;
670
-      -moz-transition: all 0.25s;
671
-      -ms-transition: all 0.25s;
672
-      -o-transition: all 0.25s;
673
-      transition: all 0.25s;
674
-
675
-      &.active
676
-      {
677
-        border-bottom-color: $color-bg-secondary;
678
-        color: $color-text;
679
-        font-weight: 600;
680
-      }
681
-
682
-      &.next,
683
-      &.previous,
684
-      &.first,
685
-      &.last {
686
-        position: relative;
687
-        text-indent: -9999em;
688
-        overflow: hidden;
689
-        //color: $color-link;
690
-        &:before,
691
-        &:after {
692
-          content: '';
693
-          width: 1em;
694
-          height: 1em;
695
-          position: absolute;
696
-          left: 50%;
697
-          top: 50%;
698
-          @include transform(translate(-50%,-50%));
699
-        }
700
-      }
701
-
702
-      &.next {
703
-        &:before {
704
-          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;
705
-        }
706
-      }
707
-
708
-      &.previous {
709
-        &:before {
710
-          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
711
-        }
712
-      }
713
-
714
-      &.last {
715
-        &:before {
716
-          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;
717
-        }
718
-      }
719
-
720
-      &.first {
721
-        &:before {
722
-          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
723
-        }
724
-      }
725
-    }
726
-  }
727
-}
728
-
729
-
730
-/* --- CALLOUTS --- */
731
-.callout {
732
-  border-left: 30px solid #BBB;
733
-  background-color: #EEE;
734
-  padding: 15px 15px 15px 15px;
735
-  display: block;
736
-  position: relative;
737
-  margin-bottom: 0.75em;
738
-
739
-  &.info {
740
-    border-left-color: #fab200;
741
-    background-color: #fff3d4;
742
-    color: #966c00;
743
-
744
-  }
745
-
746
-  &.success {
747
-    border-left-color: #52A256;
748
-    background-color: #e7f3e7;
749
-    color: #376c39;
750
-
751
-    &:before {
752
-      content: "\e86c";
753
-    }
754
-  }
755
-
756
-  &.warning {
757
-    border-left-color: #e27b41;
758
-    background-color: #faeae0;
759
-    color: #b6531c;
760
-
761
-    &:before {
762
-      content: "\e002";
763
-    }
764
-  }
765
-
766
-  &.danger {
767
-    border-left-color: #E84F4F;
768
-    background-color: #fce8e8;
769
-    color: #b91818;
770
-
771
-    &:before {
772
-      content: "\e000";
773
-    }
774
-  }
775
-
776
-  &:before {
777
-    position: absolute;
778
-    left: -15px;
779
-    top: 50%;
780
-    line-height: 1;
781
-    text-align: center;
782
-    @include iconfont;
783
-    font-size: font-size(20px);
784
-    color: #fff;
785
-    content: "\eaae";
786
-    -webkit-transform: translate(-50%, -50%);
787
-    -moz-transform: translate(-50%, -50%);
788
-    -ms-transform: translate(-50%, -50%);
789
-    -o-transform: translate(-50%, -50%);
790
-    transform: translate(-50%, -50%);
791
-  }
792
-}
793
-
794
-
795
-/**
796
- * Gallery
797
- */
798
-.ce_gallery  ul {
799
-  display: flex;
800
-  align-items: flex-start;
801
-  flex-wrap: wrap;
802
-  margin-left: -#{$gutter-default};
803
-
804
-  & > li {
805
-    flex: 0;
806
-    max-width: 100%;
807
-    min-width: 0;
808
-    margin-top: $gutter-default;
809
-    margin-left: $gutter-default;
810
-
811
-    &.row_first {
812
-      margin-top: 0;
813
-    }
814
-
815
-  }
816
-
817
-  @for $i from 1 through 12 {
818
-    &.cols_#{$i} > li {
819
-      flex-basis: 100% / $i - $gutter-default;
820
-    }
821
-  }
822
-
823
-  @media screen and (max-width: 900px) {
824
-    $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
825
-    margin-left: -#{$gutter};
826
-
827
-    & > li {
828
-      margin-top: $gutter;
829
-      margin-left: $gutter;
830
-
831
-      &.row_first {
832
-        margin-top: 0;
833
-      }
834
-    }
835
-
836
-    @for $i from 1 through 12 {
837
-      &.cols_#{$i} > li {
838
-        flex-basis: 100% / $i - $gutter;
839
-      }
840
-    }
841
-  }
842
-
843
-  @media screen and (max-width: 599px) {
844
-    $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
845
-    margin-left: -#{$gutter};
846
-
847
-    & > li {
848
-      margin-top: $gutter;
849
-      margin-left: $gutter;
850
-
851
-      &.row_first {
852
-        margin-top: $gutter;
853
-      }
854
-
855
-      &:first-child {
856
-        margin-top: 0;
857
-      }
858
-    }
859
-
860
-    @for $i from 1 through 12 {
861
-      &.cols_#{$i} > li {
862
-        flex-basis: 100% - $gutter;
863
-      }
864
-    }
865
-  }
866
-}
867
-
868
-.ce_form {
869
-  position: relative;
870
-  padding: 0 12.5%;
871
-  -webkit-box-sizing: border-box;
872
-  -moz-box-sizing: border-box;
873
-  box-sizing: border-box;
874
-
875
-  @include for-tablet {
876
-    padding: 6.25%;
877
-  }
878
-  @include for-mobile {
879
-    padding: 0;
880
-  }
881
-}
882
-
883
-p.info {
884
-  font-size: font-size(12px);
885
-  text-transform: uppercase;
886
-  color: $color-text-info;
887
-  letter-spacing: 0.1em;
888
-  line-height: 1.3;
889
-  font-weight: 600;
890
-}
891 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,890 @@
1
+@if not-imported("import_once_func") { @import "import_once_func"; }
2
+@if not-imported("framework") { @import "framework"; }
3
+
4
+.content-wrapper {
5
+  @include centered-1200;
6
+  @include box-sizing(border-box);
7
+}
8
+
9
+.video_container {
10
+  video {
11
+    vertical-align: middle;
12
+  }
13
+
14
+  .responsive {
15
+    overflow: hidden;
16
+    position: relative;
17
+
18
+    video {
19
+      max-width:100%;
20
+      height:auto;
21
+      left: 0;
22
+      position: absolute;
23
+      top: 0;
24
+    }
25
+
26
+    iframe {
27
+      border: 0;
28
+      height: 100%;
29
+      left: 0;
30
+      position: absolute;
31
+      top: 0;
32
+      width: 100%;
33
+    }
34
+
35
+    &.ratio-169 {
36
+      padding-top: 56.25%;
37
+    }
38
+    &.ratio-1610 {
39
+      padding-top: 62.5%;
40
+    }
41
+    &.ratio-219 {
42
+      padding-top: 42.85%;
43
+    }
44
+    &.ratio-43 {
45
+      padding-top: 75%;
46
+    }
47
+    &.ratio-32 {
48
+      padding-top: 66.66%;
49
+    }
50
+  }
51
+}
52
+
53
+.image_container {
54
+
55
+  &,
56
+  picture {
57
+    overflow: hidden;
58
+  }
59
+
60
+  img {
61
+    vertical-align: middle;
62
+  }
63
+
64
+  a {
65
+    display: inline-block;
66
+    vertical-align: bottom;
67
+    overflow: hidden;
68
+    position: relative;
69
+
70
+    &:before/*,
71
+    &:after*/ {
72
+      -webkit-transition: all 0.25s;
73
+      -moz-transition: all 0.25s;
74
+      -ms-transition: all 0.25s;
75
+      -o-transition: all 0.25s;
76
+      transition: all 0.25s;
77
+    }
78
+
79
+    &:before {
80
+      //background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"></svg>');
81
+      background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1.5em" height="1.5em" viewBox="0 0 32 32"%3E%3Cpath d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"/%3E%3C/svg%3E') 50% 50% no-repeat;
82
+      position: absolute;
83
+      top: 0;
84
+      bottom: 0;
85
+      left: 0;
86
+      right: 0;
87
+      visibility: hidden;
88
+      opacity: 0;
89
+      content: '';
90
+    }
91
+    /*&:after {
92
+      @include icon('\e906',26px);
93
+      position: absolute;
94
+      left: 50%;
95
+      top: 50%;
96
+      visibility: hidden;
97
+      opacity: 0;
98
+      margin: -13px 0 0 -13px;
99
+      color: rgba(0, 0, 0, 0.75);
100
+      -webkit-transform: scale3d(0.5,0.5,1);
101
+      -moz-transform: scale3d(0.5,0.5,1);
102
+      -ms-transform: scale3d(0.5,0.5,1);
103
+      -o-transform: scale3d(0.5,0.5,1);
104
+      transform: scale3d(0.5,0.5,1);
105
+    }*/
106
+
107
+    &:hover {
108
+      &:before/*,
109
+      &:after*/ {
110
+        opacity: 1;
111
+        visibility: visible;
112
+      }
113
+
114
+      /*&:after {
115
+        -webkit-transform: scale3d(1,1,1);
116
+        -moz-transform: scale3d(1,1,1);
117
+        -ms-transform: scale3d(1,1,1);
118
+        -o-transform: scale3d(1,1,1);
119
+        transform: scale3d(1,1,1);
120
+      }*/
121
+    }
122
+  }
123
+
124
+  figcaption {
125
+    padding: 5px 0 0;
126
+    font-size: font-size(13px);
127
+    color: $color-text-breadcrumb;
128
+    line-height: 1.3;
129
+  }
130
+
131
+  &.float_right {
132
+    float: right;
133
+    margin: 0 0 $gutter-default $gutter-default;
134
+  }
135
+
136
+  &.float_left {
137
+    float: left;
138
+    margin: 0 $gutter-default $gutter-default 0;
139
+  }
140
+
141
+  @media screen and (max-width: 599px) {
142
+    &.float_right {
143
+      float: none;
144
+      margin: 0 0 $gutter-default;
145
+    }
146
+
147
+    &.float_left {
148
+      float: none;
149
+      margin: 0 0 $gutter-default;
150
+    }
151
+  }
152
+}
153
+
154
+.embed-wrapper {
155
+  position: relative;
156
+  .embed-arrow {
157
+    z-index: 2;
158
+    background-color: $color-bg-tertiary;
159
+    color: $color-text-invert;
160
+
161
+    position: absolute;
162
+    left: 0;
163
+    top: 0;
164
+    bottom: 0;
165
+    right: 60%;
166
+    right: calc(50% + 250px);
167
+
168
+    @include for-max-size(1200px) {
169
+      right: auto;
170
+      width: 250px;
171
+    }
172
+
173
+    &:before {
174
+      position: absolute;
175
+      top:0;
176
+      bottom: 0;
177
+      left: 100%;
178
+      width: 50px;
179
+      content: '';
180
+      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
181
+      -webkit-background-size: 100% 100%;
182
+      background-size: 100% 100%;
183
+    }
184
+
185
+    + .embed-map {
186
+      right: 0;
187
+      left: 40%;
188
+      left: calc(50% - 250px);
189
+      width: auto;
190
+
191
+      @include for-max-size(1200px) {
192
+        left: 0;
193
+        padding-left: 250px;
194
+
195
+        iframe {
196
+          left: 250px;
197
+          right: 0;
198
+          width: calc(100% - 250px);
199
+        }
200
+      }
201
+    }
202
+  }
203
+  .embed-map {
204
+    z-index: 1;
205
+    position: absolute;
206
+    left: 0;
207
+    top: 0;
208
+    width: 100%;
209
+    height: 100%;
210
+    overflow: hidden;
211
+
212
+    iframe {
213
+      position: absolute;
214
+      top: 0;
215
+      left: 0;
216
+      width: 100%;
217
+      height: 100%;
218
+    }
219
+  }
220
+
221
+  .embed-arrow-inside {
222
+    @include aspect-ratio(2,0.75,true);
223
+    @include centered-1200;
224
+    //z-index: 1;
225
+    display: flex;
226
+    align-items: center;
227
+
228
+    .embed-arrow-text-holder {
229
+      display: inline-flex;
230
+      justify-content: center;
231
+      width: 50%;
232
+      padding-right: 250px;
233
+      @include box-sizing(border-box);
234
+
235
+      @include for-max-size(1200px) {
236
+        width: 235px;
237
+        padding-right: 0;
238
+      }
239
+    }
240
+    .embed-arrow-text {
241
+      z-index: 2;
242
+      em, i {
243
+        font-style: normal;
244
+        color: $color-text-alt;
245
+      }
246
+
247
+      & {
248
+        color: $color-text-invert;
249
+      }
250
+
251
+      h1, h2, h3, h4, h5, h6 {
252
+        text-align: left;
253
+        color: $color-text-alt;
254
+
255
+        em, i {
256
+          color: $color-text-invert;
257
+        }
258
+      }
259
+    }
260
+  }
261
+
262
+  @include for-mobile {
263
+    display: flex;
264
+    flex-direction: column;
265
+    .embed-arrow {
266
+      display: none;
267
+
268
+      + .embed-map {
269
+        order: 2;
270
+        position: relative;
271
+        padding: 0;
272
+        @include aspect-ratio(2,1);
273
+
274
+        iframe {
275
+          width: 100%;
276
+          left: 0;
277
+        }
278
+      }
279
+    }
280
+    .embed-arrow-inside {
281
+      width: 100%;
282
+      justify-content: center;
283
+      order: 1;
284
+      background: $color-bg-tertiary;
285
+
286
+      .embed-arrow-text-holder {
287
+        padding: 50px 0;
288
+        &,
289
+        h1,h2,h3,h4,h5,h6 {
290
+          text-align: center;
291
+        }
292
+      }
293
+    }
294
+  }
295
+}
296
+
297
+/**
298
+ * Icon handling
299
+ */
300
+*[data-icon] {
301
+  &:before {
302
+    @include icon;
303
+    content: attr(data-icon);
304
+    margin-right: 0.5ex;
305
+  }
306
+  &.-after {
307
+    &:before {
308
+      content: none;
309
+    }
310
+    &:after {
311
+      @include icon(attr(data-icon));
312
+      margin-left: 0.5ex;
313
+    }
314
+  }
315
+}
316
+
317
+.show-mobile {
318
+  display: none;
319
+  @include for-mobile {
320
+    display: block;
321
+  }
322
+}
323
+.show-tablet {
324
+  display: none;
325
+  @include for-tablet {
326
+    display: block;
327
+  }
328
+}
329
+.show-tablet-up {
330
+  display: none;
331
+  @include for-tablet-up {
332
+    display: block;
333
+  }
334
+}
335
+.show-desktop-up {
336
+  display: none;
337
+  @include for-desktop-up {
338
+    display: block;
339
+  }
340
+}
341
+
342
+/**
343
+ * Separator
344
+ */
345
+hr {
346
+  border: none;
347
+  border-bottom: 1px $color-stroke-grey solid;
348
+  margin: 1.5em 0;
349
+}
350
+
351
+/**
352
+ * Lists
353
+ */
354
+ul,
355
+ol {
356
+  &.list {
357
+    padding-top: 0.25em;
358
+    margin-bottom: 0.75em;
359
+
360
+    li {
361
+      position: relative;
362
+      line-height: 1.3;
363
+      padding: 0 0 0.25em 15px;
364
+
365
+      &:last-child {
366
+        padding-bottom: 0;
367
+      }
368
+
369
+      &:before {
370
+        //@include icon("\e913",100%,1);
371
+        line-height: 1;
372
+        font-size: 100%;
373
+        content: '\2022';
374
+        color: $color-list-icon;
375
+        position: absolute;
376
+        left: 0;
377
+        top: 0.1em;
378
+      }
379
+
380
+      &[data-icon] {
381
+        &:before {
382
+          content: attr(data-icon);
383
+        }
384
+      }
385
+    }
386
+
387
+    &.list-check {
388
+      li {
389
+        &:before {
390
+          content: '\e98e';
391
+        }
392
+      }
393
+    }
394
+  }
395
+
396
+  &.attribute_list {
397
+    -webkit-box-sizing: border-box;
398
+    -moz-box-sizing: border-box;
399
+    box-sizing: border-box;
400
+
401
+    .attribute {
402
+      font-size: font-size(13px);
403
+      text-transform: uppercase;
404
+      font-weight: 600;
405
+      line-height: 1/13*(12*1.5);
406
+      letter-spacing: 0.1em;
407
+      position: relative;
408
+      padding: 0.25em 0 0.25em 140px;
409
+      min-height: 1.5em;
410
+
411
+      .label {
412
+        font-size: font-size(12px);
413
+        text-transform: uppercase;
414
+        font-weight: 600;
415
+        line-height: 1.5;
416
+        letter-spacing: 0.1em;
417
+        color: $color-bg-quaternary;
418
+        position: absolute;
419
+        max-width: 130px;
420
+        left: 0;
421
+        top: 0.25em;
422
+
423
+        &:after {
424
+          //content: ':';
425
+        }
426
+      }
427
+
428
+      @include for-mobile {
429
+        padding-left: 0;
430
+        margin-bottom: 0.5em;
431
+        .label {
432
+          position: relative;
433
+          left: auto;
434
+          top: auto;
435
+          display: block;
436
+        }
437
+      }
438
+
439
+      &.rows {
440
+        padding-left: 0;
441
+        font-family: $font-family-alternate;
442
+        font-size: font-size(16px);
443
+        letter-spacing: normal;
444
+        text-transform: none;
445
+        line-height: 1/16*(12*1.5);
446
+        margin-bottom: 0.5em;
447
+
448
+        p {
449
+          margin-bottom: 0.5em;
450
+        }
451
+
452
+        .label {
453
+          font-family: $font-family;
454
+          font-size: font-size(12px);
455
+          position: relative;
456
+          left: auto;
457
+          top: auto;
458
+          display: block;
459
+        }
460
+      }
461
+
462
+      &.spacing {
463
+        margin-bottom: 1.5em;
464
+      }
465
+    }
466
+  }
467
+}
468
+
469
+ol {
470
+  padding-left: 1.1em;
471
+
472
+  &.list {
473
+    li {
474
+      padding-left: 5px;
475
+
476
+      &:before {
477
+        content: none;
478
+      }
479
+    }
480
+  }
481
+}
482
+
483
+.ce_text {
484
+  ul,ol {
485
+    @extend .list;
486
+  }
487
+
488
+  a:not(.button) {
489
+    &[target="_blank"]:not(.-ico-dl) {
490
+      &:before {
491
+        content: '';
492
+        width: 1em;
493
+        height: 1em;
494
+        display: inline-block;
495
+        position: relative;
496
+        background: $color-link;
497
+        -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
498
+        mask-image: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 20 20" version="1.1" stroke="none" fill="%23000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M19.354 10.146l-6-6c-0.195-0.195-0.512-0.195-0.707 0s-0.195 0.512 0 0.707l5.146 5.146h-16.293c-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5h16.293l-5.146 5.146c-0.195 0.195-0.195 0.512 0 0.707 0.098 0.098 0.226 0.146 0.354 0.146s0.256-0.049 0.354-0.146l6-6c0.195-0.195 0.195-0.512 0-0.707z"%3E%3C/path%3E%3C/svg%3E');
499
+        -webkit-mask-repeat: no-repeat;
500
+        mask-repeat: no-repeat;
501
+        vertical-align: top;
502
+        margin-right: 10px;
503
+        @include transition(all 0.2s ease);
504
+      }
505
+
506
+      &:hover {
507
+        &:before {
508
+          background: mix($color-link,#000,80%);
509
+          @include transform(translateX(5px));
510
+        }
511
+      }
512
+    }
513
+    /*&.-ico-dl {
514
+      &:before {
515
+        @include icon('\e908');
516
+        margin-right: 5px;
517
+      }
518
+    }
519
+    &.-ico-goto {
520
+      &:before {
521
+        @include icon('\e90a');
522
+        margin-right: 5px;
523
+      }
524
+    }*/
525
+  }
526
+}
527
+
528
+/**
529
+ * Multi column text
530
+ */
531
+.ce_text {
532
+
533
+  &.layout_2col {
534
+
535
+    .text {
536
+      -webkit-column-count: 2;
537
+      -moz-column-count: 2;
538
+      column-count: 2;
539
+      -webkit-column-gap: $gutter-default;
540
+      -moz-column-gap: $gutter-default;
541
+      column-gap: $gutter-default;
542
+
543
+      p, div, ul, ol, dl {
544
+        break-inside: avoid-column;
545
+        break-before: auto;
546
+      }
547
+
548
+      h1, h2, h3, h4, h5, h6 {
549
+        break-inside: avoid-column;
550
+        break-after: avoid-column;
551
+      }
552
+    }
553
+
554
+    @media screen and (max-width: 599px) {
555
+      .text {
556
+        -webkit-column-count: 1;
557
+        -moz-column-count: 1;
558
+        column-count: 1;
559
+      }
560
+    }
561
+  }
562
+}
563
+
564
+/**
565
+ * Back links
566
+ */
567
+p.back,
568
+.ce_hyperlink.back {
569
+  clear: both;
570
+  > a {
571
+    text-transform: uppercase;
572
+    font-size: font-size(14px);
573
+    font-weight: 600;
574
+    color: $color-text;
575
+    letter-spacing: 0.1em;
576
+
577
+    svg {
578
+      vertical-align: -1px;
579
+      font-size: font-size(12px);
580
+    }
581
+  }
582
+}
583
+
584
+/**
585
+ * Boxes
586
+ */
587
+%box {
588
+  @include box;
589
+}
590
+
591
+%box-white {
592
+  @include box-white;
593
+}
594
+
595
+%box-grey {
596
+  @include box-grey;
597
+}
598
+
599
+.box {
600
+  @extend %box;
601
+}
602
+
603
+/**
604
+ * Slider related
605
+ */
606
+.negate-slider-pagination {
607
+  margin-bottom: -30px;
608
+
609
+  /*@media screen and (max-width: 900px) {
610
+    &.-medium-col-1-1 {
611
+      margin-bottom: 0;
612
+    }
613
+  }
614
+  @media screen and (max-width: 599px) {
615
+    &.-small-col-1-1 {
616
+      margin-bottom: 0;
617
+    }
618
+  }*/
619
+}
620
+
621
+/**
622
+ * PAGINATION
623
+ */
624
+.pagination {
625
+  @include box;
626
+  line-height: 35px;
627
+  display: flex;
628
+  p {
629
+    font-size: font-size(14px);
630
+    float: left;
631
+    font-weight: 600;
632
+    letter-spacing: 0.1em;
633
+    text-transform: uppercase;
634
+    margin: 0 auto 0 0;
635
+  }
636
+
637
+  ul {
638
+    text-align: center;
639
+    position: relative;
640
+    padding: 0;
641
+    margin: 0 0 0 auto;
642
+  }
643
+
644
+  li {
645
+    display: inline-block;
646
+    vertical-align: middle;
647
+    margin-bottom: 0;
648
+
649
+    a {
650
+      &:hover {
651
+        border-bottom-color: $color-bg-secondary;
652
+        color: mix($color-link,#000,60%);
653
+      }
654
+    }
655
+
656
+    a,strong {
657
+      font-weight: 400;
658
+      display: block;
659
+      min-width: 1.5em;
660
+      height: 2em;
661
+      line-height: 2em;
662
+      padding: 0 0.125em;
663
+      -webkit-box-sizing: border-box;
664
+      -moz-box-sizing: border-box;
665
+      box-sizing: border-box;
666
+      border-bottom: 2px transparent solid;
667
+      color: $color-link;
668
+      text-align: center;
669
+      -webkit-transition: all 0.25s;
670
+      -moz-transition: all 0.25s;
671
+      -ms-transition: all 0.25s;
672
+      -o-transition: all 0.25s;
673
+      transition: all 0.25s;
674
+
675
+      &.active
676
+      {
677
+        border-bottom-color: $color-bg-secondary;
678
+        color: $color-text;
679
+        font-weight: 600;
680
+      }
681
+
682
+      &.next,
683
+      &.previous,
684
+      &.first,
685
+      &.last {
686
+        position: relative;
687
+        text-indent: -9999em;
688
+        overflow: hidden;
689
+        //color: $color-link;
690
+        &:before,
691
+        &:after {
692
+          content: '';
693
+          width: 1em;
694
+          height: 1em;
695
+          position: absolute;
696
+          left: 50%;
697
+          top: 50%;
698
+          @include transform(translate(-50%,-50%));
699
+        }
700
+      }
701
+
702
+      &.next {
703
+        &:before {
704
+          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;
705
+        }
706
+      }
707
+
708
+      &.previous {
709
+        &:before {
710
+          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
711
+        }
712
+      }
713
+
714
+      &.last {
715
+        &:before {
716
+          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;
717
+        }
718
+      }
719
+
720
+      &.first {
721
+        &:before {
722
+          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="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat;
723
+        }
724
+      }
725
+    }
726
+  }
727
+}
728
+
729
+
730
+/* --- CALLOUTS --- */
731
+.callout {
732
+  border-left: 30px solid #BBB;
733
+  background-color: #EEE;
734
+  padding: 15px 15px 15px 15px;
735
+  display: block;
736
+  position: relative;
737
+  margin-bottom: 0.75em;
738
+
739
+  &.info {
740
+    border-left-color: #fab200;
741
+    background-color: #fff3d4;
742
+    color: #966c00;
743
+
744
+  }
745
+
746
+  &.success {
747
+    border-left-color: #52A256;
748
+    background-color: #e7f3e7;
749
+    color: #376c39;
750
+
751
+    &:before {
752
+      content: "\e86c";
753
+    }
754
+  }
755
+
756
+  &.warning {
757
+    border-left-color: #e27b41;
758
+    background-color: #faeae0;
759
+    color: #b6531c;
760
+
761
+    &:before {
762
+      content: "\e002";
763
+    }
764
+  }
765
+
766
+  &.danger {
767
+    border-left-color: #E84F4F;
768
+    background-color: #fce8e8;
769
+    color: #b91818;
770
+
771
+    &:before {
772
+      content: "\e000";
773
+    }
774
+  }
775
+
776
+  &:before {
777
+    position: absolute;
778
+    left: -15px;
779
+    top: 50%;
780
+    line-height: 1;
781
+    text-align: center;
782
+    @include iconfont;
783
+    font-size: font-size(20px);
784
+    color: #fff;
785
+    content: "\eaae";
786
+    -webkit-transform: translate(-50%, -50%);
787
+    -moz-transform: translate(-50%, -50%);
788
+    -ms-transform: translate(-50%, -50%);
789
+    -o-transform: translate(-50%, -50%);
790
+    transform: translate(-50%, -50%);
791
+  }
792
+}
793
+
794
+
795
+/**
796
+ * Gallery
797
+ */
798
+.ce_gallery  ul {
799
+  display: flex;
800
+  align-items: flex-start;
801
+  flex-wrap: wrap;
802
+  margin-left: -#{$gutter-default};
803
+
804
+  & > li {
805
+    flex: 0;
806
+    max-width: 100%;
807
+    min-width: 0;
808
+    margin-top: $gutter-default;
809
+    margin-left: $gutter-default;
810
+
811
+    &.row_first {
812
+      margin-top: 0;
813
+    }
814
+
815
+  }
816
+
817
+  @for $i from 1 through 12 {
818
+    &.cols_#{$i} > li {
819
+      flex-basis: 100% / $i - $gutter-default;
820
+    }
821
+  }
822
+
823
+  @media screen and (max-width: 900px) {
824
+    $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%;
825
+    margin-left: -#{$gutter};
826
+
827
+    & > li {
828
+      margin-top: $gutter;
829
+      margin-left: $gutter;
830
+
831
+      &.row_first {
832
+        margin-top: 0;
833
+      }
834
+    }
835
+
836
+    @for $i from 1 through 12 {
837
+      &.cols_#{$i} > li {
838
+        flex-basis: 100% / $i - $gutter;
839
+      }
840
+    }
841
+  }
842
+
843
+  @media screen and (max-width: 599px) {
844
+    $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%;
845
+    margin-left: -#{$gutter};
846
+
847
+    & > li {
848
+      margin-top: $gutter;
849
+      margin-left: $gutter;
850
+
851
+      &.row_first {
852
+        margin-top: $gutter;
853
+      }
854
+
855
+      &:first-child {
856
+        margin-top: 0;
857
+      }
858
+    }
859
+
860
+    @for $i from 1 through 12 {
861
+      &.cols_#{$i} > li {
862
+        flex-basis: 100% - $gutter;
863
+      }
864
+    }
865
+  }
866
+}
867
+
868
+.ce_form {
869
+  position: relative;
870
+  padding: 0 12.5%;
871
+  -webkit-box-sizing: border-box;
872
+  -moz-box-sizing: border-box;
873
+  box-sizing: border-box;
874
+
875
+  @include for-tablet {
876
+    padding: 6.25%;
877
+  }
878
+  @include for-mobile {
879
+    padding: 0;
880
+  }
881
+}
882
+
883
+p.info {
884
+  font-size: font-size(12px);
885
+  text-transform: uppercase;
886
+  color: $color-text-info;
887
+  letter-spacing: 0.1em;
888
+  line-height: 1.3;
889
+  font-weight: 600;
890
+}
0 891
\ No newline at end of file