Lightweight CSS Framework for Building Apps and Websites https://crispy-css.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2237 lines
122 KiB

6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
  1. @charset "UTF-8";
  2. /**
  3. * functions to convert px to em and rem
  4. *
  5. *
  6. * @author Björn Hase
  7. *
  8. */
  9. /**
  10. * to em, wrapper of toRelatives
  11. *
  12. * @param {mixed} $values
  13. * @param {mixed} $base
  14. * @return {rem}
  15. */
  16. /**
  17. * to rem, wrapper of toRelatives
  18. *
  19. * @param {mixed} $values
  20. * @param {mixed} $base
  21. * @return {rem}
  22. */
  23. /**
  24. * values to relative
  25. *
  26. * @param {mixed} $values
  27. * @param {mixed} $unit
  28. * @param {mixed} $base
  29. * @return {number}
  30. */
  31. /**
  32. * to relative
  33. *
  34. * @param {mixed} $value
  35. * @param {mixed} $base
  36. * @return {number}
  37. */
  38. /**
  39. * strip unit from value
  40. *
  41. * @param {mixed} $value
  42. * @return {number}
  43. */
  44. /**
  45. * z-index
  46. *
  47. *
  48. * @author Björn Hase
  49. *
  50. */
  51. /**
  52. * fonts
  53. *
  54. *
  55. * @author Björn Hase
  56. *
  57. */
  58. /**
  59. * add font-size in px as fallback and in rem
  60. *
  61. *
  62. * @param {px} $font-size
  63. *
  64. */
  65. /**
  66. * add font-sizes as modifactors
  67. *
  68. *
  69. * @param {map} $font-sizes
  70. *
  71. */
  72. /**
  73. * media-queries
  74. *
  75. *
  76. * @author Björn Hase
  77. *
  78. */
  79. /**
  80. * clearfix to end floating
  81. *
  82. *
  83. *
  84. */
  85. /**
  86. * clear default styles from list
  87. *
  88. *
  89. */
  90. /**
  91. * config
  92. *
  93. *
  94. * @author Björn Hase
  95. *
  96. */
  97. /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
  98. /* Document
  99. ========================================================================== */
  100. /**
  101. * 1. Correct the line height in all browsers.
  102. * 2. Prevent adjustments of font size after orientation changes in
  103. * IE on Windows Phone and in iOS.
  104. */
  105. html {
  106. line-height: 1.15;
  107. /* 1 */
  108. -ms-text-size-adjust: 100%;
  109. /* 2 */
  110. -webkit-text-size-adjust: 100%;
  111. /* 2 */ }
  112. /* Sections
  113. ========================================================================== */
  114. /**
  115. * Remove the margin in all browsers (opinionated).
  116. */
  117. body {
  118. margin: 0; }
  119. /**
  120. * Add the correct display in IE 9-.
  121. */
  122. article,
  123. aside,
  124. footer,
  125. header,
  126. nav,
  127. section {
  128. display: block; }
  129. /**
  130. * Correct the font size and margin on `h1` elements within `section` and
  131. * `article` contexts in Chrome, Firefox, and Safari.
  132. */
  133. h1 {
  134. font-size: 2em;
  135. margin: 0.67em 0; }
  136. /* Grouping content
  137. ========================================================================== */
  138. /**
  139. * Add the correct display in IE 9-.
  140. * 1. Add the correct display in IE.
  141. */
  142. figcaption,
  143. figure,
  144. main {
  145. /* 1 */
  146. display: block; }
  147. /**
  148. * Add the correct margin in IE 8.
  149. */
  150. figure {
  151. margin: 1em 40px; }
  152. /**
  153. * 1. Add the correct box sizing in Firefox.
  154. * 2. Show the overflow in Edge and IE.
  155. */
  156. hr {
  157. -webkit-box-sizing: content-box;
  158. box-sizing: content-box;
  159. /* 1 */
  160. height: 0;
  161. /* 1 */
  162. overflow: visible;
  163. /* 2 */ }
  164. /**
  165. * 1. Correct the inheritance and scaling of font size in all browsers.
  166. * 2. Correct the odd `em` font sizing in all browsers.
  167. */
  168. pre {
  169. font-family: monospace, monospace;
  170. /* 1 */
  171. font-size: 1em;
  172. /* 2 */ }
  173. /* Text-level semantics
  174. ========================================================================== */
  175. /**
  176. * 1. Remove the gray background on active links in IE 10.
  177. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  178. */
  179. a {
  180. background-color: transparent;
  181. /* 1 */
  182. -webkit-text-decoration-skip: objects;
  183. /* 2 */ }
  184. /**
  185. * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
  186. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  187. */
  188. abbr[title] {
  189. border-bottom: none;
  190. /* 1 */
  191. text-decoration: underline;
  192. /* 2 */
  193. -webkit-text-decoration: underline dotted;
  194. text-decoration: underline dotted;
  195. /* 2 */ }
  196. /**
  197. * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  198. */
  199. b,
  200. strong {
  201. font-weight: inherit; }
  202. /**
  203. * Add the correct font weight in Chrome, Edge, and Safari.
  204. */
  205. b,
  206. strong {
  207. font-weight: bolder; }
  208. /**
  209. * 1. Correct the inheritance and scaling of font size in all browsers.
  210. * 2. Correct the odd `em` font sizing in all browsers.
  211. */
  212. code,
  213. kbd,
  214. samp {
  215. font-family: monospace, monospace;
  216. /* 1 */
  217. font-size: 1em;
  218. /* 2 */ }
  219. /**
  220. * Add the correct font style in Android 4.3-.
  221. */
  222. dfn {
  223. font-style: italic; }
  224. /**
  225. * Add the correct background and color in IE 9-.
  226. */
  227. mark {
  228. background-color: #ff0;
  229. color: #000; }
  230. /**
  231. * Add the correct font size in all browsers.
  232. */
  233. small {
  234. font-size: 80%; }
  235. /**
  236. * Prevent `sub` and `sup` elements from affecting the line height in
  237. * all browsers.
  238. */
  239. sub,
  240. sup {
  241. font-size: 75%;
  242. line-height: 0;
  243. position: relative;
  244. vertical-align: baseline; }
  245. sub {
  246. bottom: -0.25em; }
  247. sup {
  248. top: -0.5em; }
  249. /* Embedded content
  250. ========================================================================== */
  251. /**
  252. * Add the correct display in IE 9-.
  253. */
  254. audio,
  255. video {
  256. display: inline-block; }
  257. /**
  258. * Add the correct display in iOS 4-7.
  259. */
  260. audio:not([controls]) {
  261. display: none;
  262. height: 0; }
  263. /**
  264. * Remove the border on images inside links in IE 10-.
  265. */
  266. img {
  267. border-style: none; }
  268. /**
  269. * Hide the overflow in IE.
  270. */
  271. svg:not(:root) {
  272. overflow: hidden; }
  273. /* Forms
  274. ========================================================================== */
  275. /**
  276. * 1. Change the font styles in all browsers (opinionated).
  277. * 2. Remove the margin in Firefox and Safari.
  278. */
  279. button,
  280. input,
  281. optgroup,
  282. select,
  283. textarea {
  284. font-family: sans-serif;
  285. /* 1 */
  286. font-size: 100%;
  287. /* 1 */
  288. line-height: 1.15;
  289. /* 1 */
  290. margin: 0;
  291. /* 2 */ }
  292. /**
  293. * Show the overflow in IE.
  294. * 1. Show the overflow in Edge.
  295. */
  296. button,
  297. input {
  298. /* 1 */
  299. overflow: visible; }
  300. /**
  301. * Remove the inheritance of text transform in Edge, Firefox, and IE.
  302. * 1. Remove the inheritance of text transform in Firefox.
  303. */
  304. button,
  305. select {
  306. /* 1 */
  307. text-transform: none; }
  308. /**
  309. * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  310. * controls in Android 4.
  311. * 2. Correct the inability to style clickable types in iOS and Safari.
  312. */
  313. button,
  314. html [type="button"],
  315. [type="reset"],
  316. [type="submit"] {
  317. -webkit-appearance: button;
  318. /* 2 */ }
  319. /**
  320. * Remove the inner border and padding in Firefox.
  321. */
  322. button::-moz-focus-inner,
  323. [type="button"]::-moz-focus-inner,
  324. [type="reset"]::-moz-focus-inner,
  325. [type="submit"]::-moz-focus-inner {
  326. border-style: none;
  327. padding: 0; }
  328. /**
  329. * Restore the focus styles unset by the previous rule.
  330. */
  331. button:-moz-focusring,
  332. [type="button"]:-moz-focusring,
  333. [type="reset"]:-moz-focusring,
  334. [type="submit"]:-moz-focusring {
  335. outline: 1px dotted ButtonText; }
  336. /**
  337. * Correct the padding in Firefox.
  338. */
  339. fieldset {
  340. padding: 0.35em 0.75em 0.625em; }
  341. /**
  342. * 1. Correct the text wrapping in Edge and IE.
  343. * 2. Correct the color inheritance from `fieldset` elements in IE.
  344. * 3. Remove the padding so developers are not caught out when they zero out
  345. * `fieldset` elements in all browsers.
  346. */
  347. legend {
  348. -webkit-box-sizing: border-box;
  349. box-sizing: border-box;
  350. /* 1 */
  351. color: inherit;
  352. /* 2 */
  353. display: table;
  354. /* 1 */
  355. max-width: 100%;
  356. /* 1 */
  357. padding: 0;
  358. /* 3 */
  359. white-space: normal;
  360. /* 1 */ }
  361. /**
  362. * 1. Add the correct display in IE 9-.
  363. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
  364. */
  365. progress {
  366. display: inline-block;
  367. /* 1 */
  368. vertical-align: baseline;
  369. /* 2 */ }
  370. /**
  371. * Remove the default vertical scrollbar in IE.
  372. */
  373. textarea {
  374. overflow: auto; }
  375. /**
  376. * 1. Add the correct box sizing in IE 10-.
  377. * 2. Remove the padding in IE 10-.
  378. */
  379. [type="checkbox"],
  380. [type="radio"] {
  381. -webkit-box-sizing: border-box;
  382. box-sizing: border-box;
  383. /* 1 */
  384. padding: 0;
  385. /* 2 */ }
  386. /**
  387. * Correct the cursor style of increment and decrement buttons in Chrome.
  388. */
  389. [type="number"]::-webkit-inner-spin-button,
  390. [type="number"]::-webkit-outer-spin-button {
  391. height: auto; }
  392. /**
  393. * 1. Correct the odd appearance in Chrome and Safari.
  394. * 2. Correct the outline style in Safari.
  395. */
  396. [type="search"] {
  397. -webkit-appearance: textfield;
  398. /* 1 */
  399. outline-offset: -2px;
  400. /* 2 */ }
  401. /**
  402. * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  403. */
  404. [type="search"]::-webkit-search-cancel-button,
  405. [type="search"]::-webkit-search-decoration {
  406. -webkit-appearance: none; }
  407. /**
  408. * 1. Correct the inability to style clickable types in iOS and Safari.
  409. * 2. Change font properties to `inherit` in Safari.
  410. */
  411. ::-webkit-file-upload-button {
  412. -webkit-appearance: button;
  413. /* 1 */
  414. font: inherit;
  415. /* 2 */ }
  416. /* Interactive
  417. ========================================================================== */
  418. /*
  419. * Add the correct display in IE 9-.
  420. * 1. Add the correct display in Edge, IE, and Firefox.
  421. */
  422. details,
  423. menu {
  424. display: block; }
  425. /*
  426. * Add the correct display in all browsers.
  427. */
  428. summary {
  429. display: list-item; }
  430. /* Scripting
  431. ========================================================================== */
  432. /**
  433. * Add the correct display in IE 9-.
  434. */
  435. canvas {
  436. display: inline-block; }
  437. /**
  438. * Add the correct display in IE.
  439. */
  440. template {
  441. display: none; }
  442. /* Hidden
  443. ========================================================================== */
  444. /**
  445. * Add the correct display in IE 10-.
  446. */
  447. [hidden] {
  448. display: none; }
  449. .container,
  450. .container-full {
  451. -webkit-box-sizing: border-box;
  452. box-sizing: border-box;
  453. width: 100%;
  454. margin-right: auto;
  455. margin-left: auto;
  456. padding-right: 30px;
  457. padding-left: 30px; }
  458. .container .grid,
  459. .container-full .grid {
  460. margin-right: -15px;
  461. margin-left: -15px; }
  462. @media (min-width: 576px) {
  463. .container {
  464. max-width: 576px; } }
  465. @media (min-width: 768px) {
  466. .container {
  467. max-width: 768px; } }
  468. @media (min-width: 992px) {
  469. .container {
  470. max-width: 992px; } }
  471. @media (min-width: 1200px) {
  472. .container {
  473. max-width: 1200px; } }
  474. @media (min-width: 1600px) {
  475. .container {
  476. max-width: 1600px; } }
  477. .grid {
  478. -webkit-box-sizing: border-box;
  479. box-sizing: border-box;
  480. display: block;
  481. display: -ms-flexbox;
  482. display: -webkit-box;
  483. display: flex;
  484. -ms-flex-wrap: wrap;
  485. flex-wrap: wrap;
  486. padding: 0;
  487. margin: 0 auto;
  488. position: relative;
  489. letter-spacing: -.31em;
  490. *letter-spacing: normal;
  491. word-spacing: -.43em;
  492. list-style-type: none; }
  493. .grid::before, .grid::after {
  494. -webkit-box-sizing: border-box;
  495. box-sizing: border-box;
  496. letter-spacing: normal;
  497. word-spacing: normal;
  498. white-space: normal; }
  499. [class^="col-"] {
  500. -webkit-box-sizing: border-box;
  501. box-sizing: border-box;
  502. letter-spacing: normal;
  503. word-spacing: normal;
  504. white-space: normal;
  505. position: relative;
  506. width: 100%;
  507. vertical-align: top;
  508. padding: 15px;
  509. display: inline-block;
  510. *display: inline;
  511. zoom: 1; }
  512. [class^="col-"]::before, [class^="col-"]::after {
  513. -webkit-box-sizing: border-box;
  514. box-sizing: border-box;
  515. letter-spacing: normal;
  516. word-spacing: normal;
  517. white-space: normal; }
  518. [class^="col-"] .grid {
  519. -ms-flex: 1 1 auto;
  520. -webkit-box-flex: 1;
  521. flex: 1 1 auto;
  522. margin: -15px; }
  523. .col-12 {
  524. width: 100%;
  525. *width: 99.9%; }
  526. .col-11 {
  527. width: 91.66667%;
  528. *width: 91.56667%; }
  529. .col-10 {
  530. width: 83.33333%;
  531. *width: 83.23333%; }
  532. .col-9 {
  533. width: 75%;
  534. *width: 74.9%; }
  535. .col-8 {
  536. width: 66.66667%;
  537. *width: 66.56667%; }
  538. .col-7 {
  539. width: 58.33333%;
  540. *width: 58.23333%; }
  541. .col-6 {
  542. width: 50%;
  543. *width: 49.9%; }
  544. .col-5 {
  545. width: 41.66667%;
  546. *width: 41.56667%; }
  547. .col-4 {
  548. width: 33.33333%;
  549. *width: 33.23333%; }
  550. .col-3 {
  551. width: 25%;
  552. *width: 24.9%; }
  553. .col-2 {
  554. width: 16.66667%;
  555. *width: 16.56667%; }
  556. .col-1 {
  557. width: 8.33333%;
  558. *width: 8.23333%; }
  559. @media (min-width: 576px) {
  560. .col-xs-12 {
  561. width: 100%;
  562. *width: 99.9%; }
  563. .col-xs-11 {
  564. width: 91.66667%;
  565. *width: 91.56667%; }
  566. .col-xs-10 {
  567. width: 83.33333%;
  568. *width: 83.23333%; }
  569. .col-xs-9 {
  570. width: 75%;
  571. *width: 74.9%; }
  572. .col-xs-8 {
  573. width: 66.66667%;
  574. *width: 66.56667%; }
  575. .col-xs-7 {
  576. width: 58.33333%;
  577. *width: 58.23333%; }
  578. .col-xs-6 {
  579. width: 50%;
  580. *width: 49.9%; }
  581. .col-xs-5 {
  582. width: 41.66667%;
  583. *width: 41.56667%; }
  584. .col-xs-4 {
  585. width: 33.33333%;
  586. *width: 33.23333%; }
  587. .col-xs-3 {
  588. width: 25%;
  589. *width: 24.9%; }
  590. .col-xs-2 {
  591. width: 16.66667%;
  592. *width: 16.56667%; }
  593. .col-xs-1 {
  594. width: 8.33333%;
  595. *width: 8.23333%; } }
  596. @media (min-width: 768px) {
  597. .col-sm-12 {
  598. width: 100%;
  599. *width: 99.9%; }
  600. .col-sm-11 {
  601. width: 91.66667%;
  602. *width: 91.56667%; }
  603. .col-sm-10 {
  604. width: 83.33333%;
  605. *width: 83.23333%; }
  606. .col-sm-9 {
  607. width: 75%;
  608. *width: 74.9%; }
  609. .col-sm-8 {
  610. width: 66.66667%;
  611. *width: 66.56667%; }
  612. .col-sm-7 {
  613. width: 58.33333%;
  614. *width: 58.23333%; }
  615. .col-sm-6 {
  616. width: 50%;
  617. *width: 49.9%; }
  618. .col-sm-5 {
  619. width: 41.66667%;
  620. *width: 41.56667%; }
  621. .col-sm-4 {
  622. width: 33.33333%;
  623. *width: 33.23333%; }
  624. .col-sm-3 {
  625. width: 25%;
  626. *width: 24.9%; }
  627. .col-sm-2 {
  628. width: 16.66667%;
  629. *width: 16.56667%; }
  630. .col-sm-1 {
  631. width: 8.33333%;
  632. *width: 8.23333%; } }
  633. @media (min-width: 992px) {
  634. .col-md-12 {
  635. width: 100%;
  636. *width: 99.9%; }
  637. .col-md-11 {
  638. width: 91.66667%;
  639. *width: 91.56667%; }
  640. .col-md-10 {
  641. width: 83.33333%;
  642. *width: 83.23333%; }
  643. .col-md-9 {
  644. width: 75%;
  645. *width: 74.9%; }
  646. .col-md-8 {
  647. width: 66.66667%;
  648. *width: 66.56667%; }
  649. .col-md-7 {
  650. width: 58.33333%;
  651. *width: 58.23333%; }
  652. .col-md-6 {
  653. width: 50%;
  654. *width: 49.9%; }
  655. .col-md-5 {
  656. width: 41.66667%;
  657. *width: 41.56667%; }
  658. .col-md-4 {
  659. width: 33.33333%;
  660. *width: 33.23333%; }
  661. .col-md-3 {
  662. width: 25%;
  663. *width: 24.9%; }
  664. .col-md-2 {
  665. width: 16.66667%;
  666. *width: 16.56667%; }
  667. .col-md-1 {
  668. width: 8.33333%;
  669. *width: 8.23333%; } }
  670. @media (min-width: 1200px) {
  671. .col-lg-12 {
  672. width: 100%;
  673. *width: 99.9%; }
  674. .col-lg-11 {
  675. width: 91.66667%;
  676. *width: 91.56667%; }
  677. .col-lg-10 {
  678. width: 83.33333%;
  679. *width: 83.23333%; }
  680. .col-lg-9 {
  681. width: 75%;
  682. *width: 74.9%; }
  683. .col-lg-8 {
  684. width: 66.66667%;
  685. *width: 66.56667%; }
  686. .col-lg-7 {
  687. width: 58.33333%;
  688. *width: 58.23333%; }
  689. .col-lg-6 {
  690. width: 50%;
  691. *width: 49.9%; }
  692. .col-lg-5 {
  693. width: 41.66667%;
  694. *width: 41.56667%; }
  695. .col-lg-4 {
  696. width: 33.33333%;
  697. *width: 33.23333%; }
  698. .col-lg-3 {
  699. width: 25%;
  700. *width: 24.9%; }
  701. .col-lg-2 {
  702. width: 16.66667%;
  703. *width: 16.56667%; }
  704. .col-lg-1 {
  705. width: 8.33333%;
  706. *width: 8.23333%; } }
  707. @media (min-width: 1600px) {
  708. .col-xlg-12 {
  709. width: 100%;
  710. *width: 99.9%; }
  711. .col-xlg-11 {
  712. width: 91.66667%;
  713. *width: 91.56667%; }
  714. .col-xlg-10 {
  715. width: 83.33333%;
  716. *width: 83.23333%; }
  717. .col-xlg-9 {
  718. width: 75%;
  719. *width: 74.9%; }
  720. .col-xlg-8 {
  721. width: 66.66667%;
  722. *width: 66.56667%; }
  723. .col-xlg-7 {
  724. width: 58.33333%;
  725. *width: 58.23333%; }
  726. .col-xlg-6 {
  727. width: 50%;
  728. *width: 49.9%; }
  729. .col-xlg-5 {
  730. width: 41.66667%;
  731. *width: 41.56667%; }
  732. .col-xlg-4 {
  733. width: 33.33333%;
  734. *width: 33.23333%; }
  735. .col-xlg-3 {
  736. width: 25%;
  737. *width: 24.9%; }
  738. .col-xlg-2 {
  739. width: 16.66667%;
  740. *width: 16.56667%; }
  741. .col-xlg-1 {
  742. width: 8.33333%;
  743. *width: 8.23333%; } }
  744. .col-auto {
  745. -ms-flex: 1 0 auto;
  746. -webkit-box-flex: 1;
  747. flex: 1 0 0px;
  748. width: auto; }
  749. @media (min-width: 576px) {
  750. .col-xs-auto {
  751. -ms-flex: 1 0 auto;
  752. -webkit-box-flex: 1;
  753. flex: 1 0 0px;
  754. width: auto; } }
  755. @media (min-width: 768px) {
  756. .col-sm-auto {
  757. -ms-flex: 1 0 auto;
  758. -webkit-box-flex: 1;
  759. flex: 1 0 0px;
  760. width: auto; } }
  761. @media (min-width: 992px) {
  762. .col-md-auto {
  763. -ms-flex: 1 0 auto;
  764. -webkit-box-flex: 1;
  765. flex: 1 0 0px;
  766. width: auto; } }
  767. @media (min-width: 1200px) {
  768. .col-lg-auto {
  769. -ms-flex: 1 0 auto;
  770. -webkit-box-flex: 1;
  771. flex: 1 0 0px;
  772. width: auto; } }
  773. @media (min-width: 1600px) {
  774. .col-xlg-auto {
  775. -ms-flex: 1 0 auto;
  776. -webkit-box-flex: 1;
  777. flex: 1 0 0px;
  778. width: auto; } }
  779. .order-12 {
  780. -ms-flex-order: 12;
  781. -webkit-box-ordinal-group: 13;
  782. order: 12; }
  783. .order-11 {
  784. -ms-flex-order: 11;
  785. -webkit-box-ordinal-group: 12;
  786. order: 11; }
  787. .order-10 {
  788. -ms-flex-order: 10;
  789. -webkit-box-ordinal-group: 11;
  790. order: 10; }
  791. .order-9 {
  792. -ms-flex-order: 9;
  793. -webkit-box-ordinal-group: 10;
  794. order: 9; }
  795. .order-8 {
  796. -ms-flex-order: 8;
  797. -webkit-box-ordinal-group: 9;
  798. order: 8; }
  799. .order-7 {
  800. -ms-flex-order: 7;
  801. -webkit-box-ordinal-group: 8;
  802. order: 7; }
  803. .order-6 {
  804. -ms-flex-order: 6;
  805. -webkit-box-ordinal-group: 7;
  806. order: 6; }
  807. .order-5 {
  808. -ms-flex-order: 5;
  809. -webkit-box-ordinal-group: 6;
  810. order: 5; }
  811. .order-4 {
  812. -ms-flex-order: 4;
  813. -webkit-box-ordinal-group: 5;
  814. order: 4; }
  815. .order-3 {
  816. -ms-flex-order: 3;
  817. -webkit-box-ordinal-group: 4;
  818. order: 3; }
  819. .order-2 {
  820. -ms-flex-order: 2;
  821. -webkit-box-ordinal-group: 3;
  822. order: 2; }
  823. .order-1 {
  824. -ms-flex-order: 1;
  825. -webkit-box-ordinal-group: 2;
  826. order: 1; }
  827. .order-0 {
  828. -ms-flex-order: 0;
  829. -webkit-box-ordinal-group: 1;
  830. order: 0; }
  831. @media only screen and (min-width: 576px) {
  832. .order-12-xs {
  833. -ms-flex-order: 12;
  834. -webkit-box-ordinal-group: 13;
  835. order: 12; }
  836. .order-11-xs {
  837. -ms-flex-order: 11;
  838. -webkit-box-ordinal-group: 12;
  839. order: 11; }
  840. .order-10-xs {
  841. -ms-flex-order: 10;
  842. -webkit-box-ordinal-group: 11;
  843. order: 10; }
  844. .order-9-xs {
  845. -ms-flex-order: 9;
  846. -webkit-box-ordinal-group: 10;
  847. order: 9; }
  848. .order-8-xs {
  849. -ms-flex-order: 8;
  850. -webkit-box-ordinal-group: 9;
  851. order: 8; }
  852. .order-7-xs {
  853. -ms-flex-order: 7;
  854. -webkit-box-ordinal-group: 8;
  855. order: 7; }
  856. .order-6-xs {
  857. -ms-flex-order: 6;
  858. -webkit-box-ordinal-group: 7;
  859. order: 6; }
  860. .order-5-xs {
  861. -ms-flex-order: 5;
  862. -webkit-box-ordinal-group: 6;
  863. order: 5; }
  864. .order-4-xs {
  865. -ms-flex-order: 4;
  866. -webkit-box-ordinal-group: 5;
  867. order: 4; }
  868. .order-3-xs {
  869. -ms-flex-order: 3;
  870. -webkit-box-ordinal-group: 4;
  871. order: 3; }
  872. .order-2-xs {
  873. -ms-flex-order: 2;
  874. -webkit-box-ordinal-group: 3;
  875. order: 2; }
  876. .order-1-xs {
  877. -ms-flex-order: 1;
  878. -webkit-box-ordinal-group: 2;
  879. order: 1; }
  880. .order-0-xs {
  881. -ms-flex-order: 0;
  882. -webkit-box-ordinal-group: 1;
  883. order: 0; } }
  884. @media only screen and (min-width: 768px) {
  885. .order-12-sm {
  886. -ms-flex-order: 12;
  887. -webkit-box-ordinal-group: 13;
  888. order: 12; }
  889. .order-11-sm {
  890. -ms-flex-order: 11;
  891. -webkit-box-ordinal-group: 12;
  892. order: 11; }
  893. .order-10-sm {
  894. -ms-flex-order: 10;
  895. -webkit-box-ordinal-group: 11;
  896. order: 10; }
  897. .order-9-sm {
  898. -ms-flex-order: 9;
  899. -webkit-box-ordinal-group: 10;
  900. order: 9; }
  901. .order-8-sm {
  902. -ms-flex-order: 8;
  903. -webkit-box-ordinal-group: 9;
  904. order: 8; }
  905. .order-7-sm {
  906. -ms-flex-order: 7;
  907. -webkit-box-ordinal-group: 8;
  908. order: 7; }
  909. .order-6-sm {
  910. -ms-flex-order: 6;
  911. -webkit-box-ordinal-group: 7;
  912. order: 6; }
  913. .order-5-sm {
  914. -ms-flex-order: 5;
  915. -webkit-box-ordinal-group: 6;
  916. order: 5; }
  917. .order-4-sm {
  918. -ms-flex-order: 4;
  919. -webkit-box-ordinal-group: 5;
  920. order: 4; }
  921. .order-3-sm {
  922. -ms-flex-order: 3;
  923. -webkit-box-ordinal-group: 4;
  924. order: 3; }
  925. .order-2-sm {
  926. -ms-flex-order: 2;
  927. -webkit-box-ordinal-group: 3;
  928. order: 2; }
  929. .order-1-sm {
  930. -ms-flex-order: 1;
  931. -webkit-box-ordinal-group: 2;
  932. order: 1; }
  933. .order-0-sm {
  934. -ms-flex-order: 0;
  935. -webkit-box-ordinal-group: 1;
  936. order: 0; } }
  937. @media only screen and (min-width: 992px) {
  938. .order-12-md {
  939. -ms-flex-order: 12;
  940. -webkit-box-ordinal-group: 13;
  941. order: 12; }
  942. .order-11-md {
  943. -ms-flex-order: 11;
  944. -webkit-box-ordinal-group: 12;
  945. order: 11; }
  946. .order-10-md {
  947. -ms-flex-order: 10;
  948. -webkit-box-ordinal-group: 11;
  949. order: 10; }
  950. .order-9-md {
  951. -ms-flex-order: 9;
  952. -webkit-box-ordinal-group: 10;
  953. order: 9; }
  954. .order-8-md {
  955. -ms-flex-order: 8;
  956. -webkit-box-ordinal-group: 9;
  957. order: 8; }
  958. .order-7-md {
  959. -ms-flex-order: 7;
  960. -webkit-box-ordinal-group: 8;
  961. order: 7; }
  962. .order-6-md {
  963. -ms-flex-order: 6;
  964. -webkit-box-ordinal-group: 7;
  965. order: 6; }
  966. .order-5-md {
  967. -ms-flex-order: 5;
  968. -webkit-box-ordinal-group: 6;
  969. order: 5; }
  970. .order-4-md {
  971. -ms-flex-order: 4;
  972. -webkit-box-ordinal-group: 5;
  973. order: 4; }
  974. .order-3-md {
  975. -ms-flex-order: 3;
  976. -webkit-box-ordinal-group: 4;
  977. order: 3; }
  978. .order-2-md {
  979. -ms-flex-order: 2;
  980. -webkit-box-ordinal-group: 3;
  981. order: 2; }
  982. .order-1-md {
  983. -ms-flex-order: 1;
  984. -webkit-box-ordinal-group: 2;
  985. order: 1; }
  986. .order-0-md {
  987. -ms-flex-order: 0;
  988. -webkit-box-ordinal-group: 1;
  989. order: 0; } }
  990. @media only screen and (min-width: 1200px) {
  991. .order-12-lg {
  992. -ms-flex-order: 12;
  993. -webkit-box-ordinal-group: 13;
  994. order: 12; }
  995. .order-11-lg {
  996. -ms-flex-order: 11;
  997. -webkit-box-ordinal-group: 12;
  998. order: 11; }
  999. .order-10-lg {
  1000. -ms-flex-order: 10;
  1001. -webkit-box-ordinal-group: 11;
  1002. order: 10; }
  1003. .order-9-lg {
  1004. -ms-flex-order: 9;
  1005. -webkit-box-ordinal-group: 10;
  1006. order: 9; }
  1007. .order-8-lg {
  1008. -ms-flex-order: 8;
  1009. -webkit-box-ordinal-group: 9;
  1010. order: 8; }
  1011. .order-7-lg {
  1012. -ms-flex-order: 7;
  1013. -webkit-box-ordinal-group: 8;
  1014. order: 7; }
  1015. .order-6-lg {
  1016. -ms-flex-order: 6;
  1017. -webkit-box-ordinal-group: 7;
  1018. order: 6; }
  1019. .order-5-lg {
  1020. -ms-flex-order: 5;
  1021. -webkit-box-ordinal-group: 6;
  1022. order: 5; }
  1023. .order-4-lg {
  1024. -ms-flex-order: 4;
  1025. -webkit-box-ordinal-group: 5;
  1026. order: 4; }
  1027. .order-3-lg {
  1028. -ms-flex-order: 3;
  1029. -webkit-box-ordinal-group: 4;
  1030. order: 3; }
  1031. .order-2-lg {
  1032. -ms-flex-order: 2;
  1033. -webkit-box-ordinal-group: 3;
  1034. order: 2; }
  1035. .order-1-lg {
  1036. -ms-flex-order: 1;
  1037. -webkit-box-ordinal-group: 2;
  1038. order: 1; }
  1039. .order-0-lg {
  1040. -ms-flex-order: 0;
  1041. -webkit-box-ordinal-group: 1;
  1042. order: 0; } }
  1043. @media only screen and (min-width: 1600px) {
  1044. .order-12-xlg {
  1045. -ms-flex-order: 12;
  1046. -webkit-box-ordinal-group: 13;
  1047. order: 12; }
  1048. .order-11-xlg {
  1049. -ms-flex-order: 11;
  1050. -webkit-box-ordinal-group: 12;
  1051. order: 11; }
  1052. .order-10-xlg {
  1053. -ms-flex-order: 10;
  1054. -webkit-box-ordinal-group: 11;
  1055. order: 10; }
  1056. .order-9-xlg {
  1057. -ms-flex-order: 9;
  1058. -webkit-box-ordinal-group: 10;
  1059. order: 9; }
  1060. .order-8-xlg {
  1061. -ms-flex-order: 8;
  1062. -webkit-box-ordinal-group: 9;
  1063. order: 8; }
  1064. .order-7-xlg {
  1065. -ms-flex-order: 7;
  1066. -webkit-box-ordinal-group: 8;
  1067. order: 7; }
  1068. .order-6-xlg {
  1069. -ms-flex-order: 6;
  1070. -webkit-box-ordinal-group: 7;
  1071. order: 6; }
  1072. .order-5-xlg {
  1073. -ms-flex-order: 5;
  1074. -webkit-box-ordinal-group: 6;
  1075. order: 5; }
  1076. .order-4-xlg {
  1077. -ms-flex-order: 4;
  1078. -webkit-box-ordinal-group: 5;
  1079. order: 4; }
  1080. .order-3-xlg {
  1081. -ms-flex-order: 3;
  1082. -webkit-box-ordinal-group: 4;
  1083. order: 3; }
  1084. .order-2-xlg {
  1085. -ms-flex-order: 2;
  1086. -webkit-box-ordinal-group: 3;
  1087. order: 2; }
  1088. .order-1-xlg {
  1089. -ms-flex-order: 1;
  1090. -webkit-box-ordinal-group: 2;
  1091. order: 1; }
  1092. .order-0-xlg {
  1093. -ms-flex-order: 0;
  1094. -webkit-box-ordinal-group: 1;
  1095. order: 0; } }
  1096. .wrap {
  1097. -ms-flex-wrap: wrap;
  1098. flex-wrap: wrap; }
  1099. .no-wrap {
  1100. -ms-flex-wrap: nowrap;
  1101. flex-wrap: nowrap; }
  1102. .no-wrap [class^="col-"] {
  1103. -ms-flex-negative: 1;
  1104. flex-shrink: 1; }
  1105. .wrap-reverse {
  1106. -ms-flex-wrap: wrap-reverse;
  1107. flex-wrap: wrap-reverse; }
  1108. .direction-row {
  1109. -ms-flex-direction: row;
  1110. -webkit-box-orient: horizontal;
  1111. -webkit-box-direction: normal;
  1112. flex-direction: row; }
  1113. .direction-row-reverse {
  1114. -ms-flex-direction: row-reverse;
  1115. -webkit-box-orient: horizontal;
  1116. -webkit-box-direction: reverse;
  1117. flex-direction: row-reverse; }
  1118. .direction-column {
  1119. -ms-flex-direction: column;
  1120. -webkit-box-orient: vertical;
  1121. -webkit-box-direction: normal;
  1122. flex-direction: column; }
  1123. .direction-column-reverse {
  1124. -ms-flex-direction: column-reverse;
  1125. -webkit-box-orient: vertical;
  1126. -webkit-box-direction: reverse;
  1127. flex-direction: column-reverse; }
  1128. .align-start {
  1129. -ms-flex-align: start;
  1130. -webkit-box-align: start;
  1131. align-items: flex-start; }
  1132. .align-end {
  1133. -ms-flex-align: end;
  1134. -webkit-box-align: end;
  1135. align-items: flex-end; }
  1136. .align-end [class^="col-"] {
  1137. vertical-align: bottom; }
  1138. .align-center {
  1139. -ms-flex-align: center;
  1140. -webkit-box-align: center;
  1141. align-items: center; }
  1142. .align-center [class^="col-"] {
  1143. vertical-align: middle; }
  1144. .align-baseline {
  1145. -ms-flex-align: baseline;
  1146. -webkit-box-align: baseline;
  1147. align-items: baseline; }
  1148. .align-content-start {
  1149. -ms-flex-line-pack: start;
  1150. align-content: flex-start; }
  1151. .align-content-end {
  1152. -ms-flex-line-pack: end;
  1153. align-content: flex-end; }
  1154. .align-content-end [class^="col-"] {
  1155. vertical-align: bottom; }
  1156. .align-content-center {
  1157. -ms-flex-line-pack: center;
  1158. align-content: center; }
  1159. .align-content-space-between {
  1160. -ms-flex-line-pack: justify;
  1161. align-content: space-between; }
  1162. .align-content-space-around {
  1163. -ms-flex-line-pack: distribute;
  1164. align-content: space-around; }
  1165. .align-self-stretch {
  1166. -ms-flex-item-align: stretch;
  1167. -webkit-align-self: stretch;
  1168. align-self: stretch; }
  1169. .align-self-start {
  1170. -ms-flex-item-align: start;
  1171. -webkit-align-self: flex-start;
  1172. align-self: flex-start; }
  1173. .align-self-end {
  1174. -ms-flex-item-align: end;
  1175. -webkit-align-self: flex-end;
  1176. align-self: flex-end;
  1177. vertical-align: bottom; }
  1178. .align-self-center {
  1179. -ms-flex-item-align: center;
  1180. -webkit-align-self: center;
  1181. align-self: center;
  1182. vertical-align: middle; }
  1183. .align-self-baseline {
  1184. -ms-flex-item-align: baseline;
  1185. -webkit-align-self: baseline;
  1186. align-self: baseline;
  1187. vertical-align: baseline; }
  1188. .justify-start {
  1189. -ms-flex-pack: start;
  1190. -webkit-box-pack: start;
  1191. justify-content: flex-start; }
  1192. .justify-start.grid {
  1193. text-align: left; }
  1194. .justify-end {
  1195. -ms-flex-pack: end;
  1196. -webkit-box-pack: end;
  1197. justify-content: flex-end; }
  1198. .justify-end.grid {
  1199. text-align: right;
  1200. text-align-last: right; }
  1201. .justify-end.grid [class^="col-"] {
  1202. text-align: left;
  1203. text-align: start;
  1204. text-align-last: left;
  1205. text-align-last: start; }
  1206. .justify-center {
  1207. -ms-flex-pack: center;
  1208. -webkit-box-pack: center;
  1209. justify-content: center; }
  1210. .justify-center.grid {
  1211. text-align: center;
  1212. text-align-last: center; }
  1213. .justify-center.grid [class^="col-"] {
  1214. text-align: left;
  1215. text-align: start;
  1216. text-align-last: left;
  1217. text-align-last: start; }
  1218. .justify-space-between {
  1219. -ms-flex-pack: justify;
  1220. -webkit-box-pack: justify;
  1221. justify-content: space-between; }
  1222. .justify-space-between.grid {
  1223. text-align: justify;
  1224. text-align-last: justify; }
  1225. .justify-space-between.grid [class^="col-"] {
  1226. text-align: left;
  1227. text-align: start;
  1228. text-align-last: left;
  1229. text-align-last: start; }
  1230. .justify-space-around {
  1231. -ms-flex-pack: distribute;
  1232. justify-content: space-around; }
  1233. .justify-space-around.grid {
  1234. text-align: justify;
  1235. text-align-last: justify; }
  1236. .justify-space-around.grid [class^="col-"] {
  1237. text-align: left;
  1238. text-align: start;
  1239. text-align-last: left;
  1240. text-align-last: start; }
  1241. .grid-bleed [class*="col-"] {
  1242. padding: 0; }
  1243. .col-grid {
  1244. display: -ms-flexbox;
  1245. display: -webkit-box;
  1246. display: flex;
  1247. -ms-flex-direction: column;
  1248. -webkit-box-orient: vertical;
  1249. -webkit-box-direction: normal;
  1250. flex-direction: column; }
  1251. .col-grid.direction-row {
  1252. -ms-flex-direction: row;
  1253. -webkit-box-orient: horizontal;
  1254. -webkit-box-direction: normal;
  1255. flex-direction: row; }
  1256. .col-bleed {
  1257. padding: 0; }
  1258. .col-bleed-x {
  1259. padding: 15px 0; }
  1260. .col-bleed-y {
  1261. padding: 0 15px; }
  1262. .flex-img {
  1263. display: block;
  1264. -ms-flex: 0 0 auto;
  1265. -webkit-box-flex: 0;
  1266. flex: 0 0 auto;
  1267. max-width: 100%;
  1268. height: auto;
  1269. width: 100%;
  1270. *width: auto; }
  1271. .flex-footer {
  1272. width: 100%;
  1273. margin-top: auto;
  1274. margin-bottom: 0; }
  1275. .flex-footer > :last-child {
  1276. margin-bottom: 0; }
  1277. @media (max-width: 575px) {
  1278. .hidden-xxs {
  1279. display: none; } }
  1280. @media (min-width: 576px) and (max-width: 767px) {
  1281. .hidden-xs {
  1282. display: none; } }
  1283. @media (min-width: 768px) and (max-width: 991px) {
  1284. .hidden-sm {
  1285. display: none; } }
  1286. @media (min-width: 992px) and (max-width: 1199px) {
  1287. .hidden-md {
  1288. display: none; } }
  1289. @media (min-width: 1200px) {
  1290. .hidden-lg {
  1291. display: none; } }
  1292. /**
  1293. * base
  1294. *
  1295. *
  1296. * @author Björn Hase
  1297. *
  1298. */
  1299. html {
  1300. font-size: 100%; }
  1301. body,
  1302. html {
  1303. height: 100%; }
  1304. html,
  1305. legend {
  1306. -webkit-box-sizing: border-box;
  1307. box-sizing: border-box; }
  1308. *,
  1309. *::after,
  1310. *::before {
  1311. -webkit-box-sizing: inherit;
  1312. box-sizing: inherit; }
  1313. table {
  1314. border-collapse: collapse;
  1315. border-spacing: 0; }
  1316. p {
  1317. margin: 0 0 0.625em 0; }
  1318. a,
  1319. ins,
  1320. u {
  1321. -webkit-text-decoration-skip: ink edges;
  1322. text-decoration-skip: ink edges; }
  1323. a {
  1324. color: #f0c209; }
  1325. a:hover {
  1326. color: #363636; }
  1327. a:focus {
  1328. outline: none; }
  1329. abbr[title] {
  1330. border-bottom: 1px dotted;
  1331. cursor: help;
  1332. text-decoration: none; }
  1333. mark {
  1334. padding: 0.625em; }
  1335. blockquote {
  1336. border-left: 1px solid #b3b2af;
  1337. margin-left: 0;
  1338. padding: 0.625em 1.25em; }
  1339. blockquote p:last-child {
  1340. margin-bottom: 0; }
  1341. ul, ol, dl {
  1342. padding: 0;
  1343. margin: 0 0 0.625em 0.625em; }
  1344. ul ul, ol ol {
  1345. margin-top: 0.3125em; }
  1346. ol {
  1347. list-style: decimal inside; }
  1348. ul {
  1349. list-style: disc inside; }
  1350. dd, dt {
  1351. margin: 0; }
  1352. dt {
  1353. font-weight: bold; }
  1354. figure {
  1355. margin: 0 0 0.625em; }
  1356. figcaption {
  1357. margin: 0.625em 0 0; }
  1358. hr {
  1359. border: 0;
  1360. border-top: 1px solid #b3b2af;
  1361. margin: 0.625em 0; }
  1362. body {
  1363. font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
  1364. font-weight: normal;
  1365. line-height: 1.618;
  1366. color: #363636;
  1367. background-color: #ffffff;
  1368. direction: ltr;
  1369. font-size: 16px;
  1370. font-size: 1rem; }
  1371. /**
  1372. * button
  1373. *
  1374. *
  1375. * @author Björn Hase
  1376. *
  1377. */
  1378. /**
  1379. * code
  1380. *
  1381. * <pre class="code">
  1382. * <code>
  1383. * //
  1384. * </code>
  1385. * </pre>
  1386. *
  1387. * @author Björn Hase
  1388. *
  1389. */
  1390. /**
  1391. * group
  1392. *
  1393. * <nav class="group group--horizontal">
  1394. * <ul class="group__section">
  1395. * <li class="group__item"></li>
  1396. * <ul>
  1397. * </nav>
  1398. *
  1399. * @author Björn Hase
  1400. *
  1401. */
  1402. /**
  1403. * heading
  1404. *
  1405. * create classes for heading similar to there name,
  1406. * run map for sizes on each heading
  1407. *
  1408. *
  1409. * @author Björn Hase
  1410. *
  1411. */
  1412. /**
  1413. * hero
  1414. *
  1415. * background-position is as default: cover
  1416. *
  1417. * <div class="hero" style="width: value height: value; background-image: url(path)"></div>
  1418. *
  1419. *
  1420. * @author Björn Hase
  1421. *
  1422. */
  1423. /**
  1424. * icon
  1425. *
  1426. * use svg as icon
  1427. *
  1428. * <svg class="icon" viewBox="0 0 100 100">
  1429. * <use src="#"></use>
  1430. * </svg>
  1431. *
  1432. *
  1433. * @author Björn Hase
  1434. *
  1435. */
  1436. /**
  1437. * add modificators for icons as fill from map
  1438. *
  1439. *
  1440. * @param {map} $colors
  1441. *
  1442. */
  1443. /**
  1444. * add color as fill
  1445. *
  1446. *
  1447. * @param {color} $color
  1448. *
  1449. */
  1450. /**
  1451. * adding sizes for icons from map
  1452. *
  1453. *
  1454. * @param {map} $sizes
  1455. *
  1456. */
  1457. /**
  1458. * add size for icon as width and height
  1459. *
  1460. *
  1461. * @param {px} $size
  1462. *
  1463. */
  1464. /**
  1465. * panel
  1466. *
  1467. * <div class="modal">
  1468. *
  1469. * </div>
  1470. *
  1471. * @author Björn Hase
  1472. *
  1473. */
  1474. /**
  1475. * panel
  1476. *
  1477. * <div class="panel">
  1478. *
  1479. * </div>
  1480. *
  1481. * @author Björn Hase
  1482. *
  1483. */
  1484. /**
  1485. * table
  1486. *
  1487. * <table class="table table--striped">
  1488. * <thead>
  1489. * <tr>
  1490. * <th>name</th>
  1491. * <th>age</th>
  1492. * </tr>
  1493. * </thead>
  1494. * <tbody>
  1495. * <tr>
  1496. * <td>The Shawshank Redemption</td>
  1497. * <td>12</td>
  1498. * </tr>
  1499. * </tbody>
  1500. * </table>
  1501. *
  1502. * @author Björn Hase
  1503. *
  1504. */
  1505. /**
  1506. * <div class="field">
  1507. * <div class="field__panel">
  1508. * <ul>
  1509. * <li>item 1<li>
  1510. * </ul>
  1511. * </div>
  1512. * </div>
  1513. *
  1514. * @author Björn Hase
  1515. *
  1516. */
  1517. /**
  1518. * text
  1519. *
  1520. * <div class="field">
  1521. * <label class="field__label">
  1522. * input
  1523. * <input type="text" class="field__text" />
  1524. * </label>
  1525. * </div>
  1526. *
  1527. * @author Björn Hase
  1528. *
  1529. */
  1530. /**
  1531. * checkbox
  1532. *
  1533. * <div class="field">
  1534. * <input id="" type="text" class="field__checkbox" />
  1535. * <label for="" class="field__label">
  1536. * <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
  1537. * <use src="#"></use>
  1538. * </svg>
  1539. * <svg class="icon field__checkbox__checked" viewBox="0 0 100 100">
  1540. * <use src="#"></use>
  1541. * </svg>
  1542. * </label>
  1543. * </div>
  1544. *
  1545. * @author Björn Hase
  1546. *
  1547. */
  1548. /**
  1549. * radio
  1550. *
  1551. * <div class="field">
  1552. * <input id="" type="text" class="field__radio" />
  1553. * <label for="" class="field__label">
  1554. * <svg class="icon field__radio__checked" viewBox="0 0 100 100">
  1555. * <use src="#"></use>
  1556. * </svg>
  1557. * <svg class="icon field__radio__checked" viewBox="0 0 100 100">
  1558. * <use src="#"></use>
  1559. * </svg>
  1560. * </label>
  1561. * </div>
  1562. *
  1563. * @author Björn Hase
  1564. *
  1565. */
  1566. /**
  1567. * select
  1568. *
  1569. * <div class="field">
  1570. * <label class="field__label">
  1571. * <select class="field__select">
  1572. *
  1573. * </select>
  1574. * </label>
  1575. * </div>
  1576. *
  1577. * @author Björn Hase
  1578. *
  1579. */
  1580. /**
  1581. * field
  1582. *
  1583. *
  1584. * @author Björn Hase
  1585. *
  1586. */
  1587. /**
  1588. * helpers for align
  1589. *
  1590. *
  1591. *
  1592. * @author Björn Hase
  1593. *
  1594. */
  1595. /**
  1596. * helpers for margin
  1597. *
  1598. *
  1599. *
  1600. * @author Björn Hase
  1601. *
  1602. */
  1603. /**
  1604. * helpers for media elements
  1605. *
  1606. *
  1607. * @author Björn Hase
  1608. *
  1609. */
  1610. /**
  1611. * helpers for text
  1612. *
  1613. * font-sizes, color, background-color
  1614. *
  1615. *
  1616. * @author Björn Hase
  1617. *
  1618. */
  1619. /**
  1620. * helpers for width
  1621. *
  1622. *
  1623. * @author Björn Hase
  1624. *
  1625. */
  1626. .button {
  1627. position: relative;
  1628. display: inline-block;
  1629. text-decoration: none;
  1630. vertical-align: middle;
  1631. -webkit-appearance: none;
  1632. -moz-appearance: none;
  1633. appearance: none;
  1634. padding: 0.625em 1.5625em; }
  1635. .button--wide {
  1636. width: 100%; }
  1637. .button--up, .button--down {
  1638. position: fixed;
  1639. bottom: 0;
  1640. margin: 1.25em;
  1641. padding: 0.5em 0.8125em;
  1642. z-index: 100; }
  1643. .button--down {
  1644. bottom: 0; }
  1645. .button--up {
  1646. bottom: 0; }
  1647. .button:hover {
  1648. cursor: pointer;
  1649. text-decoration: none; }
  1650. .button:focus {
  1651. outline: none; }
  1652. .code {
  1653. font-family: monospace, monospace;
  1654. white-space: pre;
  1655. display: block;
  1656. overflow-y: hidden;
  1657. overflow-x: auto;
  1658. padding: 0.625em 1.25em;
  1659. border: 1px solid #d0d0d0;
  1660. background-color: #f9f9f9;
  1661. margin: 0 0 0.625em;
  1662. font-size: 16px;
  1663. font-size: 1rem; }
  1664. .group--horizontal .group__item, .group--horizontal .group__section {
  1665. display: inline-block; }
  1666. .group__section {
  1667. list-style: none;
  1668. margin: 0;
  1669. padding: 0; }
  1670. .group__section li {
  1671. margin: 0;
  1672. padding: 0; }
  1673. .group__section--separate .group__item:after {
  1674. margin: 0 0.625em 0;
  1675. content: "/"; }
  1676. .group__section--separate .group__item:last-child:after {
  1677. display: none; }
  1678. h1, .h1,
  1679. h2, .h2,
  1680. h3, .h3,
  1681. h4, .h4,
  1682. h5, .h5,
  1683. h6, .h6 {
  1684. font-family: Arial, Helvetica, Neue Helvetica, sans-serif;
  1685. font-weight: bold;
  1686. line-height: 1.618;
  1687. margin: 0 0 0.3125em; }
  1688. h1, .h1 {
  1689. font-size: 40px;
  1690. font-size: 2.5rem; }
  1691. h2, .h2 {
  1692. font-size: 36px;
  1693. font-size: 2.25rem; }
  1694. h3, .h3 {
  1695. font-size: 32px;
  1696. font-size: 2rem; }
  1697. h4, .h4 {
  1698. font-size: 28px;
  1699. font-size: 1.75rem; }
  1700. h5, .h5 {
  1701. font-size: 24px;
  1702. font-size: 1.5rem; }
  1703. h6, .h6 {
  1704. font-size: 20px;
  1705. font-size: 1.25rem; }
  1706. .hero {
  1707. background-position: center;
  1708. background-repeat: no-repeat;
  1709. background-size: cover;
  1710. position: relative; }
  1711. .hero--top {
  1712. background-position: top center; }
  1713. .hero--bottom {
  1714. background-position: bottom center; }
  1715. .hero--contain {
  1716. background-size: contain; }
  1717. .icon {
  1718. display: inline-block;
  1719. position: relative;
  1720. vertical-align: text-bottom;
  1721. margin: 0 2px;
  1722. fill: #363636;
  1723. width: 16px; }
  1724. .icon--success {
  1725. fill: #5cb85c; }
  1726. .icon--warning {
  1727. fill: #f0ad4e; }
  1728. .icon--danger {
  1729. fill: #d9534f; }
  1730. .icon--small {
  1731. width: 12px; }
  1732. .icon--large {
  1733. width: 28px; }
  1734. .modal {
  1735. position: absolute;
  1736. z-index: 100; }
  1737. .modal--fixed {
  1738. position: fixed; }
  1739. .modal--left {
  1740. left: 0; }
  1741. .modal--top-center {
  1742. left: 50%; }
  1743. .modal--top {
  1744. top: 0; }
  1745. .modal--right {
  1746. right: 0; }
  1747. .modal--bottom {
  1748. bottom: 0; }
  1749. .modal .panel {
  1750. margin: 1.25em; }
  1751. .panel__inner {
  1752. padding: 0.625em; }
  1753. .table {
  1754. width: 100%; }
  1755. .table--striped tr:nth-child(even) {
  1756. background-color: whitesmoke; }
  1757. .table--scroll {
  1758. overflow-x: auto; }
  1759. .table td {
  1760. color: #363636; }
  1761. .table td,
  1762. .table th {
  1763. padding: 0.625em 0.5em;
  1764. text-align: left;
  1765. border-bottom: 1px solid #9c9c9c; }
  1766. .table th {
  1767. border-bottom-width: 2px; }
  1768. .field {
  1769. margin: 0 0 0.625em 0; }
  1770. .field__, .field__text, .field__select {
  1771. line-height: 1.618;
  1772. padding: 0.375em 0.5em;
  1773. color: #363636;
  1774. -webkit-appearance: none;
  1775. -moz-appearance: none;
  1776. appearance: none;
  1777. font-size: 16px;
  1778. font-size: 1rem; }
  1779. .field__text {
  1780. display: block;
  1781. width: 100%;
  1782. border: 1px solid #b3b2af; }
  1783. .field__text--valid {
  1784. border-color: #5cb85c; }
  1785. .field__text--error {
  1786. border-color: #d9534f; }
  1787. .field__text:focus {
  1788. border-color: #f0c209; }
  1789. .field__checkbox {
  1790. position: relative;
  1791. display: none; }
  1792. .field__checkbox + .field__label .field__checkbox__checked {
  1793. display: none; }
  1794. .field__checkbox + .field__label:hover {
  1795. cursor: pointer; }
  1796. .field__checkbox:checked + .field__label .field__checkbox__checked {
  1797. display: inline-block; }
  1798. .field__checkbox:checked + .field__label .field__checkbox__unchecked {
  1799. display: none; }
  1800. .field__checkbox__checked {
  1801. fill: #5cb85c; }
  1802. .field__checkbox__unchecked {
  1803. fill: #363636; }
  1804. .field__radio {
  1805. position: relative;
  1806. display: none; }
  1807. .field__radio + .field__label .field__radio__checked {
  1808. display: none; }
  1809. .field__radio + .field__label:hover {
  1810. cursor: pointer; }
  1811. .field__radio:checked + .field__label .field__radio__checked {
  1812. display: inline-block; }
  1813. .field__radio:checked + .field__label .field__radio__unchecked {
  1814. display: none; }
  1815. .field__radio__checked {
  1816. fill: #5cb85c; }
  1817. .field__radio__unchecked {
  1818. fill: #363636; }
  1819. .field__select {
  1820. display: block;
  1821. width: 100%;
  1822. padding: 0.5em;
  1823. border: 1px solid #b3b2af;
  1824. background-color: white; }
  1825. .field__select--valid {
  1826. border-color: #5cb85c; }
  1827. .field__select--error {
  1828. border-color: #d9534f; }
  1829. .field__select:focus {
  1830. outline: 0;
  1831. border-color: #f0c209; }
  1832. .field__panel {
  1833. padding: 0.625em; }
  1834. .field__panel--error {
  1835. color: white;
  1836. background-color: #d9534f; }
  1837. .container {
  1838. max-width: 992px;
  1839. width: 100%;
  1840. margin: 0 auto; }
  1841. .lead {
  1842. margin-top: -0.3125em; }
  1843. .header {
  1844. padding: 8px 0 0;
  1845. margin: 0 0 20px;
  1846. background-color: #f0c209;
  1847. border-bottom: 1px solid #bf9a07; }
  1848. @media only screen and (min-width: 768px) {
  1849. .header {
  1850. margin: 0 0 30px; } }
  1851. .header__title {
  1852. color: white;
  1853. margin: 0 0 0.1875em; }
  1854. .header__logo {
  1855. top: 3px;
  1856. width: 50px; }
  1857. .footer {
  1858. padding: 8px 0 0;
  1859. background-color: #e9e9e9;
  1860. border-top: 1px dotted #959595;
  1861. margin: 50px 0 0 0; }
  1862. .button {
  1863. border: 1px solid #bf9a07;
  1864. background-color: #f0c209;
  1865. color: white; }
  1866. .button svg {
  1867. fill: white; }
  1868. .nav {
  1869. position: relative; }
  1870. .nav a {
  1871. font-style: italic;
  1872. font-size: 18px;
  1873. font-size: 1.125rem; }
  1874. @media only screen and (min-width: 768px) {
  1875. .nav {
  1876. position: fixed; } }
  1877. .panel {
  1878. border: 1px solid #cccbc9;
  1879. background-color: #f1f1f0; }
  1880. .sm, .md, .md-only, .lg-only {
  1881. display: none; }
  1882. @media only screen and (min-width: 768px) {
  1883. .sm {
  1884. display: block; } }
  1885. @media only screen and (min-width: 992px) {
  1886. .md {
  1887. display: block; } }
  1888. @media only screen and (min-width: 992px) and (max-width: 1199px) {
  1889. .md-only {
  1890. display: block; } }
  1891. @media only screen and (min-width: 1200px) and (max-width: 1599px) {
  1892. .lg-only {
  1893. display: block; } }
  1894. .text-left {
  1895. text-align: left; }
  1896. .text-right {
  1897. text-align: right; }
  1898. .text-center {
  1899. text-align: center; }
  1900. .text-justify {
  1901. text-align: justify; }
  1902. .float-left {
  1903. float: left; }
  1904. .float-right {
  1905. float: right; }
  1906. .float-none {
  1907. float: none; }
  1908. .center {
  1909. margin-left: auto;
  1910. margin-right: auto; }
  1911. .clearfix::before, .clearfix::after {
  1912. display: table;
  1913. content: ' '; }
  1914. .clearfix::after {
  1915. clear: both; }
  1916. .margin-top-0x {
  1917. margin-top: 0; }
  1918. .margin-top-1x {
  1919. margin-top: 0.625em; }
  1920. .margin-top-2x {
  1921. margin-top: 1.25em; }
  1922. .margin-top-3x {
  1923. margin-top: 1.875em; }
  1924. .margin-bottom-0x {
  1925. margin-bottom: 0; }
  1926. .margin-bottom-1x {
  1927. margin-bottom: 0.625em; }
  1928. .margin-bottom-2x {
  1929. margin-bottom: 1.25em; }
  1930. .margin-bottom-3x {
  1931. margin-bottom: 1.875em; }
  1932. .img-responsive {
  1933. display: block;
  1934. max-width: 100%;
  1935. height: auto; }
  1936. .img-rounded {
  1937. border-radius: 50%; }
  1938. .video-responsive {
  1939. display: block;
  1940. overflow: hidden;
  1941. padding: 0;
  1942. position: relative;
  1943. width: 100%; }
  1944. .video-responsive iframe, .video-responsive object, .video-responsive embed {
  1945. border: 0;
  1946. bottom: 0;
  1947. height: 100%;
  1948. left: 0;
  1949. position: absolute;
  1950. right: 0;
  1951. top: 0;
  1952. width: 100%; }
  1953. .text-italic {
  1954. font-style: italic; }
  1955. .text-bold {
  1956. font-weight: bold; }
  1957. .text-uppercase {
  1958. text-transform: uppercase; }
  1959. .text-lowercase {
  1960. text-transform: lowercase; }
  1961. .text-small {
  1962. font-size: 80%; }
  1963. .text-crossed {
  1964. text-decoration: line-through; }
  1965. .text-default {
  1966. font-size: 16px;
  1967. font-size: 1rem; }
  1968. .text-small {
  1969. font-size: 16px;
  1970. font-size: 1rem; }
  1971. .text-large {
  1972. font-size: 20px;
  1973. font-size: 1.25rem; }
  1974. .text-primary {
  1975. color: #f0c209; }
  1976. .text-secondary {
  1977. color: #b3b2af; }
  1978. .text-success {
  1979. color: #5cb85c; }
  1980. .text-warning {
  1981. color: #f0ad4e; }
  1982. .text-danger {
  1983. color: #d9534f; }
  1984. .text-info {
  1985. color: #0090d4; }
  1986. .background-primary {
  1987. background-color: #f0c209; }
  1988. .background-secondary {
  1989. background-color: #b3b2af; }
  1990. .background-success {
  1991. background-color: #5cb85c; }
  1992. .background-warning {
  1993. background-color: #f0ad4e; }
  1994. .background-danger {
  1995. background-color: #d9534f; }
  1996. .background-info {
  1997. background-color: #0090d4; }
  1998. .width-25 {
  1999. width: 25%; }
  2000. .width-50 {
  2001. width: 50%; }
  2002. .width-75 {
  2003. width: 75%; }
  2004. .width-100 {
  2005. width: 100%; }
  2006. /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsaUJBQWlCO0FBQ2pCOzs7Ozs7R0FNRztBQUNIOzs7Ozs7SUFNSTtBQUNKOzs7Ozs7R0FNRztBQUNIOzs7Ozs7O0dBT0c7QUFDSDs7Ozs7O0dBTUc7QUFDSDs7Ozs7R0FLRztBQUNIOzs7Ozs7R0FNRztBQUNIOzs7Ozs7R0FNRztBQUNIOzs7Ozs7R0FNRztBQUNIOzs7Ozs7R0FNRztBQUNIOzs7Ozs7R0FNRztBQUNIOzs7OztHQUtHO0FBQ0g7Ozs7R0FJRztBQUNIOzs7Ozs7R0FNRztBQUNILDRFQUE0RTtBQUM1RTtnRkFDZ0Y7QUFDaEY7Ozs7R0FJRztBQUNIO0VBQ0Usa0JBQWtCO0VBQ2xCLE9BQU87RUFDUCwyQkFBMkI7RUFDM0IsT0FBTztFQUNQLCtCQUErQjtFQUMvQixPQUFPLEVBQUU7O0FBRVg7Z0ZBQ2dGO0FBQ2hGOztHQUVHO0FBQ0g7RUFDRSxVQUFVLEVBQUU7O0FBRWQ7O0dBRUc7QUFDSDs7Ozs7O0VBTUUsZUFBZSxFQUFFOztBQUVuQjs7O0dBR0c7QUFDSDtFQUNFLGVBQWU7RUFDZixpQkFBaUIsRUFBRTs7QUFFckI7Z0ZBQ2dGO0FBQ2hGOzs7R0FHRztBQUNIOzs7RUFHRSxPQUFPO0VBQ1AsZUFBZSxFQUFFOztBQUVuQjs7R0FFRztBQUNIO0VBQ0UsaUJBQWlCLEVBQUU7O0FBRXJCOzs7R0FHRztBQUNIO0VBQ0UsZ0NBQXdCO1VBQXhCLHdCQUF3QjtFQUN4QixPQUFPO0VBQ1AsVUFBVTtFQUNWLE9BQU87RUFDUCxrQkFBa0I7RUFDbEIsT0FBTyxFQUFFOztBQUVYOzs7R0FHRztBQUNIO0VBQ0Usa0NBQWtDO0VBQ2xDLE9BQU87RUFDUCxlQUFlO0VBQ2YsT0FBTyxFQUFFOztBQUVYO2dGQUNnRjtBQUNoRjs7O0dBR0c7QUFDSDtFQUNFLDhCQUE4QjtFQUM5QixPQUFPO0VBQ1Asc0NBQXNDO0VBQ3RDLE9BQU8sRUFBRTs7QUFFWDs7O0dBR0c7QUFDSDtFQUNFLG9CQUFv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