1 | @import url(font-awesome.min.css);
|
---|
2 | @import url("https://fonts.googleapis.com/css?family=Pacifico|Source+Sans+Pro:200,400");
|
---|
3 |
|
---|
4 | /*
|
---|
5 | Epilogue by TEMPLATED
|
---|
6 | templated.co @templatedco
|
---|
7 | Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
|
---|
8 | */
|
---|
9 |
|
---|
10 | /* Reset */
|
---|
11 |
|
---|
12 | html, 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 {
|
---|
13 | margin: 0;
|
---|
14 | padding: 0;
|
---|
15 | border: 0;
|
---|
16 | font-size: 100%;
|
---|
17 | font: inherit;
|
---|
18 | vertical-align: baseline;
|
---|
19 | }
|
---|
20 |
|
---|
21 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
---|
22 | display: block;
|
---|
23 | }
|
---|
24 |
|
---|
25 | body {
|
---|
26 | line-height: 1;
|
---|
27 | }
|
---|
28 |
|
---|
29 | ol, ul {
|
---|
30 | list-style: none;
|
---|
31 | }
|
---|
32 |
|
---|
33 | blockquote, q {
|
---|
34 | quotes: none;
|
---|
35 | }
|
---|
36 |
|
---|
37 | blockquote:before, blockquote:after, q:before, q:after {
|
---|
38 | content: '';
|
---|
39 | content: none;
|
---|
40 | }
|
---|
41 |
|
---|
42 | table {
|
---|
43 | border-collapse: collapse;
|
---|
44 | border-spacing: 0;
|
---|
45 | }
|
---|
46 |
|
---|
47 | body {
|
---|
48 | -webkit-text-size-adjust: none;
|
---|
49 | }
|
---|
50 |
|
---|
51 | /* Box Model */
|
---|
52 |
|
---|
53 | *, *:before, *:after {
|
---|
54 | -moz-box-sizing: border-box;
|
---|
55 | -webkit-box-sizing: border-box;
|
---|
56 | box-sizing: border-box;
|
---|
57 | }
|
---|
58 |
|
---|
59 | /* Basic */
|
---|
60 |
|
---|
61 | @-ms-viewport {
|
---|
62 | width: device-width;
|
---|
63 | }
|
---|
64 |
|
---|
65 | body {
|
---|
66 | -ms-overflow-style: scrollbar;
|
---|
67 | }
|
---|
68 |
|
---|
69 | @media screen and (max-width: 480px) {
|
---|
70 |
|
---|
71 | html, body {
|
---|
72 | min-width: 320px;
|
---|
73 | }
|
---|
74 |
|
---|
75 | }
|
---|
76 |
|
---|
77 | body {
|
---|
78 | background: #f4f4f4;
|
---|
79 | }
|
---|
80 |
|
---|
81 | body.is-loading *, body.is-loading *:before, body.is-loading *:after {
|
---|
82 | -moz-animation: none !important;
|
---|
83 | -webkit-animation: none !important;
|
---|
84 | -ms-animation: none !important;
|
---|
85 | animation: none !important;
|
---|
86 | -moz-transition: none !important;
|
---|
87 | -webkit-transition: none !important;
|
---|
88 | -ms-transition: none !important;
|
---|
89 | transition: none !important;
|
---|
90 | }
|
---|
91 |
|
---|
92 | /* Type */
|
---|
93 |
|
---|
94 | body {
|
---|
95 | background-color: #f4f4f4;
|
---|
96 | color: #666666;
|
---|
97 | }
|
---|
98 |
|
---|
99 | body, input, select, textarea {
|
---|
100 | font-family: "Source Sans Pro", Helvetica, sans-serif;
|
---|
101 | font-size: 17pt;
|
---|
102 | font-weight: 200;
|
---|
103 | line-height: 1.65;
|
---|
104 | }
|
---|
105 |
|
---|
106 | @media screen and (max-width: 1680px) {
|
---|
107 |
|
---|
108 | body, input, select, textarea {
|
---|
109 | font-size: 13pt;
|
---|
110 | }
|
---|
111 |
|
---|
112 | }
|
---|
113 |
|
---|
114 | @media screen and (max-width: 1280px) {
|
---|
115 |
|
---|
116 | body, input, select, textarea {
|
---|
117 | font-size: 12pt;
|
---|
118 | }
|
---|
119 |
|
---|
120 | }
|
---|
121 |
|
---|
122 | @media screen and (max-width: 360px) {
|
---|
123 |
|
---|
124 | body, input, select, textarea {
|
---|
125 | font-size: 11pt;
|
---|
126 | }
|
---|
127 |
|
---|
128 | }
|
---|
129 |
|
---|
130 | a {
|
---|
131 | -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
|
---|
132 | -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
|
---|
133 | -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
|
---|
134 | transition: color 0.2s ease, border-bottom-color 0.2s ease;
|
---|
135 | text-decoration: none;
|
---|
136 | border-bottom: dotted 1px;
|
---|
137 | }
|
---|
138 |
|
---|
139 | a:hover {
|
---|
140 | border-bottom-color: transparent;
|
---|
141 | }
|
---|
142 |
|
---|
143 | strong, b {
|
---|
144 | font-weight: 400;
|
---|
145 | }
|
---|
146 |
|
---|
147 | em, i {
|
---|
148 | font-style: italic;
|
---|
149 | }
|
---|
150 |
|
---|
151 | p {
|
---|
152 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
153 | }
|
---|
154 |
|
---|
155 | h1, h2, h3, h4, h5, h6 {
|
---|
156 | font-weight: 400;
|
---|
157 | line-height: 1.5;
|
---|
158 | margin: 0 0 1em 0;
|
---|
159 | text-transform: uppercase;
|
---|
160 | letter-spacing: 0.375rem;
|
---|
161 | }
|
---|
162 |
|
---|
163 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
---|
164 | color: inherit;
|
---|
165 | text-decoration: none;
|
---|
166 | }
|
---|
167 |
|
---|
168 | h1 {
|
---|
169 | font-size: 2em;
|
---|
170 | }
|
---|
171 |
|
---|
172 | h2 {
|
---|
173 | font-size: 1.75em;
|
---|
174 | }
|
---|
175 |
|
---|
176 | h3 {
|
---|
177 | font-size: 1.25em;
|
---|
178 | }
|
---|
179 |
|
---|
180 | h4 {
|
---|
181 | font-size: 1em;
|
---|
182 | }
|
---|
183 |
|
---|
184 | h5 {
|
---|
185 | font-size: 0.9em;
|
---|
186 | }
|
---|
187 |
|
---|
188 | h6 {
|
---|
189 | font-size: 0.7em;
|
---|
190 | }
|
---|
191 |
|
---|
192 | @media screen and (max-width: 736px) {
|
---|
193 |
|
---|
194 | h1 {
|
---|
195 | font-size: 1.5em;
|
---|
196 | }
|
---|
197 |
|
---|
198 | h2 {
|
---|
199 | font-size: 1.25em;
|
---|
200 | }
|
---|
201 |
|
---|
202 | h3 {
|
---|
203 | font-size: 1em;
|
---|
204 | }
|
---|
205 |
|
---|
206 | }
|
---|
207 |
|
---|
208 | sub {
|
---|
209 | font-size: 0.8em;
|
---|
210 | position: relative;
|
---|
211 | top: 0.5em;
|
---|
212 | }
|
---|
213 |
|
---|
214 | sup {
|
---|
215 | font-size: 0.8em;
|
---|
216 | position: relative;
|
---|
217 | top: -0.5em;
|
---|
218 | }
|
---|
219 |
|
---|
220 | blockquote {
|
---|
221 | border-left: solid 4px;
|
---|
222 | font-style: italic;
|
---|
223 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
224 | padding: 0.5em 0 0.5em 2em;
|
---|
225 | }
|
---|
226 |
|
---|
227 | code {
|
---|
228 | border-radius: 4px;
|
---|
229 | border: solid 1px;
|
---|
230 | font-family: "Courier New", monospace;
|
---|
231 | font-size: 0.9em;
|
---|
232 | margin: 0 0.25em;
|
---|
233 | padding: 0.25em 0.65em;
|
---|
234 | }
|
---|
235 |
|
---|
236 | pre {
|
---|
237 | -webkit-overflow-scrolling: touch;
|
---|
238 | font-family: "Courier New", monospace;
|
---|
239 | font-size: 0.9em;
|
---|
240 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
241 | }
|
---|
242 |
|
---|
243 | pre code {
|
---|
244 | display: block;
|
---|
245 | line-height: 1.75;
|
---|
246 | padding: 1em 1.5em;
|
---|
247 | overflow-x: auto;
|
---|
248 | }
|
---|
249 |
|
---|
250 | hr {
|
---|
251 | border: 0;
|
---|
252 | border-bottom: solid 1px;
|
---|
253 | margin: 2em 0;
|
---|
254 | }
|
---|
255 |
|
---|
256 | hr.major {
|
---|
257 | margin: 3em 0;
|
---|
258 | }
|
---|
259 |
|
---|
260 | .align-left {
|
---|
261 | text-align: left;
|
---|
262 | }
|
---|
263 |
|
---|
264 | .align-center {
|
---|
265 | text-align: center;
|
---|
266 | }
|
---|
267 |
|
---|
268 | .align-right {
|
---|
269 | text-align: right;
|
---|
270 | }
|
---|
271 |
|
---|
272 | input, select, textarea {
|
---|
273 | color: #444444;
|
---|
274 | }
|
---|
275 |
|
---|
276 | a {
|
---|
277 | color: inherit;
|
---|
278 | }
|
---|
279 |
|
---|
280 | a:hover {
|
---|
281 | color: #EF6480 !important;
|
---|
282 | }
|
---|
283 |
|
---|
284 | strong, b {
|
---|
285 | color: #444444;
|
---|
286 | }
|
---|
287 |
|
---|
288 | h1, h2, h3, h4, h5, h6 {
|
---|
289 | color: #444444;
|
---|
290 | }
|
---|
291 |
|
---|
292 | blockquote {
|
---|
293 | border-left-color: #666666;
|
---|
294 | }
|
---|
295 |
|
---|
296 | code {
|
---|
297 | background: rgba(144, 144, 144, 0.075);
|
---|
298 | border-color: #666666;
|
---|
299 | }
|
---|
300 |
|
---|
301 | hr {
|
---|
302 | border-bottom-color: #666666;
|
---|
303 | }
|
---|
304 |
|
---|
305 | /* Box */
|
---|
306 |
|
---|
307 | .box {
|
---|
308 | border-radius: 4px;
|
---|
309 | border: solid 1px;
|
---|
310 | margin-bottom: 2em;
|
---|
311 | padding: 1.5em;
|
---|
312 | }
|
---|
313 |
|
---|
314 | .box > :last-child,
|
---|
315 | .box > :last-child > :last-child,
|
---|
316 | .box > :last-child > :last-child > :last-child {
|
---|
317 | margin-bottom: 0;
|
---|
318 | }
|
---|
319 |
|
---|
320 | .box.alt {
|
---|
321 | border: 0;
|
---|
322 | border-radius: 0;
|
---|
323 | padding: 0;
|
---|
324 | }
|
---|
325 |
|
---|
326 | .box {
|
---|
327 | border-color: #666666;
|
---|
328 | }
|
---|
329 |
|
---|
330 | /* Button */
|
---|
331 |
|
---|
332 | input[type="submit"],
|
---|
333 | input[type="reset"],
|
---|
334 | input[type="button"],
|
---|
335 | button,
|
---|
336 | .button {
|
---|
337 | -moz-appearance: none;
|
---|
338 | -webkit-appearance: none;
|
---|
339 | -ms-appearance: none;
|
---|
340 | appearance: none;
|
---|
341 | -moz-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
---|
342 | -webkit-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
---|
343 | -ms-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
---|
344 | transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
---|
345 | border-radius: 4px;
|
---|
346 | border: 0;
|
---|
347 | cursor: pointer;
|
---|
348 | display: inline-block;
|
---|
349 | font-weight: 400;
|
---|
350 | height: 3.5em;
|
---|
351 | line-height: 3.5em;
|
---|
352 | padding: 0 2em 0 2.375em;
|
---|
353 | text-align: center;
|
---|
354 | text-decoration: none;
|
---|
355 | white-space: nowrap;
|
---|
356 | text-transform: uppercase;
|
---|
357 | letter-spacing: 0.325em;
|
---|
358 | font-size: 0.725em;
|
---|
359 | }
|
---|
360 |
|
---|
361 | input[type="submit"].icon:before,
|
---|
362 | input[type="reset"].icon:before,
|
---|
363 | input[type="button"].icon:before,
|
---|
364 | button.icon:before,
|
---|
365 | .button.icon:before {
|
---|
366 | margin-right: 0.5em;
|
---|
367 | }
|
---|
368 |
|
---|
369 | input[type="submit"].fit,
|
---|
370 | input[type="reset"].fit,
|
---|
371 | input[type="button"].fit,
|
---|
372 | button.fit,
|
---|
373 | .button.fit {
|
---|
374 | display: block;
|
---|
375 | margin: 0 0 1em 0;
|
---|
376 | width: 100%;
|
---|
377 | }
|
---|
378 |
|
---|
379 | input[type="submit"].big,
|
---|
380 | input[type="reset"].big,
|
---|
381 | input[type="button"].big,
|
---|
382 | button.big,
|
---|
383 | .button.big {
|
---|
384 | font-size: 0.8em;
|
---|
385 | padding: 0 2.5em 0 2.875em;
|
---|
386 | height: 3.75em;
|
---|
387 | line-height: 3.75em;
|
---|
388 | }
|
---|
389 |
|
---|
390 | input[type="submit"].disabled, input[type="submit"]:disabled,
|
---|
391 | input[type="reset"].disabled,
|
---|
392 | input[type="reset"]:disabled,
|
---|
393 | input[type="button"].disabled,
|
---|
394 | input[type="button"]:disabled,
|
---|
395 | button.disabled,
|
---|
396 | button:disabled,
|
---|
397 | .button.disabled,
|
---|
398 | .button:disabled {
|
---|
399 | -moz-pointer-events: none;
|
---|
400 | -webkit-pointer-events: none;
|
---|
401 | -ms-pointer-events: none;
|
---|
402 | pointer-events: none;
|
---|
403 | opacity: 0.25;
|
---|
404 | }
|
---|
405 |
|
---|
406 | @media screen and (max-width: 480px) {
|
---|
407 |
|
---|
408 | input[type="submit"],
|
---|
409 | input[type="reset"],
|
---|
410 | input[type="button"],
|
---|
411 | button,
|
---|
412 | .button {
|
---|
413 | padding: 0;
|
---|
414 | }
|
---|
415 |
|
---|
416 | }
|
---|
417 |
|
---|
418 | input[type="submit"],
|
---|
419 | input[type="reset"],
|
---|
420 | input[type="button"],
|
---|
421 | button,
|
---|
422 | .button {
|
---|
423 | background-color: transparent;
|
---|
424 | box-shadow: inset 0 0 0 2px #666666;
|
---|
425 | color: #444444 !important;
|
---|
426 | }
|
---|
427 |
|
---|
428 | input[type="submit"]:hover,
|
---|
429 | input[type="reset"]:hover,
|
---|
430 | input[type="button"]:hover,
|
---|
431 | button:hover,
|
---|
432 | .button:hover {
|
---|
433 | color: #EF6480 !important;
|
---|
434 | box-shadow: inset 0 0 0 2px #EF6480;
|
---|
435 | }
|
---|
436 |
|
---|
437 | input[type="submit"]:active,
|
---|
438 | input[type="reset"]:active,
|
---|
439 | input[type="button"]:active,
|
---|
440 | button:active,
|
---|
441 | .button:active {
|
---|
442 | background-color: rgba(239, 100, 128, 0.15);
|
---|
443 | }
|
---|
444 |
|
---|
445 | input[type="submit"].icon:before,
|
---|
446 | input[type="reset"].icon:before,
|
---|
447 | input[type="button"].icon:before,
|
---|
448 | button.icon:before,
|
---|
449 | .button.icon:before {
|
---|
450 | color: #999999;
|
---|
451 | }
|
---|
452 |
|
---|
453 | /* Form */
|
---|
454 |
|
---|
455 | form {
|
---|
456 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
457 | }
|
---|
458 |
|
---|
459 | label {
|
---|
460 | display: block;
|
---|
461 | font-size: 0.9em;
|
---|
462 | font-weight: 400;
|
---|
463 | margin: 0 0 1em 0;
|
---|
464 | }
|
---|
465 |
|
---|
466 | input[type="text"],
|
---|
467 | input[type="password"],
|
---|
468 | input[type="email"],
|
---|
469 | select,
|
---|
470 | textarea {
|
---|
471 | -moz-appearance: none;
|
---|
472 | -webkit-appearance: none;
|
---|
473 | -ms-appearance: none;
|
---|
474 | appearance: none;
|
---|
475 | border-radius: 4px;
|
---|
476 | border: none;
|
---|
477 | border: solid 1px;
|
---|
478 | color: inherit;
|
---|
479 | display: block;
|
---|
480 | outline: 0;
|
---|
481 | padding: 0 1em;
|
---|
482 | text-decoration: none;
|
---|
483 | width: 100%;
|
---|
484 | }
|
---|
485 |
|
---|
486 | input[type="text"]:invalid,
|
---|
487 | input[type="password"]:invalid,
|
---|
488 | input[type="email"]:invalid,
|
---|
489 | select:invalid,
|
---|
490 | textarea:invalid {
|
---|
491 | box-shadow: none;
|
---|
492 | }
|
---|
493 |
|
---|
494 | .select-wrapper {
|
---|
495 | text-decoration: none;
|
---|
496 | display: block;
|
---|
497 | position: relative;
|
---|
498 | }
|
---|
499 |
|
---|
500 | .select-wrapper:before {
|
---|
501 | -moz-osx-font-smoothing: grayscale;
|
---|
502 | -webkit-font-smoothing: antialiased;
|
---|
503 | font-family: FontAwesome;
|
---|
504 | font-style: normal;
|
---|
505 | font-weight: normal;
|
---|
506 | text-transform: none !important;
|
---|
507 | }
|
---|
508 |
|
---|
509 | .select-wrapper:before {
|
---|
510 | content: '\f078';
|
---|
511 | display: block;
|
---|
512 | height: 2.75em;
|
---|
513 | line-height: 2.75em;
|
---|
514 | pointer-events: none;
|
---|
515 | position: absolute;
|
---|
516 | right: 0;
|
---|
517 | text-align: center;
|
---|
518 | top: 0;
|
---|
519 | width: 2.75em;
|
---|
520 | }
|
---|
521 |
|
---|
522 | .select-wrapper select::-ms-expand {
|
---|
523 | display: none;
|
---|
524 | }
|
---|
525 |
|
---|
526 | input[type="text"],
|
---|
527 | input[type="password"],
|
---|
528 | input[type="email"],
|
---|
529 | select {
|
---|
530 | height: 2.75em;
|
---|
531 | }
|
---|
532 |
|
---|
533 | textarea {
|
---|
534 | padding: 0.75em 1em;
|
---|
535 | }
|
---|
536 |
|
---|
537 | input[type="checkbox"],
|
---|
538 | input[type="radio"] {
|
---|
539 | -moz-appearance: none;
|
---|
540 | -webkit-appearance: none;
|
---|
541 | -ms-appearance: none;
|
---|
542 | appearance: none;
|
---|
543 | display: block;
|
---|
544 | float: left;
|
---|
545 | margin-right: -2em;
|
---|
546 | opacity: 0;
|
---|
547 | width: 1em;
|
---|
548 | z-index: -1;
|
---|
549 | }
|
---|
550 |
|
---|
551 | input[type="checkbox"] + label,
|
---|
552 | input[type="radio"] + label {
|
---|
553 | text-decoration: none;
|
---|
554 | cursor: pointer;
|
---|
555 | display: inline-block;
|
---|
556 | font-size: 1em;
|
---|
557 | font-weight: 200;
|
---|
558 | padding-left: 2.4em;
|
---|
559 | padding-right: 0.75em;
|
---|
560 | position: relative;
|
---|
561 | }
|
---|
562 |
|
---|
563 | input[type="checkbox"] + label:before,
|
---|
564 | input[type="radio"] + label:before {
|
---|
565 | -moz-osx-font-smoothing: grayscale;
|
---|
566 | -webkit-font-smoothing: antialiased;
|
---|
567 | font-family: FontAwesome;
|
---|
568 | font-style: normal;
|
---|
569 | font-weight: normal;
|
---|
570 | text-transform: none !important;
|
---|
571 | }
|
---|
572 |
|
---|
573 | input[type="checkbox"] + label:before,
|
---|
574 | input[type="radio"] + label:before {
|
---|
575 | border-radius: 4px;
|
---|
576 | border: solid 1px;
|
---|
577 | content: '';
|
---|
578 | display: inline-block;
|
---|
579 | height: 1.65em;
|
---|
580 | left: 0;
|
---|
581 | line-height: 1.58125em;
|
---|
582 | position: absolute;
|
---|
583 | text-align: center;
|
---|
584 | top: 0;
|
---|
585 | width: 1.65em;
|
---|
586 | }
|
---|
587 |
|
---|
588 | input[type="checkbox"]:checked + label:before,
|
---|
589 | input[type="radio"]:checked + label:before {
|
---|
590 | content: '\f00c';
|
---|
591 | }
|
---|
592 |
|
---|
593 | input[type="checkbox"] + label:before {
|
---|
594 | border-radius: 4px;
|
---|
595 | }
|
---|
596 |
|
---|
597 | input[type="radio"] + label:before {
|
---|
598 | border-radius: 100%;
|
---|
599 | }
|
---|
600 |
|
---|
601 | ::-webkit-input-placeholder {
|
---|
602 | opacity: 1.0;
|
---|
603 | }
|
---|
604 |
|
---|
605 | :-moz-placeholder {
|
---|
606 | opacity: 1.0;
|
---|
607 | }
|
---|
608 |
|
---|
609 | ::-moz-placeholder {
|
---|
610 | opacity: 1.0;
|
---|
611 | }
|
---|
612 |
|
---|
613 | :-ms-input-placeholder {
|
---|
614 | opacity: 1.0;
|
---|
615 | }
|
---|
616 |
|
---|
617 | .formerize-placeholder {
|
---|
618 | opacity: 1.0;
|
---|
619 | }
|
---|
620 |
|
---|
621 | label {
|
---|
622 | color: #444444;
|
---|
623 | }
|
---|
624 |
|
---|
625 | input[type="text"],
|
---|
626 | input[type="password"],
|
---|
627 | input[type="email"],
|
---|
628 | select,
|
---|
629 | textarea {
|
---|
630 | background: rgba(144, 144, 144, 0.075);
|
---|
631 | border-color: #666666;
|
---|
632 | }
|
---|
633 |
|
---|
634 | input[type="text"]:focus,
|
---|
635 | input[type="password"]:focus,
|
---|
636 | input[type="email"]:focus,
|
---|
637 | select:focus,
|
---|
638 | textarea:focus {
|
---|
639 | border-color: #EF6480;
|
---|
640 | box-shadow: 0 0 0 1px #EF6480;
|
---|
641 | }
|
---|
642 |
|
---|
643 | .select-wrapper:before {
|
---|
644 | color: #666666;
|
---|
645 | }
|
---|
646 |
|
---|
647 | input[type="checkbox"] + label,
|
---|
648 | input[type="radio"] + label {
|
---|
649 | color: #666666;
|
---|
650 | }
|
---|
651 |
|
---|
652 | input[type="checkbox"] + label:before,
|
---|
653 | input[type="radio"] + label:before {
|
---|
654 | background: rgba(144, 144, 144, 0.075);
|
---|
655 | border-color: #666666;
|
---|
656 | }
|
---|
657 |
|
---|
658 | input[type="checkbox"]:checked + label:before,
|
---|
659 | input[type="radio"]:checked + label:before {
|
---|
660 | background-color: #EF6480;
|
---|
661 | border-color: #EF6480;
|
---|
662 | color: #ffffff;
|
---|
663 | }
|
---|
664 |
|
---|
665 | input[type="checkbox"]:focus + label:before,
|
---|
666 | input[type="radio"]:focus + label:before {
|
---|
667 | border-color: #EF6480;
|
---|
668 | box-shadow: 0 0 0 1px #EF6480;
|
---|
669 | }
|
---|
670 |
|
---|
671 | ::-webkit-input-placeholder {
|
---|
672 | color: #999999 !important;
|
---|
673 | }
|
---|
674 |
|
---|
675 | :-moz-placeholder {
|
---|
676 | color: #999999 !important;
|
---|
677 | }
|
---|
678 |
|
---|
679 | ::-moz-placeholder {
|
---|
680 | color: #999999 !important;
|
---|
681 | }
|
---|
682 |
|
---|
683 | :-ms-input-placeholder {
|
---|
684 | color: #999999 !important;
|
---|
685 | }
|
---|
686 |
|
---|
687 | .formerize-placeholder {
|
---|
688 | color: #999999 !important;
|
---|
689 | }
|
---|
690 |
|
---|
691 | /* Icon */
|
---|
692 |
|
---|
693 | .icon {
|
---|
694 | text-decoration: none;
|
---|
695 | border-bottom: none;
|
---|
696 | position: relative;
|
---|
697 | }
|
---|
698 |
|
---|
699 | .icon:before {
|
---|
700 | -moz-osx-font-smoothing: grayscale;
|
---|
701 | -webkit-font-smoothing: antialiased;
|
---|
702 | font-family: FontAwesome;
|
---|
703 | font-style: normal;
|
---|
704 | font-weight: normal;
|
---|
705 | text-transform: none !important;
|
---|
706 | }
|
---|
707 |
|
---|
708 | .icon > .label {
|
---|
709 | display: none;
|
---|
710 | }
|
---|
711 |
|
---|
712 | .icon.major {
|
---|
713 | display: block;
|
---|
714 | margin: 0 0 1.5em 0;
|
---|
715 | }
|
---|
716 |
|
---|
717 | .icon.major:before {
|
---|
718 | cursor: default;
|
---|
719 | font-size: 2.5rem;
|
---|
720 | box-shadow: inset 0 0 0 2px #666666;
|
---|
721 | width: 2.5em;
|
---|
722 | height: 2.5em;
|
---|
723 | line-height: 2.5em;
|
---|
724 | display: inline-block;
|
---|
725 | border-radius: 100%;
|
---|
726 | color: #666666;
|
---|
727 | }
|
---|
728 |
|
---|
729 | @media screen and (max-width: 736px) {
|
---|
730 |
|
---|
731 | .icon.major:before {
|
---|
732 | font-size: 2rem;
|
---|
733 | }
|
---|
734 |
|
---|
735 | }
|
---|
736 |
|
---|
737 | /* Image */
|
---|
738 |
|
---|
739 | .image {
|
---|
740 | border-radius: 4px;
|
---|
741 | border: 0;
|
---|
742 | display: inline-block;
|
---|
743 | position: relative;
|
---|
744 | }
|
---|
745 |
|
---|
746 | .image img {
|
---|
747 | border-radius: 4px;
|
---|
748 | display: block;
|
---|
749 | }
|
---|
750 |
|
---|
751 | .image.left, .image.right {
|
---|
752 | max-width: 40%;
|
---|
753 | }
|
---|
754 |
|
---|
755 | .image.left img, .image.right img {
|
---|
756 | width: 100%;
|
---|
757 | }
|
---|
758 |
|
---|
759 | .image.left {
|
---|
760 | float: left;
|
---|
761 | margin: 0 1.5em 1em 0;
|
---|
762 | top: 0.25em;
|
---|
763 | }
|
---|
764 |
|
---|
765 | .image.right {
|
---|
766 | float: right;
|
---|
767 | margin: 0 0 1em 1.5em;
|
---|
768 | top: 0.25em;
|
---|
769 | }
|
---|
770 |
|
---|
771 | .image.fit {
|
---|
772 | display: block;
|
---|
773 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
774 | width: 100%;
|
---|
775 | }
|
---|
776 |
|
---|
777 | .image.fit img {
|
---|
778 | width: 100%;
|
---|
779 | }
|
---|
780 |
|
---|
781 | .image.main {
|
---|
782 | display: block;
|
---|
783 | margin: 0 0 3em 0;
|
---|
784 | width: 100%;
|
---|
785 | }
|
---|
786 |
|
---|
787 | .image.main img {
|
---|
788 | width: 100%;
|
---|
789 | }
|
---|
790 |
|
---|
791 | /* List */
|
---|
792 |
|
---|
793 | ol {
|
---|
794 | list-style: decimal;
|
---|
795 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
796 | padding-left: 1.25em;
|
---|
797 | }
|
---|
798 |
|
---|
799 | ol li {
|
---|
800 | padding-left: 0.25em;
|
---|
801 | }
|
---|
802 |
|
---|
803 | ul {
|
---|
804 | list-style: disc;
|
---|
805 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
806 | padding-left: 1em;
|
---|
807 | }
|
---|
808 |
|
---|
809 | ul li {
|
---|
810 | padding-left: 0.5em;
|
---|
811 | }
|
---|
812 |
|
---|
813 | ul.alt {
|
---|
814 | list-style: none;
|
---|
815 | padding-left: 0;
|
---|
816 | }
|
---|
817 |
|
---|
818 | ul.alt li {
|
---|
819 | border-top: solid 1px;
|
---|
820 | padding: 0.5em 0;
|
---|
821 | }
|
---|
822 |
|
---|
823 | ul.alt li:first-child {
|
---|
824 | border-top: 0;
|
---|
825 | padding-top: 0;
|
---|
826 | }
|
---|
827 |
|
---|
828 | ul.icons {
|
---|
829 | cursor: default;
|
---|
830 | list-style: none;
|
---|
831 | padding-left: 0;
|
---|
832 | }
|
---|
833 |
|
---|
834 | ul.icons li {
|
---|
835 | display: inline-block;
|
---|
836 | padding: 0 1em 0 0;
|
---|
837 | }
|
---|
838 |
|
---|
839 | ul.icons li:last-child {
|
---|
840 | padding-right: 0;
|
---|
841 | }
|
---|
842 |
|
---|
843 | ul.actions {
|
---|
844 | cursor: default;
|
---|
845 | list-style: none;
|
---|
846 | padding-left: 0;
|
---|
847 | }
|
---|
848 |
|
---|
849 | ul.actions li {
|
---|
850 | display: inline-block;
|
---|
851 | padding: 0 1em 0 0;
|
---|
852 | vertical-align: middle;
|
---|
853 | }
|
---|
854 |
|
---|
855 | ul.actions li:last-child {
|
---|
856 | padding-right: 0;
|
---|
857 | }
|
---|
858 |
|
---|
859 | ul.actions.small li {
|
---|
860 | padding: 0 0.5em 0 0;
|
---|
861 | }
|
---|
862 |
|
---|
863 | ul.actions.vertical li {
|
---|
864 | display: block;
|
---|
865 | padding: 1em 0 0 0;
|
---|
866 | }
|
---|
867 |
|
---|
868 | ul.actions.vertical li:first-child {
|
---|
869 | padding-top: 0;
|
---|
870 | }
|
---|
871 |
|
---|
872 | ul.actions.vertical li > * {
|
---|
873 | margin-bottom: 0;
|
---|
874 | }
|
---|
875 |
|
---|
876 | ul.actions.vertical.small li {
|
---|
877 | padding: 0.5em 0 0 0;
|
---|
878 | }
|
---|
879 |
|
---|
880 | ul.actions.vertical.small li:first-child {
|
---|
881 | padding-top: 0;
|
---|
882 | }
|
---|
883 |
|
---|
884 | ul.actions.fit {
|
---|
885 | display: table;
|
---|
886 | margin-left: -1em;
|
---|
887 | padding: 0;
|
---|
888 | table-layout: fixed;
|
---|
889 | width: calc(100% + 1em);
|
---|
890 | }
|
---|
891 |
|
---|
892 | ul.actions.fit li {
|
---|
893 | display: table-cell;
|
---|
894 | padding: 0 0 0 1em;
|
---|
895 | }
|
---|
896 |
|
---|
897 | ul.actions.fit li > * {
|
---|
898 | margin-bottom: 0;
|
---|
899 | }
|
---|
900 |
|
---|
901 | ul.actions.fit.small {
|
---|
902 | margin-left: -0.5em;
|
---|
903 | width: calc(100% + 0.5em);
|
---|
904 | }
|
---|
905 |
|
---|
906 | ul.actions.fit.small li {
|
---|
907 | padding: 0 0 0 0.5em;
|
---|
908 | }
|
---|
909 |
|
---|
910 | @media screen and (max-width: 480px) {
|
---|
911 |
|
---|
912 | ul.actions {
|
---|
913 | margin: 0 0 2em 0; /* used to be 0 0 2em 0 */
|
---|
914 | }
|
---|
915 |
|
---|
916 | ul.actions li {
|
---|
917 | padding: 1em 0 0 0;
|
---|
918 | display: block;
|
---|
919 | text-align: center;
|
---|
920 | width: 100%;
|
---|
921 | }
|
---|
922 |
|
---|
923 | ul.actions li:first-child {
|
---|
924 | padding-top: 0;
|
---|
925 | }
|
---|
926 |
|
---|
927 | ul.actions li > * {
|
---|
928 | width: 100%;
|
---|
929 | margin: 0 !important;
|
---|
930 | }
|
---|
931 |
|
---|
932 | ul.actions.small li {
|
---|
933 | padding: 0.5em 0 0 0;
|
---|
934 | }
|
---|
935 |
|
---|
936 | ul.actions.small li:first-child {
|
---|
937 | padding-top: 0;
|
---|
938 | }
|
---|
939 |
|
---|
940 | }
|
---|
941 |
|
---|
942 | dl {
|
---|
943 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
944 | }
|
---|
945 |
|
---|
946 | dl dt {
|
---|
947 | display: block;
|
---|
948 | font-weight: 400;
|
---|
949 | margin: 0 0 1em 0;
|
---|
950 | }
|
---|
951 |
|
---|
952 | dl dd {
|
---|
953 | margin-left: 2em;
|
---|
954 | }
|
---|
955 |
|
---|
956 | ul.alt li {
|
---|
957 | border-top-color: #666666;
|
---|
958 | }
|
---|
959 |
|
---|
960 | /* Table */
|
---|
961 |
|
---|
962 | .table-wrapper {
|
---|
963 | -webkit-overflow-scrolling: touch;
|
---|
964 | overflow-x: auto;
|
---|
965 | }
|
---|
966 |
|
---|
967 | table {
|
---|
968 | margin: 0 0 1em 0; /* used to be 0 0 2em 0 */
|
---|
969 | width: 100%;
|
---|
970 | }
|
---|
971 |
|
---|
972 | table tbody tr {
|
---|
973 | border: solid 1px;
|
---|
974 | border-left: 0;
|
---|
975 | border-right: 0;
|
---|
976 | }
|
---|
977 |
|
---|
978 | table td {
|
---|
979 | padding: 0.75em 0.75em;
|
---|
980 | }
|
---|
981 |
|
---|
982 | table th {
|
---|
983 | font-size: 0.9em;
|
---|
984 | font-weight: 400;
|
---|
985 | padding: 0 0.75em 0.75em 0.75em;
|
---|
986 | text-align: left;
|
---|
987 | }
|
---|
988 |
|
---|
989 | table thead {
|
---|
990 | border-bottom: solid 2px;
|
---|
991 | }
|
---|
992 |
|
---|
993 | table tfoot {
|
---|
994 | border-top: solid 2px;
|
---|
995 | }
|
---|
996 |
|
---|
997 | table.alt {
|
---|
998 | border-collapse: separate;
|
---|
999 | }
|
---|
1000 |
|
---|
1001 | table.alt tbody tr td {
|
---|
1002 | border: solid 1px;
|
---|
1003 | border-left-width: 0;
|
---|
1004 | border-top-width: 0;
|
---|
1005 | }
|
---|
1006 |
|
---|
1007 | table.alt tbody tr td:first-child {
|
---|
1008 | border-left-width: 1px;
|
---|
1009 | }
|
---|
1010 |
|
---|
1011 | table.alt tbody tr:first-child td {
|
---|
1012 | border-top-width: 1px;
|
---|
1013 | }
|
---|
1014 |
|
---|
1015 | table.alt thead {
|
---|
1016 | border-bottom: 0;
|
---|
1017 | }
|
---|
1018 |
|
---|
1019 | table.alt tfoot {
|
---|
1020 | border-top: 0;
|
---|
1021 | }
|
---|
1022 |
|
---|
1023 | table tbody tr {
|
---|
1024 | border-color: #666666;
|
---|
1025 | }
|
---|
1026 |
|
---|
1027 | table tbody tr:nth-child(2n + 1) {
|
---|
1028 | background-color: rgba(144, 144, 144, 0.075);
|
---|
1029 | }
|
---|
1030 |
|
---|
1031 | table th {
|
---|
1032 | color: #444444;
|
---|
1033 | }
|
---|
1034 |
|
---|
1035 | table thead {
|
---|
1036 | border-bottom-color: #666666;
|
---|
1037 | }
|
---|
1038 |
|
---|
1039 | table tfoot {
|
---|
1040 | border-top-color: #666666;
|
---|
1041 | }
|
---|
1042 |
|
---|
1043 | table.alt tbody tr td {
|
---|
1044 | border-color: #666666;
|
---|
1045 | }
|
---|
1046 |
|
---|
1047 | /* Item */
|
---|
1048 |
|
---|
1049 | .item {
|
---|
1050 | padding: 3em 3em 1em 3em;
|
---|
1051 | background-color: #ffffff;
|
---|
1052 | border-radius: 4px;
|
---|
1053 | text-align: center;
|
---|
1054 | }
|
---|
1055 |
|
---|
1056 | .item header {
|
---|
1057 | border-top-left-radius: 4px;
|
---|
1058 | border-top-right-radius: 4px;
|
---|
1059 | margin: -3em 0 1em -3em; /* used to be -3em -0 3em -3em */
|
---|
1060 | width: calc(100% + 6em);
|
---|
1061 | height: 10em; /* used to be 15 em */
|
---|
1062 | display: -moz-flex;
|
---|
1063 | display: -webkit-flex;
|
---|
1064 | display: -ms-flex;
|
---|
1065 | display: flex;
|
---|
1066 | -moz-align-items: center;
|
---|
1067 | -webkit-align-items: center;
|
---|
1068 | -ms-align-items: center;
|
---|
1069 | align-items: center;
|
---|
1070 | -moz-justify-content: center;
|
---|
1071 | -webkit-justify-content: center;
|
---|
1072 | -ms-justify-content: center;
|
---|
1073 | justify-content: center;
|
---|
1074 | background-color: #444;
|
---|
1075 | color: rgba(255, 255, 255, 0.75);
|
---|
1076 | position: relative;
|
---|
1077 | overflow: hidden;
|
---|
1078 | }
|
---|
1079 |
|
---|
1080 | .item p {
|
---|
1081 | text-align: justify;
|
---|
1082 | text-justify: inter-word;
|
---|
1083 | margin-bottom: 0.5em;
|
---|
1084 | min-height: 9em;
|
---|
1085 |
|
---|
1086 | }
|
---|
1087 |
|
---|
1088 | .item header input, .item header select, .item header textarea {
|
---|
1089 | color: #ffffff;
|
---|
1090 | }
|
---|
1091 |
|
---|
1092 | .item header a {
|
---|
1093 | color: inherit;
|
---|
1094 | }
|
---|
1095 |
|
---|
1096 | .item header a:hover {
|
---|
1097 | color: #EF6480 !important;
|
---|
1098 | }
|
---|
1099 |
|
---|
1100 | .item header strong, .item header b {
|
---|
1101 | color: #ffffff;
|
---|
1102 | }
|
---|
1103 |
|
---|
1104 | .item header h1, .item header h2, .item header h3, .item header h4, .item header h5, .item header h6 {
|
---|
1105 | color: #ffffff;
|
---|
1106 | }
|
---|
1107 |
|
---|
1108 | .item header blockquote {
|
---|
1109 | border-left-color: #ffffff;
|
---|
1110 | }
|
---|
1111 |
|
---|
1112 | .item header code {
|
---|
1113 | background: rgba(255, 255, 255, 0.075);
|
---|
1114 | border-color: #ffffff;
|
---|
1115 | }
|
---|
1116 |
|
---|
1117 | .item header hr {
|
---|
1118 | border-bottom-color: #ffffff;
|
---|
1119 | }
|
---|
1120 |
|
---|
1121 | .item header a {
|
---|
1122 | -moz-transition: -moz-transform 0.2s ease;
|
---|
1123 | -webkit-transition: -webkit-transform 0.2s ease;
|
---|
1124 | -ms-transition: -ms-transform 0.2s ease;
|
---|
1125 | transition: transform 0.2s ease;
|
---|
1126 | background-size: cover;
|
---|
1127 | background-position: center;
|
---|
1128 | background-repeat: no-repeat;
|
---|
1129 | position: absolute;
|
---|
1130 | top: 0;
|
---|
1131 | left: 0;
|
---|
1132 | width: 100%;
|
---|
1133 | height: 100%;
|
---|
1134 | display: block;
|
---|
1135 | }
|
---|
1136 |
|
---|
1137 | .item header a:before {
|
---|
1138 | content: '';
|
---|
1139 | display: block;
|
---|
1140 | position: absolute;
|
---|
1141 | top: 0;
|
---|
1142 | left: 0;
|
---|
1143 | width: 100%;
|
---|
1144 | height: 100%;
|
---|
1145 | background-color: rgba(0, 0, 0, 0.25);
|
---|
1146 | background-image: url("images/overlay.png");
|
---|
1147 | }
|
---|
1148 |
|
---|
1149 | .item header:hover a {
|
---|
1150 | -moz-transform: scale(1.1);
|
---|
1151 | -webkit-transform: scale(1.1);
|
---|
1152 | -ms-transform: scale(1.1);
|
---|
1153 | transform: scale(1.1);
|
---|
1154 | }
|
---|
1155 |
|
---|
1156 | .item header > * {
|
---|
1157 | position: relative;
|
---|
1158 | z-index: 1;
|
---|
1159 | }
|
---|
1160 |
|
---|
1161 | .item header h3 {
|
---|
1162 | margin: 0;
|
---|
1163 | -moz-pointer-events: none;
|
---|
1164 | -webkit-pointer-events: none;
|
---|
1165 | -ms-pointer-events: none;
|
---|
1166 | pointer-events: none;
|
---|
1167 | }
|
---|
1168 |
|
---|
1169 | .items {
|
---|
1170 | display: -moz-flex;
|
---|
1171 | display: -webkit-flex;
|
---|
1172 | display: -ms-flex;
|
---|
1173 | display: flex;
|
---|
1174 | -moz-flex-wrap: wrap;
|
---|
1175 | -webkit-flex-wrap: wrap;
|
---|
1176 | -ms-flex-wrap: wrap;
|
---|
1177 | flex-wrap: wrap;
|
---|
1178 | width: calc(100% + 2em);
|
---|
1179 | margin: -2em 0 0 -2em;
|
---|
1180 | }
|
---|
1181 |
|
---|
1182 | .items .item {
|
---|
1183 | margin: 2em 0 0 2em; /* used to be 2em 0 0 2em */
|
---|
1184 | width: calc(50% - 2em);
|
---|
1185 | }
|
---|
1186 |
|
---|
1187 | @media screen and (max-width: 980px) {
|
---|
1188 |
|
---|
1189 | .item header {
|
---|
1190 | height: 10em; /* used to be 25em */
|
---|
1191 | }
|
---|
1192 |
|
---|
1193 | .item p {
|
---|
1194 | min-height: 7em;
|
---|
1195 | }
|
---|
1196 |
|
---|
1197 | .items {
|
---|
1198 | -moz-flex-direction: column;
|
---|
1199 | -webkit-flex-direction: column;
|
---|
1200 | -ms-flex-direction: column;
|
---|
1201 | flex-direction: column;
|
---|
1202 | -moz-flex-wrap: nowrap;
|
---|
1203 | -webkit-flex-wrap: nowrap;
|
---|
1204 | -ms-flex-wrap: nowrap;
|
---|
1205 | flex-wrap: nowrap;
|
---|
1206 | width: 100%;
|
---|
1207 | margin: 0;
|
---|
1208 | }
|
---|
1209 |
|
---|
1210 |
|
---|
1211 | .items .item {
|
---|
1212 | width: 100%;
|
---|
1213 | margin: 0 0 2em 0; /* used to be 0 0 2em 0 */
|
---|
1214 | }
|
---|
1215 |
|
---|
1216 | .items .item:last-child {
|
---|
1217 | margin-bottom: 0;
|
---|
1218 | }
|
---|
1219 |
|
---|
1220 | }
|
---|
1221 |
|
---|
1222 | @media screen and (max-width: 736px) {
|
---|
1223 |
|
---|
1224 | .item header {
|
---|
1225 | height: 10em; /* used to be 15em */
|
---|
1226 | }
|
---|
1227 |
|
---|
1228 | .items .item {
|
---|
1229 | margin: 0 0 1em 0;
|
---|
1230 | }
|
---|
1231 |
|
---|
1232 | }
|
---|
1233 |
|
---|
1234 | @media screen and (max-width: 480px) {
|
---|
1235 |
|
---|
1236 | .item {
|
---|
1237 | padding: 2em 1em 0.1em 1em;
|
---|
1238 | }
|
---|
1239 |
|
---|
1240 | .item header {
|
---|
1241 | height: 8em; /* used to be 12em */
|
---|
1242 | margin: -2em 0 2em -1em;
|
---|
1243 | width: calc(100% + 2em);
|
---|
1244 | }
|
---|
1245 |
|
---|
1246 | }
|
---|
1247 |
|
---|
1248 | /* Wrapper */
|
---|
1249 |
|
---|
1250 | #wrapper {
|
---|
1251 | width: 64em;
|
---|
1252 | margin: 0 auto;
|
---|
1253 | max-width: calc(100% - 4em);
|
---|
1254 | padding: 2em 0 1em 0; /* used to be 4em 0 2em0 */
|
---|
1255 | }
|
---|
1256 |
|
---|
1257 | #wrapper > .main {
|
---|
1258 | margin-bottom: 4em;
|
---|
1259 | }
|
---|
1260 |
|
---|
1261 | @media screen and (max-width: 980px) {
|
---|
1262 |
|
---|
1263 | #wrapper {
|
---|
1264 | padding: 2em 0 2em 0;
|
---|
1265 | }
|
---|
1266 |
|
---|
1267 | #wrapper > .main {
|
---|
1268 | margin-bottom: 2em;
|
---|
1269 | }
|
---|
1270 |
|
---|
1271 | }
|
---|
1272 |
|
---|
1273 | @media screen and (max-width: 736px) {
|
---|
1274 |
|
---|
1275 | #wrapper {
|
---|
1276 | max-width: calc(100% - 2em);
|
---|
1277 | padding: 1em 0 0.1em 0;
|
---|
1278 | }
|
---|
1279 |
|
---|
1280 | #wrapper > .main {
|
---|
1281 | margin-bottom: 1em;
|
---|
1282 | }
|
---|
1283 |
|
---|
1284 | }
|
---|
1285 |
|
---|
1286 | /* Header */
|
---|
1287 |
|
---|
1288 | #header {
|
---|
1289 | background-color: #444;
|
---|
1290 | color: rgba(255, 255, 255, 0.75);
|
---|
1291 | display: -moz-flex;
|
---|
1292 | display: -webkit-flex;
|
---|
1293 | display: -ms-flex;
|
---|
1294 | display: flex;
|
---|
1295 | -moz-align-items: center;
|
---|
1296 | -webkit-align-items: center;
|
---|
1297 | -ms-align-items: center;
|
---|
1298 | align-items: center;
|
---|
1299 | -moz-justify-content: center;
|
---|
1300 | -webkit-justify-content: center;
|
---|
1301 | -ms-justify-content: center;
|
---|
1302 | justify-content: center;
|
---|
1303 | -moz-flex-direction: column;
|
---|
1304 | -webkit-flex-direction: column;
|
---|
1305 | -ms-flex-direction: column;
|
---|
1306 | flex-direction: column;
|
---|
1307 | padding: 8em 0 6em 0;
|
---|
1308 | background-image: url("../../images/banner-so-we-must-think-cropped.jpg");
|
---|
1309 | background-size: cover;
|
---|
1310 | background-position: center top; /* used to be just 'center' */
|
---|
1311 | background-attachment: fixed;
|
---|
1312 | text-align: center;
|
---|
1313 | position: relative;
|
---|
1314 | cursor: default;
|
---|
1315 | }
|
---|
1316 |
|
---|
1317 | #header input, #header select, #header textarea {
|
---|
1318 | color: #ffffff;
|
---|
1319 | }
|
---|
1320 |
|
---|
1321 | #header a {
|
---|
1322 | color: inherit;
|
---|
1323 | }
|
---|
1324 |
|
---|
1325 | #header a:hover {
|
---|
1326 | color: #EF6480 !important;
|
---|
1327 | }
|
---|
1328 |
|
---|
1329 | #header strong, #header b {
|
---|
1330 | color: #ffffff;
|
---|
1331 | }
|
---|
1332 |
|
---|
1333 | #header h1, #header h2, #header h3, #header h4, #header h5, #header h6 {
|
---|
1334 | color: #ffffff;
|
---|
1335 | }
|
---|
1336 |
|
---|
1337 | #header blockquote {
|
---|
1338 | border-left-color: #ffffff;
|
---|
1339 | }
|
---|
1340 |
|
---|
1341 | #header code {
|
---|
1342 | background: rgba(255, 255, 255, 0.075);
|
---|
1343 | border-color: #ffffff;
|
---|
1344 | }
|
---|
1345 |
|
---|
1346 | #header hr {
|
---|
1347 | border-bottom-color: #ffffff;
|
---|
1348 | }
|
---|
1349 |
|
---|
1350 | #header:before {
|
---|
1351 | content: '';
|
---|
1352 | display: block;
|
---|
1353 | position: absolute;
|
---|
1354 | top: 0;
|
---|
1355 | left: 0;
|
---|
1356 | width: 100%;
|
---|
1357 | height: 100%;
|
---|
1358 | background-color: rgba(0, 0, 0, 0.25);
|
---|
1359 | background-image: url("images/overlay.png");
|
---|
1360 | }
|
---|
1361 |
|
---|
1362 | #header h1 {
|
---|
1363 | margin-bottom: 0.5em;
|
---|
1364 | }
|
---|
1365 |
|
---|
1366 | #header .inner {
|
---|
1367 | position: relative;
|
---|
1368 | z-index: 1;
|
---|
1369 | }
|
---|
1370 |
|
---|
1371 | #header div.inner {
|
---|
1372 | width: 40em;
|
---|
1373 | margin: auto; background-color: rgba(0,0,0,0.7);
|
---|
1374 | }
|
---|
1375 |
|
---|
1376 | #header .inner p {
|
---|
1377 | text-align: justify; text-justify: inter-word; margin-bottom: 0.5em;
|
---|
1378 | }
|
---|
1379 |
|
---|
1380 |
|
---|
1381 | #header.alt {
|
---|
1382 | height: 22em; /* used to be 20em */
|
---|
1383 | min-height: 22em;
|
---|
1384 | min-height: 75vh;
|
---|
1385 | }
|
---|
1386 |
|
---|
1387 | #header.alt:before {
|
---|
1388 | -moz-transition: background-color 3s ease;
|
---|
1389 | -webkit-transition: background-color 3s ease;
|
---|
1390 | -ms-transition: background-color 3s ease;
|
---|
1391 | transition: background-color 3s ease;
|
---|
1392 | -moz-transition-delay: 1s;
|
---|
1393 | -webkit-transition-delay: 1s;
|
---|
1394 | -ms-transition-delay: 1s;
|
---|
1395 | transition-delay: 1s;
|
---|
1396 | }
|
---|
1397 |
|
---|
1398 | #header.alt h1 {
|
---|
1399 | font-size: 4em;
|
---|
1400 | padding: 0 0.5em 0.25em 0.5em;
|
---|
1401 | border-bottom: solid 2px #ffffff;
|
---|
1402 | font-weight: 200;
|
---|
1403 | font-family: "Pacifico", cursive;
|
---|
1404 | text-transform: none;
|
---|
1405 | letter-spacing: 0;
|
---|
1406 | }
|
---|
1407 |
|
---|
1408 | #header.alt p {
|
---|
1409 | text-transform: uppercase;
|
---|
1410 | letter-spacing: 0.325rem;
|
---|
1411 | font-weight: 400;
|
---|
1412 | font-size: 0.8em;
|
---|
1413 | padding: 0 1.25em;
|
---|
1414 | }
|
---|
1415 |
|
---|
1416 | #header.alt .inner {
|
---|
1417 | -moz-transition: opacity 2s ease;
|
---|
1418 | -webkit-transition: opacity 2s ease;
|
---|
1419 | -ms-transition: opacity 2s ease;
|
---|
1420 | transition: opacity 2s ease;
|
---|
1421 | opacity: 1;
|
---|
1422 | }
|
---|
1423 |
|
---|
1424 | body.is-loading #header.alt:before {
|
---|
1425 | background-color: black;
|
---|
1426 | }
|
---|
1427 |
|
---|
1428 | body.is-loading #header.alt .inner {
|
---|
1429 | opacity: 0;
|
---|
1430 | }
|
---|
1431 |
|
---|
1432 | @media screen and (max-width: 1280px) {
|
---|
1433 |
|
---|
1434 | #header {
|
---|
1435 | background-attachment: scroll;
|
---|
1436 | }
|
---|
1437 |
|
---|
1438 | }
|
---|
1439 |
|
---|
1440 | @media screen and (max-width: 980px) {
|
---|
1441 |
|
---|
1442 | #header.alt {
|
---|
1443 | height: 25em; /* preivously didn't have a rule here, and main rule used to be 20em */
|
---|
1444 | min-height: 25em;
|
---|
1445 | min-height: 75vh;
|
---|
1446 | }
|
---|
1447 | }
|
---|
1448 |
|
---|
1449 | @media screen and (max-width: 736px) {
|
---|
1450 |
|
---|
1451 | #header {
|
---|
1452 | padding: 4em 2em 2em 2em;
|
---|
1453 | }
|
---|
1454 |
|
---|
1455 | #header.alt h1 {
|
---|
1456 | font-size: 2.5em;
|
---|
1457 | padding-left: 0;
|
---|
1458 | padding-right: 0;
|
---|
1459 | }
|
---|
1460 |
|
---|
1461 | #header.alt p {
|
---|
1462 | padding: 0.6em; /* used to be 0 */
|
---|
1463 | }
|
---|
1464 |
|
---|
1465 | #header.alt .inner {
|
---|
1466 | max-width: 20em;
|
---|
1467 | }
|
---|
1468 |
|
---|
1469 | /*
|
---|
1470 | #header.alt div.inner {
|
---|
1471 | margin: auto; background-color: rgba(0,0,0,0.7);
|
---|
1472 | }
|
---|
1473 | */
|
---|
1474 | /*
|
---|
1475 | #header.alt .inner p {
|
---|
1476 | text-align: justify; text-justify: inter-word; margin-bottom: 0.5em;
|
---|
1477 | }
|
---|
1478 | */
|
---|
1479 |
|
---|
1480 |
|
---|
1481 | }
|
---|
1482 |
|
---|
1483 | /* Main */
|
---|
1484 |
|
---|
1485 | #main {
|
---|
1486 | padding: 4em 4em 2em 4em;
|
---|
1487 | background-color: #ffffff;
|
---|
1488 | border-radius: 4px;
|
---|
1489 | }
|
---|
1490 |
|
---|
1491 | #main > header:first-child {
|
---|
1492 | text-align: center;
|
---|
1493 | }
|
---|
1494 |
|
---|
1495 | @media screen and (max-width: 736px) {
|
---|
1496 |
|
---|
1497 | #main {
|
---|
1498 | padding: 2em 2em 0.1em 2em;
|
---|
1499 | }
|
---|
1500 |
|
---|
1501 | }
|
---|
1502 |
|
---|
1503 | @media screen and (max-width: 480px) {
|
---|
1504 |
|
---|
1505 | #main {
|
---|
1506 | padding: 2em 1em 0.1em 1em;
|
---|
1507 | }
|
---|
1508 |
|
---|
1509 | }
|
---|
1510 |
|
---|
1511 | /* Intro */
|
---|
1512 |
|
---|
1513 | #intro {
|
---|
1514 | padding: 4em 4em 2em 4em;
|
---|
1515 | background-color: #ffffff;
|
---|
1516 | border-radius: 4px;
|
---|
1517 | text-align: center;
|
---|
1518 | }
|
---|
1519 |
|
---|
1520 | @media screen and (max-width: 736px) {
|
---|
1521 |
|
---|
1522 | #intro {
|
---|
1523 | padding: 2em 2em 0.1em 2em;
|
---|
1524 | }
|
---|
1525 |
|
---|
1526 | }
|
---|
1527 |
|
---|
1528 | @media screen and (max-width: 480px) {
|
---|
1529 |
|
---|
1530 | #intro {
|
---|
1531 | padding: 2em 1em 0.1em 1em;
|
---|
1532 | }
|
---|
1533 |
|
---|
1534 | #intro p br {
|
---|
1535 | display: none;
|
---|
1536 | }
|
---|
1537 |
|
---|
1538 | }
|
---|
1539 |
|
---|
1540 | /* CTA */
|
---|
1541 |
|
---|
1542 | #cta {
|
---|
1543 | padding: 2em 0 0.1em 0;
|
---|
1544 | text-align: center;
|
---|
1545 | }
|
---|
1546 |
|
---|
1547 | @media screen and (max-width: 736px) {
|
---|
1548 |
|
---|
1549 | #cta {
|
---|
1550 | padding: 2em 2em 0.1em 2em;
|
---|
1551 | }
|
---|
1552 |
|
---|
1553 | }
|
---|
1554 |
|
---|
1555 | @media screen and (max-width: 480px) {
|
---|
1556 |
|
---|
1557 | #cta {
|
---|
1558 | padding: 2em 1em 0.1em 1em;
|
---|
1559 | }
|
---|
1560 |
|
---|
1561 | #cta p br {
|
---|
1562 | display: none;
|
---|
1563 | }
|
---|
1564 |
|
---|
1565 | }
|
---|
1566 |
|
---|
1567 | /* Footer */
|
---|
1568 |
|
---|
1569 | #footer {
|
---|
1570 | text-align: center;
|
---|
1571 | margin-top: 4em;
|
---|
1572 | }
|
---|
1573 |
|
---|
1574 | #footer a {
|
---|
1575 | color: inherit;
|
---|
1576 | }
|
---|
1577 |
|
---|
1578 | #footer:before {
|
---|
1579 | content: '';
|
---|
1580 | display: inline-block;
|
---|
1581 | width: 6em;
|
---|
1582 | height: 2px;
|
---|
1583 | background-color: #666666;
|
---|
1584 | margin-bottom: 4em;
|
---|
1585 | }
|
---|
1586 |
|
---|
1587 | #footer .copyright {
|
---|
1588 | font-size: 0.8em;
|
---|
1589 | }
|
---|
1590 |
|
---|
1591 | @media screen and (max-width: 736px) {
|
---|
1592 |
|
---|
1593 | #footer {
|
---|
1594 | margin-top: 2em;
|
---|
1595 | }
|
---|
1596 |
|
---|
1597 | #footer:before {
|
---|
1598 | margin-bottom: 2em;
|
---|
1599 | }
|
---|
1600 |
|
---|
1601 | }
|
---|