API tools faq
paste
Advertisement
Guest User

CSS File

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