source: main/waeup-hugo/public/css/main.css @ 17950

Last change on this file since 17950 was 17133, checked in by Henrik Bettermann, 2 years ago

Use Google fonts locally.
File size: 31.9 KB
RevLine 
[17133]1
[14926]2/*
3        Dimension by HTML5 UP
4        html5up.net | @ajlkn
5        Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
6*/
7/* Reset */
8html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
9  margin: 0;
10  padding: 0;
11  border: 0;
12  font-size: 100%;
13  font: inherit;
14  vertical-align: baseline; }
15
16article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
17  display: block; }
18
19body {
20  line-height: 1; }
21
22ol, ul {
23  list-style: none; }
24
25blockquote, q {
26  quotes: none; }
27
28blockquote:before, blockquote:after, q:before, q:after {
29  content: '';
30  content: none; }
31
32table {
33  border-collapse: collapse;
34  border-spacing: 0; }
35
36body {
37  -webkit-text-size-adjust: none; }
38
39/* Box Model */
40*, *:before, *:after {
41  -moz-box-sizing: border-box;
42  -webkit-box-sizing: border-box;
43  box-sizing: border-box; }
44
45/* Basic */
46@-ms-viewport {
47  width: device-width; }
48@media screen and (max-width: 480px) {
49  html, body {
50    min-width: 320px; } }
51body {
52  background: #1b1f22; }
53  body.is-loading *, body.is-loading *:before, body.is-loading *:after, body.is-switching *, body.is-switching *:before, body.is-switching *:after {
54    -moz-animation: none !important;
55    -webkit-animation: none !important;
56    -ms-animation: none !important;
57    animation: none !important;
58    -moz-transition: none !important;
59    -webkit-transition: none !important;
60    -ms-transition: none !important;
61    transition: none !important;
62    -moz-transition-delay: none !important;
63    -webkit-transition-delay: none !important;
64    -ms-transition-delay: none !important;
65    transition-delay: none !important; }
66
67/* Type */
68html {
69  font-size: 16pt; }
70  @media screen and (max-width: 1680px) {
71    html {
72      font-size: 12pt; } }
73  @media screen and (max-width: 736px) {
74    html {
75      font-size: 11pt; } }
76  @media screen and (max-width: 360px) {
77    html {
78      font-size: 10pt; } }
79
80body, input, select, textarea {
81  color: #ffffff;
82  font-family: "Source Sans Pro", sans-serif;
83  font-weight: 300;
84  font-size: 1rem;
85  line-height: 1.65; }
86
87a {
88  -moz-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
89  -webkit-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
90  -ms-transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
91  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
92  border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
93  text-decoration: none;
94  color: inherit; }
95  a:hover {
96    border-bottom-color: transparent; }
97
98strong, b {
99  color: #ffffff;
100  font-weight: 600; }
101
102em, i {
103  font-style: italic; }
104
105p {
106  margin: 0 0 2rem 0; }
107
108h1, h2, h3, h4, h5, h6 {
109  color: #ffffff;
110  font-weight: 600;
111  line-height: 1.5;
112  margin: 0 0 1rem 0;
113  text-transform: uppercase;
114  letter-spacing: 0.2rem; }
115  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
116    color: inherit;
117    text-decoration: none; }
118  h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
119    border-bottom: solid 1px #ffffff;
120    width: -moz-max-content;
121    width: -webkit-max-content;
122    width: -ms-max-content;
123    width: max-content;
124    padding-bottom: 0.5rem;
125    margin: 0 0 2rem 0; }
126
127h1 {
128  font-size: 2.25rem;
129  line-height: 1.3;
130  letter-spacing: 0.5rem; }
131
132h2 {
133  font-size: 1.5rem;
134  line-height: 1.4;
135  letter-spacing: 0.5rem; }
136
137h3 {
138  font-size: 1rem; }
139
140h4 {
141  font-size: 0.8rem; }
142
143h5 {
144  font-size: 0.7rem; }
145
146h6 {
147  font-size: 0.6rem; }
148
149@media screen and (max-width: 736px) {
150  h1 {
151    font-size: 1.75rem;
152    line-height: 1.4; }
153
154  h2 {
155    font-size: 1.25em;
156    line-height: 1.5; } }
157sub {
158  font-size: 0.8rem;
159  position: relative;
160  top: 0.5rem; }
161
162sup {
163  font-size: 0.8rem;
164  position: relative;
165  top: -0.5rem; }
166
167blockquote {
168  border-left: solid 4px #ffffff;
169  font-style: italic;
170  margin: 0 0 2rem 0;
171  padding: 0.5rem 0 0.5rem 2rem; }
172
173code {
174  background: rgba(255, 255, 255, 0.075);
175  border-radius: 4px;
176  font-family: "Courier New", monospace;
177  font-size: 0.9rem;
178  margin: 0 0.25rem;
179  padding: 0.25rem 0.65rem; }
180
181pre {
182  -webkit-overflow-scrolling: touch;
183  font-family: "Courier New", monospace;
184  font-size: 0.9rem;
185  margin: 0 0 2rem 0; }
186  pre code {
187    display: block;
188    line-height: 1.75;
189    padding: 1rem 1.5rem;
190    overflow-x: auto; }
191
192hr {
193  border: 0;
194  border-bottom: solid 1px #ffffff;
195  margin: 2.75rem 0; }
196
197.align-left {
198  text-align: left; }
199
200.align-center {
201  text-align: center; }
202
203.align-right {
204  text-align: right; }
205
206/* Form */
207form {
208  margin: 0 0 2.5rem 0; }
209  form .field {
210    margin: 0 0 1.5rem 0; }
211    form .field.half {
212      width: 50%;
213      float: left;
214      padding: 0 0 0 0.75rem; }
215      form .field.half.first {
216        padding: 0 0.75rem 0 0; }
217  form > .actions {
218    margin: 1.875rem 0 0 0 !important; }
219  @media screen and (max-width: 736px) {
220    form .field {
221      margin: 0 0 1.125rem 0; }
222      form .field.half {
223        padding: 0 0 0 0.5625rem; }
224        form .field.half.first {
225          padding: 0 0.5625rem 0 0; }
226    form > .actions {
227      margin: 1.5rem 0 0 0 !important; } }
228  @media screen and (max-width: 480px) {
229    form .field.half {
230      width: 100%;
231      float: none;
232      padding: 0; }
233      form .field.half.first {
234        padding: 0; } }
235
236label {
237  color: #ffffff;
238  display: block;
239  font-size: 0.8rem;
240  font-weight: 300;
241  letter-spacing: 0.2rem;
242  line-height: 1.5;
243  margin: 0 0 1rem 0;
244  text-transform: uppercase; }
245
246input[type="text"],
247input[type="password"],
248input[type="email"],
249input[type="tel"],
250select,
251textarea {
252  -moz-appearance: none;
253  -webkit-appearance: none;
254  -ms-appearance: none;
255  appearance: none;
256  -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
257  -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
258  -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
259  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
260  background: transparent;
261  border-radius: 4px;
262  border: solid 1px #ffffff;
263  color: inherit;
264  display: block;
265  outline: 0;
266  padding: 0 1rem;
267  text-decoration: none;
268  width: 100%; }
269  input[type="text"]:invalid,
270  input[type="password"]:invalid,
271  input[type="email"]:invalid,
272  input[type="tel"]:invalid,
273  select:invalid,
274  textarea:invalid {
275    box-shadow: none; }
276  input[type="text"]:focus,
277  input[type="password"]:focus,
278  input[type="email"]:focus,
279  input[type="tel"]:focus,
280  select:focus,
281  textarea:focus {
282    background: rgba(255, 255, 255, 0.075);
283    border-color: #ffffff;
284    box-shadow: 0 0 0 1px #ffffff; }
285
286select option {
287  background: #1b1f22;
288  color: #ffffff; }
289
290.select-wrapper {
291  text-decoration: none;
292  display: block;
293  position: relative; }
294  .select-wrapper:before {
295    -moz-osx-font-smoothing: grayscale;
296    -webkit-font-smoothing: antialiased;
297    font-family: FontAwesome;
298    font-style: normal;
299    font-weight: normal;
300    text-transform: none !important; }
301  .select-wrapper:before {
302    color: #ffffff;
303    content: '\f107';
304    display: block;
305    height: 2.75rem;
306    line-height: calc(2.75rem + 0em);
307    pointer-events: none;
308    position: absolute;
309    right: 0;
310    text-align: center;
311    top: 0;
312    width: 2.75rem; }
313  .select-wrapper select::-ms-expand {
314    display: none; }
315
316input[type="text"],
317input[type="password"],
318input[type="email"],
319select {
320  height: 2.75rem; }
321
322textarea {
323  padding: 0.75rem 1rem; }
324
325input[type="checkbox"],
326input[type="radio"] {
327  -moz-appearance: none;
328  -webkit-appearance: none;
329  -ms-appearance: none;
330  appearance: none;
331  display: block;
332  float: left;
333  margin-right: -2rem;
334  opacity: 0;
335  width: 1rem;
336  z-index: -1; }
337  input[type="checkbox"] + label,
338  input[type="radio"] + label {
339    text-decoration: none;
340    -moz-user-select: none;
341    -webkit-user-select: none;
342    -ms-user-select: none;
343    user-select: none;
344    color: #ffffff;
345    cursor: pointer;
346    display: inline-block;
347    font-size: 0.8rem;
348    font-weight: 300;
349    margin: 0 0 0.5rem 0;
350    padding-left: 2.65rem;
351    padding-right: 0.75rem;
352    position: relative; }
353    input[type="checkbox"] + label:before,
354    input[type="radio"] + label:before {
355      -moz-osx-font-smoothing: grayscale;
356      -webkit-font-smoothing: antialiased;
357      font-family: FontAwesome;
358      font-style: normal;
359      font-weight: normal;
360      text-transform: none !important; }
361    input[type="checkbox"] + label:before,
362    input[type="radio"] + label:before {
363      -moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
364      -webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
365      -ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
366      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
367      border-radius: 4px;
368      border: solid 1px #ffffff;
369      content: '';
370      display: inline-block;
371      height: 1.65rem;
372      left: 0;
373      line-height: calc(1.58125rem + 0em);
374      position: absolute;
375      text-align: center;
376      top: -0.125rem;
377      width: 1.65rem; }
378  input[type="checkbox"]:checked + label:before,
379  input[type="radio"]:checked + label:before {
380    background: #ffffff !important;
381    border-color: #ffffff !important;
382    color: #1b1f22;
383    content: '\f00c'; }
384  input[type="checkbox"]:focus + label:before,
385  input[type="radio"]:focus + label:before {
386    background: rgba(255, 255, 255, 0.075);
387    border-color: #ffffff;
388    box-shadow: 0 0 0 1px #ffffff; }
389
390input[type="checkbox"] + label:before {
391  border-radius: 4px; }
392
393input[type="radio"] + label:before {
394  border-radius: 100%; }
395
396::-webkit-input-placeholder {
397  color: rgba(255, 255, 255, 0.5) !important;
398  opacity: 1.0; }
399
400:-moz-placeholder {
401  color: rgba(255, 255, 255, 0.5) !important;
402  opacity: 1.0; }
403
404::-moz-placeholder {
405  color: rgba(255, 255, 255, 0.5) !important;
406  opacity: 1.0; }
407
408:-ms-input-placeholder {
409  color: rgba(255, 255, 255, 0.5) !important;
410  opacity: 1.0; }
411
412.formerize-placeholder {
413  color: rgba(255, 255, 255, 0.5) !important;
414  opacity: 1.0; }
415
416/* Box */
417.box {
418  border-radius: 4px;
419  border: solid 1px #ffffff;
420  margin-bottom: 2rem;
421  padding: 1.5em; }
422  .box > :last-child,
423  .box > :last-child > :last-child,
424  .box > :last-child > :last-child > :last-child {
425    margin-bottom: 0; }
426  .box.alt {
427    border: 0;
428    border-radius: 0;
429    padding: 0; }
430
431/* Icon */
432.icon {
433  text-decoration: none;
434  border-bottom: none;
435  position: relative; }
436  .icon:before {
437    -moz-osx-font-smoothing: grayscale;
438    -webkit-font-smoothing: antialiased;
439    font-family: FontAwesome;
440    font-style: normal;
441    font-weight: normal;
442    text-transform: none !important; }
443  .icon > .label {
444    display: none; }
445
446/* Image */
447.image {
448  border-radius: 4px;
449  border: 0;
450  display: inline-block;
451  position: relative; }
452  .image:before {
453    -moz-pointer-events: none;
454    -webkit-pointer-events: none;
455    -ms-pointer-events: none;
456    pointer-events: none;
457    background-image: url("/images/overlay.png");
458    background-color: rgba(19, 21, 25, 0.5);
459    border-radius: 4px;
460    content: '';
461    display: block;
462    height: 100%;
463    left: 0;
464    opacity: 0.5;
465    position: absolute;
466    top: 0;
467    width: 100%; }
468  .image img {
469    border-radius: 4px;
470    display: block; }
471  .image.left, .image.right {
472    max-width: 40%; }
473    .image.left img, .image.right img {
474      width: 100%; }
475  .image.left {
476    float: left;
477    padding: 0 1.5em 1em 0;
478    top: 0.25em; }
479  .image.right {
480    float: right;
481    padding: 0 0 1em 1.5em;
482    top: 0.25em; }
483  .image.fit {
484    display: block;
485    margin: 0 0 2rem 0;
486    width: 100%; }
487    .image.fit img {
488      width: 100%; }
489  .image.main {
490    display: block;
491    margin: 2.5rem 0;
492    width: 100%; }
493    .image.main img {
494      width: 100%; }
495  @media screen and (max-width: 736px) {
496    .image.main {
497      margin: 2rem 0; } }
498  @media screen and (max-width: 480px) {
499    .image.main {
500      margin: 1.5rem 0; } }
501
502/* List */
503ol {
504  list-style: decimal;
505  margin: 0 0 2rem 0;
506  padding-left: 1.25em; }
507  ol li {
508    padding-left: 0.25em; }
509
510ul {
511  list-style: disc;
512  margin: 0 0 2rem 0;
513  padding-left: 1em; }
514  ul li {
515    padding-left: 0.5em; }
516  ul.alt {
517    list-style: none;
518    padding-left: 0; }
519    ul.alt li {
520      border-top: solid 1px #ffffff;
521      padding: 0.5em 0; }
522      ul.alt li:first-child {
523        border-top: 0;
524        padding-top: 0; }
525  ul.icons {
526    cursor: default;
527    list-style: none;
528    padding-left: 0; }
529    ul.icons li {
530      display: inline-block;
531      padding: 0 0.75em 0 0; }
532      ul.icons li:last-child {
533        padding-right: 0; }
534      ul.icons li a {
535        border-radius: 100%;
536        box-shadow: inset 0 0 0 1px #ffffff;
537        display: inline-block;
538        height: 2.25rem;
539        line-height: 2.25rem;
540        text-align: center;
541        width: 2.25rem; }
542        ul.icons li a:hover {
543          background-color: rgba(255, 255, 255, 0.075); }
544        ul.icons li a:active {
545          background-color: rgba(255, 255, 255, 0.175); }
546  ul.actions {
547    cursor: default;
548    list-style: none;
549    padding-left: 0; }
550    ul.actions li {
551      display: inline-block;
552      padding: 0 1rem 0 0;
553      vertical-align: middle; }
554      ul.actions li:last-child {
555        padding-right: 0; }
556    ul.actions.small li {
557      padding: 0 0.5rem 0 0; }
558    ul.actions.vertical li {
559      display: block;
560      padding: 1rem 0 0 0; }
561      ul.actions.vertical li:first-child {
562        padding-top: 0; }
563      ul.actions.vertical li > * {
564        margin-bottom: 0; }
565    ul.actions.vertical.small li {
566      padding: 0.5rem 0 0 0; }
567      ul.actions.vertical.small li:first-child {
568        padding-top: 0; }
569    ul.actions.fit {
570      display: table;
571      margin-left: -1rem;
572      padding: 0;
573      table-layout: fixed;
574      width: calc(100% + 1rem); }
575      ul.actions.fit li {
576        display: table-cell;
577        padding: 0 0 0 1rem; }
578        ul.actions.fit li > * {
579          margin-bottom: 0; }
580      ul.actions.fit.small {
581        margin-left: -0.5rem;
582        width: calc(100% + 0.5rem); }
583        ul.actions.fit.small li {
584          padding: 0 0 0 0.5rem; }
585    @media screen and (max-width: 480px) {
586      ul.actions {
587        margin: 0 0 2rem 0; }
588        ul.actions li {
589          padding: 1rem 0 0 0;
590          display: block;
591          text-align: center;
592          width: 100%; }
593          ul.actions li:first-child {
594            padding-top: 0; }
595          ul.actions li > * {
596            width: 100%;
597            margin: 0 !important; }
598            ul.actions li > *.icon:before {
599              margin-left: -2em; }
600        ul.actions.small li {
601          padding: 0.5rem 0 0 0; }
602          ul.actions.small li:first-child {
603            padding-top: 0; } }
604
605dl {
606  margin: 0 0 2rem 0; }
607  dl dt {
608    display: block;
609    font-weight: 600;
610    margin: 0 0 1rem 0; }
611  dl dd {
612    margin-left: 2rem; }
613
614/* Table */
615.table-wrapper {
616  -webkit-overflow-scrolling: touch;
617  overflow-x: auto; }
618
619table {
620  margin: 0 0 2rem 0;
621  width: 100%; }
622  table tbody tr {
623    border: solid 1px #ffffff;
624    border-left: 0;
625    border-right: 0; }
626    table tbody tr:nth-child(2n + 1) {
627      background-color: rgba(255, 255, 255, 0.075); }
628  table td {
629    padding: 0.75em 0.75em; }
630  table th {
631    color: #ffffff;
632    font-size: 0.9em;
633    font-weight: 600;
634    padding: 0 0.75em 0.75em 0.75em;
635    text-align: left; }
636  table thead {
637    border-bottom: solid 2px #ffffff; }
638  table tfoot {
639    border-top: solid 2px #ffffff; }
640  table.alt {
641    border-collapse: separate; }
642    table.alt tbody tr td {
643      border: solid 1px #ffffff;
644      border-left-width: 0;
645      border-top-width: 0; }
646      table.alt tbody tr td:first-child {
647        border-left-width: 1px; }
648    table.alt tbody tr:first-child td {
649      border-top-width: 1px; }
650    table.alt thead {
651      border-bottom: 0; }
652    table.alt tfoot {
653      border-top: 0; }
654
655/* Button */
656input[type="submit"],
657input[type="reset"],
658input[type="button"],
659button,
660.button {
661  -moz-appearance: none;
662  -webkit-appearance: none;
663  -ms-appearance: none;
664  appearance: none;
665  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
666  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
667  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
668  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
669  background-color: transparent;
670  border-radius: 4px;
671  border: 0;
672  box-shadow: inset 0 0 0 1px #ffffff;
673  color: #ffffff !important;
674  cursor: pointer;
675  display: inline-block;
676  font-size: 0.8rem;
677  font-weight: 300;
678  height: 2.75rem;
679  letter-spacing: 0.2rem;
680  line-height: 2.75rem;
681  outline: 0;
682  padding: 0 1.25rem 0 1.35rem;
683  text-align: center;
684  text-decoration: none;
685  text-transform: uppercase;
686  white-space: nowrap; }
687  input[type="submit"]:hover,
688  input[type="reset"]:hover,
689  input[type="button"]:hover,
690  button:hover,
691  .button:hover {
692    background-color: rgba(255, 255, 255, 0.075); }
693  input[type="submit"]:active,
694  input[type="reset"]:active,
695  input[type="button"]:active,
696  button:active,
697  .button:active {
698    background-color: rgba(255, 255, 255, 0.175); }
699  input[type="submit"].icon:before,
700  input[type="reset"].icon:before,
701  input[type="button"].icon:before,
702  button.icon:before,
703  .button.icon:before {
704    margin-right: 0.5em; }
705  input[type="submit"].fit,
706  input[type="reset"].fit,
707  input[type="button"].fit,
708  button.fit,
709  .button.fit {
710    display: block;
711    margin: 0 0 1rem 0;
712    width: 100%; }
713  input[type="submit"].special,
714  input[type="reset"].special,
715  input[type="button"].special,
716  button.special,
717  .button.special {
718    background-color: #ffffff;
719    color: #1b1f22 !important;
720    font-weight: 600; }
721  input[type="submit"].disabled, input[type="submit"]:disabled,
722  input[type="reset"].disabled,
723  input[type="reset"]:disabled,
724  input[type="button"].disabled,
725  input[type="button"]:disabled,
726  button.disabled,
727  button:disabled,
728  .button.disabled,
729  .button:disabled {
730    -moz-pointer-events: none;
731    -webkit-pointer-events: none;
732    -ms-pointer-events: none;
733    pointer-events: none;
734    cursor: default;
735    opacity: 0.25; }
736
737input[type="submit"],
738input[type="reset"],
739input[type="button"],
740button {
741  line-height: calc(2.75rem - 2px); }
742
743/* BG */
744#bg {
745  -moz-transform: scale(1.0);
746  -webkit-transform: scale(1.0);
747  -ms-transform: scale(1.0);
748  transform: scale(1.0);
749  -webkit-backface-visibility: hidden;
750  position: fixed;
751  top: 0;
752  left: 0;
753  width: 100%;
754  height: 100vh;
755  z-index: 1; }
756  #bg:before, #bg:after {
757    content: '';
758    display: block;
759    position: absolute;
760    top: 0;
761    left: 0;
762    width: 100%;
763    height: 100%; }
764  #bg:before {
765    -moz-transition: background-color 2.5s ease-in-out;
766    -webkit-transition: background-color 2.5s ease-in-out;
767    -ms-transition: background-color 2.5s ease-in-out;
768    transition: background-color 2.5s ease-in-out;
769    -moz-transition-delay: 0.75s;
770    -webkit-transition-delay: 0.75s;
771    -ms-transition-delay: 0.75s;
772    transition-delay: 0.75s;
773    background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("/images/overlay.png");
774    background-size: auto, 256px 256px;
775    background-position: center, center;
776    background-repeat: no-repeat, repeat;
777    z-index: 2; }
778  #bg:after {
779    -moz-transform: scale(1.125);
780    -webkit-transform: scale(1.125);
781    -ms-transform: scale(1.125);
782    transform: scale(1.125);
783    -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
784    -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
785    -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
786    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
787    background-image: url("/images/bg.jpg");
788    background-position: center;
789    background-size: cover;
790    background-repeat: no-repeat;
791    z-index: 1; }
792  body.is-article-visible #bg:after {
793    -moz-transform: scale(1.0825);
794    -webkit-transform: scale(1.0825);
795    -ms-transform: scale(1.0825);
796    transform: scale(1.0825);
797    -moz-filter: blur(0.2rem);
798    -webkit-filter: blur(0.2rem);
799    -ms-filter: blur(0.2rem);
800    filter: blur(0.2rem); }
801  body.is-loading #bg:before {
802    background-color: #000000; }
803
804/* Wrapper */
805#wrapper {
806  display: -moz-flex;
807  display: -webkit-flex;
808  display: -ms-flex;
809  display: flex;
810  -moz-flex-direction: column;
811  -webkit-flex-direction: column;
812  -ms-flex-direction: column;
813  flex-direction: column;
814  -moz-align-items: center;
815  -webkit-align-items: center;
816  -ms-align-items: center;
817  align-items: center;
818  -moz-justify-content: space-between;
819  -webkit-justify-content: space-between;
820  -ms-justify-content: space-between;
821  justify-content: space-between;
822  position: relative;
823  min-height: 100vh;
824  width: 100%;
825  padding: 4rem 2rem;
826  z-index: 3; }
827  #wrapper:before {
828    content: '';
829    display: block; }
830  @media screen and (max-width: 1680px) {
831    #wrapper {
832      padding: 3rem 2rem; } }
833  @media screen and (max-width: 736px) {
834    #wrapper {
835      padding: 2rem 1rem; } }
836  @media screen and (max-width: 480px) {
837    #wrapper {
838      padding: 1rem; } }
839
840/* Header */
841#header {
842  display: -moz-flex;
843  display: -webkit-flex;
844  display: -ms-flex;
845  display: flex;
846  -moz-flex-direction: column;
847  -webkit-flex-direction: column;
848  -ms-flex-direction: column;
849  flex-direction: column;
850  -moz-align-items: center;
851  -webkit-align-items: center;
852  -ms-align-items: center;
853  align-items: center;
854  -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
855  -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
856  -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
857  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
858  background-image: -moz-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%);
859  background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%);
860  background-image: -ms-radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%);
861  background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, transparent 55%);
862  max-width: 100%;
863  text-align: center; }
864  #header > * {
865    -moz-transition: opacity 0.325s ease-in-out;
866    -webkit-transition: opacity 0.325s ease-in-out;
867    -ms-transition: opacity 0.325s ease-in-out;
868    transition: opacity 0.325s ease-in-out;
869    position: relative;
870    margin-top: 3.5rem; }
871    #header > *:before {
872      content: '';
873      display: block;
874      position: absolute;
875      top: calc(-3.5rem - 1px);
876      left: calc(50% - 1px);
877      width: 1px;
878      height: calc(3.5rem + 1px);
879      background: #ffffff; }
880  #header > :first-child {
881    margin-top: 0; }
882    #header > :first-child:before {
883      display: none; }
884  #header .logo {
885    width: 5.5rem;
886    height: 5.5rem;
887    line-height: 5.5rem;
888    border: solid 1px #ffffff;
889    border-radius: 100%; }
890    #header .logo .icon:before {
891      font-size: 2rem; }
892  #header .content {
893    border-style: solid;
894    border-color: #ffffff;
895    border-top-width: 1px;
896    border-bottom-width: 1px;
897    max-width: 100%; }
898    #header .content .inner {
899      -moz-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
900      -webkit-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
901      -ms-transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
902      transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out;
903      -moz-transition-delay: 0.25s;
904      -webkit-transition-delay: 0.25s;
905      -ms-transition-delay: 0.25s;
906      transition-delay: 0.25s;
907      padding: 3rem 2rem;
908      max-height: 40rem;
909      overflow: hidden; }
910      #header .content .inner > :last-child {
911        margin-bottom: 0; }
912    #header .content p {
913      text-transform: uppercase;
914      letter-spacing: 0.2rem;
915      font-size: 0.8rem;
916      line-height: 2; }
917  #header nav ul {
918    display: -moz-flex;
919    display: -webkit-flex;
920    display: -ms-flex;
921    display: flex;
922    margin-bottom: 0;
923    list-style: none;
924    padding-left: 0;
925    border: solid 1px #ffffff;
926    border-radius: 4px; }
927    #header nav ul li {
928      padding-left: 0;
929      border-left: solid 1px #ffffff; }
930      #header nav ul li:first-child {
931        border-left: 0; }
932      #header nav ul li a {
933        display: block;
934        min-width: 7.5rem;
935        height: 2.75rem;
936        line-height: 2.75rem;
937        padding: 0 1.25rem 0 1.45rem;
938        text-transform: uppercase;
939        letter-spacing: 0.2rem;
940        font-size: 0.8rem;
941        border-bottom: 0; }
942        #header nav ul li a:hover {
943          background-color: rgba(255, 255, 255, 0.075); }
944        #header nav ul li a:active {
945          background-color: rgba(255, 255, 255, 0.175); }
946  #header nav.use-middle:after {
947    content: '';
948    display: block;
949    position: absolute;
950    top: 0;
951    left: calc(50% - 1px);
952    width: 1px;
953    height: 100%;
954    background: #ffffff; }
955  #header nav.use-middle ul li.is-middle {
956    border-left: 0; }
957  body.is-article-visible #header {
958    -moz-transform: scale(0.95);
959    -webkit-transform: scale(0.95);
960    -ms-transform: scale(0.95);
961    transform: scale(0.95);
962    -moz-filter: blur(0.1rem);
963    -webkit-filter: blur(0.1rem);
964    -ms-filter: blur(0.1rem);
965    filter: blur(0.1rem);
966    opacity: 0; }
967  body.is-loading #header {
968    -moz-filter: blur(0.125rem);
969    -webkit-filter: blur(0.125rem);
970    -ms-filter: blur(0.125rem);
971    filter: blur(0.125rem); }
972    body.is-loading #header > * {
973      opacity: 0; }
974    body.is-loading #header .content .inner {
975      max-height: 0;
976      padding-top: 0;
977      padding-bottom: 0;
978      opacity: 0; }
979  @media screen and (max-width: 980px) {
980    #header .content p br {
981      display: none; } }
982  @media screen and (max-width: 736px) {
983    #header > * {
984      margin-top: 2rem; }
985      #header > *:before {
986        top: calc(-2rem - 1px);
987        height: calc(2rem + 1px); }
988    #header .logo {
989      width: 4.75rem;
990      height: 4.75rem;
991      line-height: 4.75rem; }
992      #header .logo .icon:before {
993        font-size: 1.75rem; }
994    #header .content .inner {
995      padding: 2.5rem 1rem; }
996    #header .content p {
997      line-height: 1.875; } }
998  @media screen and (max-width: 480px) {
999    #header {
1000      padding: 1.5rem 0; }
1001      #header .content .inner {
1002        padding: 2.5rem 0; }
1003      #header nav ul {
1004        -moz-flex-direction: column;
1005        -webkit-flex-direction: column;
1006        -ms-flex-direction: column;
1007        flex-direction: column;
1008        min-width: 10rem;
1009        max-width: 100%; }
1010        #header nav ul li {
1011          border-left: 0;
1012          border-top: solid 1px #ffffff; }
1013          #header nav ul li:first-child {
1014            border-top: 0; }
1015          #header nav ul li a {
1016            height: 3rem;
1017            line-height: 3rem;
1018            min-width: 0;
1019            width: 100%; }
1020      #header nav.use-middle:after {
1021        display: none; } }
1022
1023/* Main */
1024#main {
1025  -moz-flex-grow: 1;
1026  -webkit-flex-grow: 1;
1027  -ms-flex-grow: 1;
1028  flex-grow: 1;
1029  -moz-flex-shrink: 1;
1030  -webkit-flex-shrink: 1;
1031  -ms-flex-shrink: 1;
1032  flex-shrink: 1;
1033  display: -moz-flex;
1034  display: -webkit-flex;
1035  display: -ms-flex;
1036  display: flex;
1037  -moz-align-items: center;
1038  -webkit-align-items: center;
1039  -ms-align-items: center;
1040  align-items: center;
1041  -moz-justify-content: center;
1042  -webkit-justify-content: center;
1043  -ms-justify-content: center;
1044  justify-content: center;
1045  -moz-flex-direction: column;
1046  -webkit-flex-direction: column;
1047  -ms-flex-direction: column;
1048  flex-direction: column;
1049  position: relative;
1050  max-width: 100%;
1051  z-index: 3; }
1052  #main article {
1053    -moz-transform: translateY(0.25rem);
1054    -webkit-transform: translateY(0.25rem);
1055    -ms-transform: translateY(0.25rem);
1056    transform: translateY(0.25rem);
1057    -moz-transition: opacity 0.325s ease-in-out, -moz-transform 0.325s ease-in-out;
1058    -webkit-transition: opacity 0.325s ease-in-out, -webkit-transform 0.325s ease-in-out;
1059    -ms-transition: opacity 0.325s ease-in-out, -ms-transform 0.325s ease-in-out;
1060    transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out;
1061    padding: 4.5rem 2.5rem 1.5rem 2.5rem ;
1062    position: relative;
1063    width: 40rem;
1064    max-width: 100%;
1065    background-color: rgba(27, 31, 34, 0.85);
1066    border-radius: 4px;
1067    opacity: 0; }
1068    #main article.active {
1069      -moz-transform: translateY(0);
1070      -webkit-transform: translateY(0);
1071      -ms-transform: translateY(0);
1072      transform: translateY(0);
1073      opacity: 1; }
1074    #main article .close {
1075      display: block;
1076      position: absolute;
1077      top: 0;
1078      right: 0;
1079      width: 4rem;
1080      height: 4rem;
1081      cursor: pointer;
1082      text-indent: 4rem;
1083      overflow: hidden;
1084      white-space: nowrap; }
1085      #main article .close:before {
1086        -moz-transition: background-color 0.2s ease-in-out;
1087        -webkit-transition: background-color 0.2s ease-in-out;
1088        -ms-transition: background-color 0.2s ease-in-out;
1089        transition: background-color 0.2s ease-in-out;
1090        content: '';
1091        display: block;
1092        position: absolute;
1093        top: 0.75rem;
1094        left: 0.75rem;
1095        width: 2.5rem;
1096        height: 2.5rem;
1097        border-radius: 100%;
1098        background-position: center;
1099        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E");
1100        background-size: 20px 20px;
1101        background-repeat: no-repeat; }
1102      #main article .close:hover:before {
1103        background-color: rgba(255, 255, 255, 0.075); }
1104      #main article .close:active:before {
1105        background-color: rgba(255, 255, 255, 0.175); }
1106  @media screen and (max-width: 736px) {
1107    #main article {
1108      padding: 3.5rem 2rem 0.5rem 2rem ; }
1109      #main article .close:before {
1110        top: 0.875rem;
1111        left: 0.875rem;
1112        width: 2.25rem;
1113        height: 2.25rem;
1114        background-size: 14px 14px; } }
1115  @media screen and (max-width: 480px) {
1116    #main article {
1117      padding: 3rem 1.5rem 0.5rem 1.5rem ; } }
1118
1119/* Footer */
1120#footer {
1121  -moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
1122  -webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
1123  -ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
1124  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out;
1125  width: 100%;
1126  max-width: 100%;
1127  margin-top: 2rem;
1128  text-align: center; }
1129  #footer .copyright {
1130    letter-spacing: 0.2rem;
1131    font-size: 0.6rem;
1132    opacity: 0.75;
1133    margin-bottom: 0;
1134    text-transform: uppercase; }
1135  body.is-article-visible #footer {
1136    -moz-transform: scale(0.95);
1137    -webkit-transform: scale(0.95);
1138    -ms-transform: scale(0.95);
1139    transform: scale(0.95);
1140    -moz-filter: blur(0.1rem);
1141    -webkit-filter: blur(0.1rem);
1142    -ms-filter: blur(0.1rem);
1143    filter: blur(0.1rem);
1144    opacity: 0; }
1145  body.is-loading #footer {
1146    opacity: 0; }
1147
1148/*# sourceMappingURL=main.css.map */
Note: See TracBrowser for help on using the repository browser.