spectre-exp.css 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231
  1. /*! Spectre.css Experimentals v0.5.9 | MIT License | github.com/picturepan2/spectre */
  2. .form-autocomplete {
  3. position: relative;
  4. }
  5. .form-autocomplete .form-autocomplete-input {
  6. align-content: flex-start;
  7. display: -ms-flexbox;
  8. display: flex;
  9. -ms-flex-line-pack: start;
  10. -ms-flex-wrap: wrap;
  11. flex-wrap: wrap;
  12. height: auto;
  13. min-height: 1.6rem;
  14. padding: .1rem;
  15. }
  16. .form-autocomplete .form-autocomplete-input.is-focused {
  17. border-color: #5755d9;
  18. box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
  19. }
  20. .form-autocomplete .form-autocomplete-input .form-input {
  21. border-color: transparent;
  22. box-shadow: none;
  23. display: inline-block;
  24. -ms-flex: 1 0 auto;
  25. flex: 1 0 auto;
  26. height: 1.2rem;
  27. line-height: .8rem;
  28. margin: .1rem;
  29. width: auto;
  30. }
  31. .form-autocomplete .menu {
  32. left: 0;
  33. position: absolute;
  34. top: 100%;
  35. width: 100%;
  36. }
  37. .form-autocomplete.autocomplete-oneline .form-autocomplete-input {
  38. -ms-flex-wrap: nowrap;
  39. flex-wrap: nowrap;
  40. overflow-x: auto;
  41. }
  42. .form-autocomplete.autocomplete-oneline .chip {
  43. -ms-flex: 1 0 auto;
  44. flex: 1 0 auto;
  45. }
  46. .calendar {
  47. border: .05rem solid #dadee4;
  48. border-radius: .1rem;
  49. display: block;
  50. min-width: 280px;
  51. }
  52. .calendar .calendar-nav {
  53. align-items: center;
  54. background: #f7f8f9;
  55. border-top-left-radius: .1rem;
  56. border-top-right-radius: .1rem;
  57. display: -ms-flexbox;
  58. display: flex;
  59. -ms-flex-align: center;
  60. font-size: .9rem;
  61. padding: .4rem;
  62. }
  63. .calendar .calendar-header,
  64. .calendar .calendar-body {
  65. display: -ms-flexbox;
  66. display: flex;
  67. -ms-flex-pack: center;
  68. -ms-flex-wrap: wrap;
  69. flex-wrap: wrap;
  70. justify-content: center;
  71. padding: .4rem 0;
  72. }
  73. .calendar .calendar-header .calendar-date,
  74. .calendar .calendar-body .calendar-date {
  75. -ms-flex: 0 0 14.28%;
  76. flex: 0 0 14.28%;
  77. max-width: 14.28%;
  78. }
  79. .calendar .calendar-header {
  80. background: #f7f8f9;
  81. border-bottom: .05rem solid #dadee4;
  82. color: #bcc3ce;
  83. font-size: .7rem;
  84. text-align: center;
  85. }
  86. .calendar .calendar-body {
  87. color: #66758c;
  88. }
  89. .calendar .calendar-date {
  90. border: 0;
  91. padding: .2rem;
  92. }
  93. .calendar .calendar-date .date-item {
  94. -webkit-appearance: none;
  95. -moz-appearance: none;
  96. appearance: none;
  97. background: transparent;
  98. border: .05rem solid transparent;
  99. border-radius: 50%;
  100. color: #66758c;
  101. cursor: pointer;
  102. font-size: .7rem;
  103. height: 1.4rem;
  104. line-height: 1rem;
  105. outline: none;
  106. padding: .1rem;
  107. position: relative;
  108. text-align: center;
  109. text-decoration: none;
  110. transition: background .2s, border .2s, box-shadow .2s, color .2s;
  111. vertical-align: middle;
  112. white-space: nowrap;
  113. width: 1.4rem;
  114. }
  115. .calendar .calendar-date .date-item.date-today {
  116. border-color: #e5e5f9;
  117. color: #5755d9;
  118. }
  119. .calendar .calendar-date .date-item:focus {
  120. box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
  121. }
  122. .calendar .calendar-date .date-item:focus,
  123. .calendar .calendar-date .date-item:hover {
  124. background: #fefeff;
  125. border-color: #e5e5f9;
  126. color: #5755d9;
  127. text-decoration: none;
  128. }
  129. .calendar .calendar-date .date-item:active,
  130. .calendar .calendar-date .date-item.active {
  131. background: #4b48d6;
  132. border-color: #3634d2;
  133. color: #fff;
  134. }
  135. .calendar .calendar-date .date-item.badge::after {
  136. position: absolute;
  137. right: 3px;
  138. top: 3px;
  139. transform: translate(50%, -50%);
  140. }
  141. .calendar .calendar-date .date-item:disabled,
  142. .calendar .calendar-date .date-item.disabled,
  143. .calendar .calendar-date .calendar-event:disabled,
  144. .calendar .calendar-date .calendar-event.disabled {
  145. cursor: default;
  146. opacity: .25;
  147. pointer-events: none;
  148. }
  149. .calendar .calendar-date.prev-month .date-item,
  150. .calendar .calendar-date.prev-month .calendar-event,
  151. .calendar .calendar-date.next-month .date-item,
  152. .calendar .calendar-date.next-month .calendar-event {
  153. opacity: .25;
  154. }
  155. .calendar .calendar-range {
  156. position: relative;
  157. }
  158. .calendar .calendar-range::before {
  159. background: #f1f1fc;
  160. content: "";
  161. height: 1.4rem;
  162. left: 0;
  163. position: absolute;
  164. right: 0;
  165. top: 50%;
  166. transform: translateY(-50%);
  167. }
  168. .calendar .calendar-range.range-start::before {
  169. left: 50%;
  170. }
  171. .calendar .calendar-range.range-end::before {
  172. right: 50%;
  173. }
  174. .calendar .calendar-range.range-start .date-item,
  175. .calendar .calendar-range.range-end .date-item {
  176. background: #4b48d6;
  177. border-color: #3634d2;
  178. color: #fff;
  179. }
  180. .calendar .calendar-range .date-item {
  181. color: #5755d9;
  182. }
  183. .calendar.calendar-lg .calendar-body {
  184. padding: 0;
  185. }
  186. .calendar.calendar-lg .calendar-body .calendar-date {
  187. border-bottom: .05rem solid #dadee4;
  188. border-right: .05rem solid #dadee4;
  189. display: -ms-flexbox;
  190. display: flex;
  191. -ms-flex-direction: column;
  192. flex-direction: column;
  193. height: 5.5rem;
  194. padding: 0;
  195. }
  196. .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
  197. border-right: 0;
  198. }
  199. .calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
  200. border-bottom: 0;
  201. }
  202. .calendar.calendar-lg .date-item {
  203. align-self: flex-end;
  204. -ms-flex-item-align: end;
  205. height: 1.4rem;
  206. margin-right: .2rem;
  207. margin-top: .2rem;
  208. }
  209. .calendar.calendar-lg .calendar-range::before {
  210. top: 19px;
  211. }
  212. .calendar.calendar-lg .calendar-range.range-start::before {
  213. left: auto;
  214. width: 19px;
  215. }
  216. .calendar.calendar-lg .calendar-range.range-end::before {
  217. right: 19px;
  218. }
  219. .calendar.calendar-lg .calendar-events {
  220. flex-grow: 1;
  221. -ms-flex-positive: 1;
  222. line-height: 1;
  223. overflow-y: auto;
  224. padding: .2rem;
  225. }
  226. .calendar.calendar-lg .calendar-event {
  227. border-radius: .1rem;
  228. display: block;
  229. font-size: .7rem;
  230. margin: .1rem auto;
  231. overflow: hidden;
  232. padding: 3px 4px;
  233. text-overflow: ellipsis;
  234. white-space: nowrap;
  235. }
  236. .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
  237. .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
  238. .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
  239. .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4),
  240. .carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-container .carousel-item:nth-of-type(5),
  241. .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-container .carousel-item:nth-of-type(6),
  242. .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-container .carousel-item:nth-of-type(7),
  243. .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-container .carousel-item:nth-of-type(8) {
  244. animation: carousel-slidein .75s ease-in-out 1;
  245. opacity: 1;
  246. z-index: 100;
  247. }
  248. .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
  249. .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
  250. .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
  251. .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4),
  252. .carousel .carousel-locator:nth-of-type(5):checked ~ .carousel-nav .nav-item:nth-of-type(5),
  253. .carousel .carousel-locator:nth-of-type(6):checked ~ .carousel-nav .nav-item:nth-of-type(6),
  254. .carousel .carousel-locator:nth-of-type(7):checked ~ .carousel-nav .nav-item:nth-of-type(7),
  255. .carousel .carousel-locator:nth-of-type(8):checked ~ .carousel-nav .nav-item:nth-of-type(8) {
  256. color: #f7f8f9;
  257. }
  258. .carousel {
  259. background: #f7f8f9;
  260. display: block;
  261. overflow: hidden;
  262. -webkit-overflow-scrolling: touch;
  263. position: relative;
  264. width: 100%;
  265. z-index: 1;
  266. }
  267. .carousel .carousel-container {
  268. height: 100%;
  269. left: 0;
  270. position: relative;
  271. }
  272. .carousel .carousel-container::before {
  273. content: "";
  274. display: block;
  275. padding-bottom: 56.25%;
  276. }
  277. .carousel .carousel-container .carousel-item {
  278. animation: carousel-slideout 1s ease-in-out 1;
  279. height: 100%;
  280. left: 0;
  281. margin: 0;
  282. opacity: 0;
  283. position: absolute;
  284. top: 0;
  285. width: 100%;
  286. }
  287. .carousel .carousel-container .carousel-item:hover .item-prev,
  288. .carousel .carousel-container .carousel-item:hover .item-next {
  289. opacity: 1;
  290. }
  291. .carousel .carousel-container .item-prev,
  292. .carousel .carousel-container .item-next {
  293. background: rgba(247, 248, 249, .25);
  294. border-color: rgba(247, 248, 249, .5);
  295. color: #f7f8f9;
  296. opacity: 0;
  297. position: absolute;
  298. top: 50%;
  299. transform: translateY(-50%);
  300. transition: all .4s;
  301. z-index: 100;
  302. }
  303. .carousel .carousel-container .item-prev {
  304. left: 1rem;
  305. }
  306. .carousel .carousel-container .item-next {
  307. right: 1rem;
  308. }
  309. .carousel .carousel-nav {
  310. bottom: .4rem;
  311. display: -ms-flexbox;
  312. display: flex;
  313. -ms-flex-pack: center;
  314. justify-content: center;
  315. left: 50%;
  316. position: absolute;
  317. transform: translateX(-50%);
  318. width: 10rem;
  319. z-index: 100;
  320. }
  321. .carousel .carousel-nav .nav-item {
  322. color: rgba(247, 248, 249, .5);
  323. display: block;
  324. -ms-flex: 1 0 auto;
  325. flex: 1 0 auto;
  326. height: 1.6rem;
  327. margin: .2rem;
  328. max-width: 2.5rem;
  329. position: relative;
  330. }
  331. .carousel .carousel-nav .nav-item::before {
  332. background: currentColor;
  333. content: "";
  334. display: block;
  335. height: .1rem;
  336. position: absolute;
  337. top: .5rem;
  338. width: 100%;
  339. }
  340. @keyframes carousel-slidein {
  341. 0% {
  342. transform: translateX(100%);
  343. }
  344. 100% {
  345. transform: translateX(0);
  346. }
  347. }
  348. @keyframes carousel-slideout {
  349. 0% {
  350. opacity: 1;
  351. transform: translateX(0);
  352. }
  353. 100% {
  354. opacity: 1;
  355. transform: translateX(-50%);
  356. }
  357. }
  358. .comparison-slider {
  359. height: 50vh;
  360. overflow: hidden;
  361. -webkit-overflow-scrolling: touch;
  362. position: relative;
  363. width: 100%;
  364. }
  365. .comparison-slider .comparison-before,
  366. .comparison-slider .comparison-after {
  367. height: 100%;
  368. left: 0;
  369. margin: 0;
  370. overflow: hidden;
  371. position: absolute;
  372. top: 0;
  373. }
  374. .comparison-slider .comparison-before img,
  375. .comparison-slider .comparison-after img {
  376. height: 100%;
  377. object-fit: cover;
  378. object-position: left center;
  379. position: absolute;
  380. width: 100%;
  381. }
  382. .comparison-slider .comparison-before {
  383. width: 100%;
  384. z-index: 1;
  385. }
  386. .comparison-slider .comparison-before .comparison-label {
  387. right: .8rem;
  388. }
  389. .comparison-slider .comparison-after {
  390. max-width: 100%;
  391. min-width: 0;
  392. z-index: 2;
  393. }
  394. .comparison-slider .comparison-after::before {
  395. background: transparent;
  396. content: "";
  397. cursor: default;
  398. height: 100%;
  399. left: 0;
  400. position: absolute;
  401. right: .8rem;
  402. top: 0;
  403. z-index: 1;
  404. }
  405. .comparison-slider .comparison-after::after {
  406. background: currentColor;
  407. border-radius: 50%;
  408. box-shadow: 0 -5px, 0 5px;
  409. color: #fff;
  410. content: "";
  411. height: 3px;
  412. pointer-events: none;
  413. position: absolute;
  414. right: .4rem;
  415. top: 50%;
  416. transform: translate(50%, -50%);
  417. width: 3px;
  418. }
  419. .comparison-slider .comparison-after .comparison-label {
  420. left: .8rem;
  421. }
  422. .comparison-slider .comparison-resizer {
  423. animation: first-run 1.5s 1 ease-in-out;
  424. cursor: ew-resize;
  425. height: .8rem;
  426. left: 0;
  427. max-width: 100%;
  428. min-width: .8rem;
  429. opacity: 0;
  430. outline: none;
  431. position: relative;
  432. resize: horizontal;
  433. top: 50%;
  434. transform: translateY(-50%) scaleY(30);
  435. width: 0;
  436. }
  437. .comparison-slider .comparison-label {
  438. background: rgba(48, 55, 66, .5);
  439. bottom: .8rem;
  440. color: #fff;
  441. padding: .2rem .4rem;
  442. position: absolute;
  443. -webkit-user-select: none;
  444. -moz-user-select: none;
  445. -ms-user-select: none;
  446. user-select: none;
  447. }
  448. @keyframes first-run {
  449. 0% {
  450. width: 0;
  451. }
  452. 25% {
  453. width: 2.4rem;
  454. }
  455. 50% {
  456. width: .8rem;
  457. }
  458. 75% {
  459. width: 1.2rem;
  460. }
  461. 100% {
  462. width: 0;
  463. }
  464. }
  465. .filter .filter-tag#tag-0:checked ~ .filter-nav .chip[for="tag-0"],
  466. .filter .filter-tag#tag-1:checked ~ .filter-nav .chip[for="tag-1"],
  467. .filter .filter-tag#tag-2:checked ~ .filter-nav .chip[for="tag-2"],
  468. .filter .filter-tag#tag-3:checked ~ .filter-nav .chip[for="tag-3"],
  469. .filter .filter-tag#tag-4:checked ~ .filter-nav .chip[for="tag-4"],
  470. .filter .filter-tag#tag-5:checked ~ .filter-nav .chip[for="tag-5"],
  471. .filter .filter-tag#tag-6:checked ~ .filter-nav .chip[for="tag-6"],
  472. .filter .filter-tag#tag-7:checked ~ .filter-nav .chip[for="tag-7"],
  473. .filter .filter-tag#tag-8:checked ~ .filter-nav .chip[for="tag-8"] {
  474. background: #5755d9;
  475. color: #fff;
  476. }
  477. .filter .filter-tag#tag-1:checked ~ .filter-body .filter-item:not([data-tag~="tag-1"]),
  478. .filter .filter-tag#tag-2:checked ~ .filter-body .filter-item:not([data-tag~="tag-2"]),
  479. .filter .filter-tag#tag-3:checked ~ .filter-body .filter-item:not([data-tag~="tag-3"]),
  480. .filter .filter-tag#tag-4:checked ~ .filter-body .filter-item:not([data-tag~="tag-4"]),
  481. .filter .filter-tag#tag-5:checked ~ .filter-body .filter-item:not([data-tag~="tag-5"]),
  482. .filter .filter-tag#tag-6:checked ~ .filter-body .filter-item:not([data-tag~="tag-6"]),
  483. .filter .filter-tag#tag-7:checked ~ .filter-body .filter-item:not([data-tag~="tag-7"]),
  484. .filter .filter-tag#tag-8:checked ~ .filter-body .filter-item:not([data-tag~="tag-8"]) {
  485. display: none;
  486. }
  487. .filter .filter-nav {
  488. margin: .4rem 0;
  489. }
  490. .filter .filter-body {
  491. display: -ms-flexbox;
  492. display: flex;
  493. -ms-flex-wrap: wrap;
  494. flex-wrap: wrap;
  495. }
  496. .meter {
  497. -webkit-appearance: none;
  498. -moz-appearance: none;
  499. appearance: none;
  500. background: #f7f8f9;
  501. border: 0;
  502. border-radius: .1rem;
  503. display: block;
  504. height: .8rem;
  505. width: 100%;
  506. }
  507. .meter::-webkit-meter-inner-element {
  508. display: block;
  509. }
  510. .meter::-webkit-meter-bar,
  511. .meter::-webkit-meter-optimum-value,
  512. .meter::-webkit-meter-suboptimum-value,
  513. .meter::-webkit-meter-even-less-good-value {
  514. border-radius: .1rem;
  515. }
  516. .meter::-webkit-meter-bar {
  517. background: #f7f8f9;
  518. }
  519. .meter::-webkit-meter-optimum-value {
  520. background: #32b643;
  521. }
  522. .meter::-webkit-meter-suboptimum-value {
  523. background: #ffb700;
  524. }
  525. .meter::-webkit-meter-even-less-good-value {
  526. background: #e85600;
  527. }
  528. .meter::-moz-meter-bar,
  529. .meter:-moz-meter-optimum,
  530. .meter:-moz-meter-sub-optimum,
  531. .meter:-moz-meter-sub-sub-optimum {
  532. border-radius: .1rem;
  533. }
  534. .meter:-moz-meter-optimum::-moz-meter-bar {
  535. background: #32b643;
  536. }
  537. .meter:-moz-meter-sub-optimum::-moz-meter-bar {
  538. background: #ffb700;
  539. }
  540. .meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  541. background: #e85600;
  542. }
  543. .off-canvas {
  544. display: -ms-flexbox;
  545. display: flex;
  546. -ms-flex-flow: nowrap;
  547. flex-flow: nowrap;
  548. height: 100%;
  549. position: relative;
  550. width: 100%;
  551. }
  552. .off-canvas .off-canvas-toggle {
  553. display: block;
  554. left: .4rem;
  555. position: absolute;
  556. top: .4rem;
  557. transition: none;
  558. z-index: 1;
  559. }
  560. .off-canvas .off-canvas-sidebar {
  561. background: #f7f8f9;
  562. bottom: 0;
  563. left: 0;
  564. min-width: 10rem;
  565. overflow-y: auto;
  566. position: fixed;
  567. top: 0;
  568. transform: translateX(-100%);
  569. transition: transform .25s;
  570. z-index: 200;
  571. }
  572. .off-canvas .off-canvas-content {
  573. -ms-flex: 1 1 auto;
  574. flex: 1 1 auto;
  575. height: 100%;
  576. padding: .4rem .4rem .4rem 4rem;
  577. }
  578. .off-canvas .off-canvas-overlay {
  579. background: rgba(48, 55, 66, .1);
  580. border-color: transparent;
  581. border-radius: 0;
  582. bottom: 0;
  583. display: none;
  584. height: 100%;
  585. left: 0;
  586. position: fixed;
  587. right: 0;
  588. top: 0;
  589. width: 100%;
  590. }
  591. .off-canvas .off-canvas-sidebar:target,
  592. .off-canvas .off-canvas-sidebar.active {
  593. transform: translateX(0);
  594. }
  595. .off-canvas .off-canvas-sidebar:target ~ .off-canvas-overlay,
  596. .off-canvas .off-canvas-sidebar.active ~ .off-canvas-overlay {
  597. display: block;
  598. z-index: 100;
  599. }
  600. @media (min-width: 960px) {
  601. .off-canvas.off-canvas-sidebar-show .off-canvas-toggle {
  602. display: none;
  603. }
  604. .off-canvas.off-canvas-sidebar-show .off-canvas-sidebar {
  605. -ms-flex: 0 0 auto;
  606. flex: 0 0 auto;
  607. position: relative;
  608. transform: none;
  609. }
  610. .off-canvas.off-canvas-sidebar-show .off-canvas-overlay {
  611. display: none !important;
  612. }
  613. }
  614. .parallax {
  615. display: block;
  616. height: auto;
  617. position: relative;
  618. width: auto;
  619. }
  620. .parallax .parallax-content {
  621. box-shadow: 0 1rem 2.1rem rgba(48, 55, 66, .3);
  622. height: auto;
  623. transform: perspective(1000px);
  624. transform-style: preserve-3d;
  625. transition: all .4s ease;
  626. width: 100%;
  627. }
  628. .parallax .parallax-content::before {
  629. content: "";
  630. display: block;
  631. height: 100%;
  632. left: 0;
  633. position: absolute;
  634. top: 0;
  635. width: 100%;
  636. }
  637. .parallax .parallax-front {
  638. align-items: center;
  639. color: #fff;
  640. display: -ms-flexbox;
  641. display: flex;
  642. -ms-flex-align: center;
  643. -ms-flex-pack: center;
  644. height: 100%;
  645. justify-content: center;
  646. left: 0;
  647. position: absolute;
  648. text-align: center;
  649. text-shadow: 0 0 20px rgba(48, 55, 66, .75);
  650. top: 0;
  651. transform: translateZ(50px) scale(.95);
  652. transition: transform .4s;
  653. width: 100%;
  654. z-index: 1;
  655. }
  656. .parallax .parallax-top-left {
  657. height: 50%;
  658. left: 0;
  659. outline: none;
  660. position: absolute;
  661. top: 0;
  662. width: 50%;
  663. z-index: 100;
  664. }
  665. .parallax .parallax-top-left:focus ~ .parallax-content,
  666. .parallax .parallax-top-left:hover ~ .parallax-content {
  667. transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
  668. }
  669. .parallax .parallax-top-left:focus ~ .parallax-content::before,
  670. .parallax .parallax-top-left:hover ~ .parallax-content::before {
  671. background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
  672. }
  673. .parallax .parallax-top-left:focus ~ .parallax-content .parallax-front,
  674. .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
  675. transform: translate3d(4.5px, 4.5px, 50px) scale(.95);
  676. }
  677. .parallax .parallax-top-right {
  678. height: 50%;
  679. outline: none;
  680. position: absolute;
  681. right: 0;
  682. top: 0;
  683. width: 50%;
  684. z-index: 100;
  685. }
  686. .parallax .parallax-top-right:focus ~ .parallax-content,
  687. .parallax .parallax-top-right:hover ~ .parallax-content {
  688. transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
  689. }
  690. .parallax .parallax-top-right:focus ~ .parallax-content::before,
  691. .parallax .parallax-top-right:hover ~ .parallax-content::before {
  692. background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
  693. }
  694. .parallax .parallax-top-right:focus ~ .parallax-content .parallax-front,
  695. .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
  696. transform: translate3d(-4.5px, 4.5px, 50px) scale(.95);
  697. }
  698. .parallax .parallax-bottom-left {
  699. bottom: 0;
  700. height: 50%;
  701. left: 0;
  702. outline: none;
  703. position: absolute;
  704. width: 50%;
  705. z-index: 100;
  706. }
  707. .parallax .parallax-bottom-left:focus ~ .parallax-content,
  708. .parallax .parallax-bottom-left:hover ~ .parallax-content {
  709. transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
  710. }
  711. .parallax .parallax-bottom-left:focus ~ .parallax-content::before,
  712. .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
  713. background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
  714. }
  715. .parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front,
  716. .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
  717. transform: translate3d(4.5px, -4.5px, 50px) scale(.95);
  718. }
  719. .parallax .parallax-bottom-right {
  720. bottom: 0;
  721. height: 50%;
  722. outline: none;
  723. position: absolute;
  724. right: 0;
  725. width: 50%;
  726. z-index: 100;
  727. }
  728. .parallax .parallax-bottom-right:focus ~ .parallax-content,
  729. .parallax .parallax-bottom-right:hover ~ .parallax-content {
  730. transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
  731. }
  732. .parallax .parallax-bottom-right:focus ~ .parallax-content::before,
  733. .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
  734. background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
  735. }
  736. .parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front,
  737. .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
  738. transform: translate3d(-4.5px, -4.5px, 50px) scale(.95);
  739. }
  740. .progress {
  741. -webkit-appearance: none;
  742. -moz-appearance: none;
  743. appearance: none;
  744. background: #eef0f3;
  745. border: 0;
  746. border-radius: .1rem;
  747. color: #5755d9;
  748. height: .2rem;
  749. position: relative;
  750. width: 100%;
  751. }
  752. .progress::-webkit-progress-bar {
  753. background: transparent;
  754. border-radius: .1rem;
  755. }
  756. .progress::-webkit-progress-value {
  757. background: #5755d9;
  758. border-radius: .1rem;
  759. }
  760. .progress::-moz-progress-bar {
  761. background: #5755d9;
  762. border-radius: .1rem;
  763. }
  764. .progress:indeterminate {
  765. animation: progress-indeterminate 1.5s linear infinite;
  766. background: #eef0f3 linear-gradient(to right, #5755d9 30%, #eef0f3 30%) top left/150% 150% no-repeat;
  767. }
  768. .progress:indeterminate::-moz-progress-bar {
  769. background: transparent;
  770. }
  771. @keyframes progress-indeterminate {
  772. 0% {
  773. background-position: 200% 0;
  774. }
  775. 100% {
  776. background-position: -200% 0;
  777. }
  778. }
  779. .slider {
  780. -webkit-appearance: none;
  781. -moz-appearance: none;
  782. appearance: none;
  783. background: transparent;
  784. display: block;
  785. height: 1.2rem;
  786. width: 100%;
  787. }
  788. .slider:focus {
  789. box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
  790. outline: none;
  791. }
  792. .slider.tooltip:not([data-tooltip])::after {
  793. content: attr(value);
  794. }
  795. .slider::-webkit-slider-thumb {
  796. -webkit-appearance: none;
  797. background: #5755d9;
  798. border: 0;
  799. border-radius: 50%;
  800. height: .6rem;
  801. margin-top: -.25rem;
  802. -webkit-transition: transform .2s;
  803. transition: transform .2s;
  804. width: .6rem;
  805. }
  806. .slider::-moz-range-thumb {
  807. background: #5755d9;
  808. border: 0;
  809. border-radius: 50%;
  810. height: .6rem;
  811. -moz-transition: transform .2s;
  812. transition: transform .2s;
  813. width: .6rem;
  814. }
  815. .slider::-ms-thumb {
  816. background: #5755d9;
  817. border: 0;
  818. border-radius: 50%;
  819. height: .6rem;
  820. -ms-transition: transform .2s;
  821. transition: transform .2s;
  822. width: .6rem;
  823. }
  824. .slider:active::-webkit-slider-thumb {
  825. transform: scale(1.25);
  826. }
  827. .slider:active::-moz-range-thumb {
  828. transform: scale(1.25);
  829. }
  830. .slider:active::-ms-thumb {
  831. transform: scale(1.25);
  832. }
  833. .slider:disabled::-webkit-slider-thumb,
  834. .slider.disabled::-webkit-slider-thumb {
  835. background: #f7f8f9;
  836. transform: scale(1);
  837. }
  838. .slider:disabled::-moz-range-thumb,
  839. .slider.disabled::-moz-range-thumb {
  840. background: #f7f8f9;
  841. transform: scale(1);
  842. }
  843. .slider:disabled::-ms-thumb,
  844. .slider.disabled::-ms-thumb {
  845. background: #f7f8f9;
  846. transform: scale(1);
  847. }
  848. .slider::-webkit-slider-runnable-track {
  849. background: #eef0f3;
  850. border-radius: .1rem;
  851. height: .1rem;
  852. width: 100%;
  853. }
  854. .slider::-moz-range-track {
  855. background: #eef0f3;
  856. border-radius: .1rem;
  857. height: .1rem;
  858. width: 100%;
  859. }
  860. .slider::-ms-track {
  861. background: #eef0f3;
  862. border-radius: .1rem;
  863. height: .1rem;
  864. width: 100%;
  865. }
  866. .slider::-ms-fill-lower {
  867. background: #5755d9;
  868. }
  869. .timeline .timeline-item {
  870. display: -ms-flexbox;
  871. display: flex;
  872. margin-bottom: 1.2rem;
  873. position: relative;
  874. }
  875. .timeline .timeline-item::before {
  876. background: #dadee4;
  877. content: "";
  878. height: 100%;
  879. left: 11px;
  880. position: absolute;
  881. top: 1.2rem;
  882. width: 2px;
  883. }
  884. .timeline .timeline-item .timeline-left {
  885. -ms-flex: 0 0 auto;
  886. flex: 0 0 auto;
  887. }
  888. .timeline .timeline-item .timeline-content {
  889. -ms-flex: 1 1 auto;
  890. flex: 1 1 auto;
  891. padding: 2px 0 2px .8rem;
  892. }
  893. .timeline .timeline-item .timeline-icon {
  894. align-items: center;
  895. border-radius: 50%;
  896. color: #fff;
  897. display: -ms-flexbox;
  898. display: flex;
  899. -ms-flex-align: center;
  900. -ms-flex-pack: center;
  901. height: 1.2rem;
  902. justify-content: center;
  903. text-align: center;
  904. width: 1.2rem;
  905. }
  906. .timeline .timeline-item .timeline-icon::before {
  907. border: .1rem solid #5755d9;
  908. border-radius: 50%;
  909. content: "";
  910. display: block;
  911. height: .4rem;
  912. left: .4rem;
  913. position: absolute;
  914. top: .4rem;
  915. width: .4rem;
  916. }
  917. .timeline .timeline-item .timeline-icon.icon-lg {
  918. background: #5755d9;
  919. line-height: 1.2rem;
  920. }
  921. .timeline .timeline-item .timeline-icon.icon-lg::before {
  922. content: none;
  923. }
  924. .viewer-360 {
  925. align-items: center;
  926. display: -ms-flexbox;
  927. display: flex;
  928. -ms-flex-align: center;
  929. -ms-flex-direction: column;
  930. flex-direction: column;
  931. }
  932. .viewer-360 .viewer-slider[max="36"][value="1"] + .viewer-image {
  933. background-position-y: 0;
  934. }
  935. .viewer-360 .viewer-slider[max="36"][value="2"] + .viewer-image {
  936. background-position-y: 2.8571428571%;
  937. }
  938. .viewer-360 .viewer-slider[max="36"][value="3"] + .viewer-image {
  939. background-position-y: 5.7142857143%;
  940. }
  941. .viewer-360 .viewer-slider[max="36"][value="4"] + .viewer-image {
  942. background-position-y: 8.5714285714%;
  943. }
  944. .viewer-360 .viewer-slider[max="36"][value="5"] + .viewer-image {
  945. background-position-y: 11.4285714286%;
  946. }
  947. .viewer-360 .viewer-slider[max="36"][value="6"] + .viewer-image {
  948. background-position-y: 14.2857142857%;
  949. }
  950. .viewer-360 .viewer-slider[max="36"][value="7"] + .viewer-image {
  951. background-position-y: 17.1428571429%;
  952. }
  953. .viewer-360 .viewer-slider[max="36"][value="8"] + .viewer-image {
  954. background-position-y: 20%;
  955. }
  956. .viewer-360 .viewer-slider[max="36"][value="9"] + .viewer-image {
  957. background-position-y: 22.8571428571%;
  958. }
  959. .viewer-360 .viewer-slider[max="36"][value="10"] + .viewer-image {
  960. background-position-y: 25.7142857143%;
  961. }
  962. .viewer-360 .viewer-slider[max="36"][value="11"] + .viewer-image {
  963. background-position-y: 28.5714285714%;
  964. }
  965. .viewer-360 .viewer-slider[max="36"][value="12"] + .viewer-image {
  966. background-position-y: 31.4285714286%;
  967. }
  968. .viewer-360 .viewer-slider[max="36"][value="13"] + .viewer-image {
  969. background-position-y: 34.2857142857%;
  970. }
  971. .viewer-360 .viewer-slider[max="36"][value="14"] + .viewer-image {
  972. background-position-y: 37.1428571429%;
  973. }
  974. .viewer-360 .viewer-slider[max="36"][value="15"] + .viewer-image {
  975. background-position-y: 40%;
  976. }
  977. .viewer-360 .viewer-slider[max="36"][value="16"] + .viewer-image {
  978. background-position-y: 42.8571428571%;
  979. }
  980. .viewer-360 .viewer-slider[max="36"][value="17"] + .viewer-image {
  981. background-position-y: 45.7142857143%;
  982. }
  983. .viewer-360 .viewer-slider[max="36"][value="18"] + .viewer-image {
  984. background-position-y: 48.5714285714%;
  985. }
  986. .viewer-360 .viewer-slider[max="36"][value="19"] + .viewer-image {
  987. background-position-y: 51.4285714286%;
  988. }
  989. .viewer-360 .viewer-slider[max="36"][value="20"] + .viewer-image {
  990. background-position-y: 54.2857142857%;
  991. }
  992. .viewer-360 .viewer-slider[max="36"][value="21"] + .viewer-image {
  993. background-position-y: 57.1428571429%;
  994. }
  995. .viewer-360 .viewer-slider[max="36"][value="22"] + .viewer-image {
  996. background-position-y: 60%;
  997. }
  998. .viewer-360 .viewer-slider[max="36"][value="23"] + .viewer-image {
  999. background-position-y: 62.8571428571%;
  1000. }
  1001. .viewer-360 .viewer-slider[max="36"][value="24"] + .viewer-image {
  1002. background-position-y: 65.7142857143%;
  1003. }
  1004. .viewer-360 .viewer-slider[max="36"][value="25"] + .viewer-image {
  1005. background-position-y: 68.5714285714%;
  1006. }
  1007. .viewer-360 .viewer-slider[max="36"][value="26"] + .viewer-image {
  1008. background-position-y: 71.4285714286%;
  1009. }
  1010. .viewer-360 .viewer-slider[max="36"][value="27"] + .viewer-image {
  1011. background-position-y: 74.2857142857%;
  1012. }
  1013. .viewer-360 .viewer-slider[max="36"][value="28"] + .viewer-image {
  1014. background-position-y: 77.1428571429%;
  1015. }
  1016. .viewer-360 .viewer-slider[max="36"][value="29"] + .viewer-image {
  1017. background-position-y: 80%;
  1018. }
  1019. .viewer-360 .viewer-slider[max="36"][value="30"] + .viewer-image {
  1020. background-position-y: 82.8571428571%;
  1021. }
  1022. .viewer-360 .viewer-slider[max="36"][value="31"] + .viewer-image {
  1023. background-position-y: 85.7142857143%;
  1024. }
  1025. .viewer-360 .viewer-slider[max="36"][value="32"] + .viewer-image {
  1026. background-position-y: 88.5714285714%;
  1027. }
  1028. .viewer-360 .viewer-slider[max="36"][value="33"] + .viewer-image {
  1029. background-position-y: 91.4285714286%;
  1030. }
  1031. .viewer-360 .viewer-slider[max="36"][value="34"] + .viewer-image {
  1032. background-position-y: 94.2857142857%;
  1033. }
  1034. .viewer-360 .viewer-slider[max="36"][value="35"] + .viewer-image {
  1035. background-position-y: 97.1428571429%;
  1036. }
  1037. .viewer-360 .viewer-slider[max="36"][value="36"] + .viewer-image {
  1038. background-position-y: 100%;
  1039. }
  1040. .viewer-360 .viewer-slider {
  1041. cursor: ew-resize;
  1042. -ms-flex-order: 2;
  1043. margin: 1rem;
  1044. order: 2;
  1045. width: 60%;
  1046. }
  1047. .viewer-360 .viewer-image {
  1048. background-position-y: 0;
  1049. background-repeat: no-repeat;
  1050. background-size: 100%;
  1051. -ms-flex-order: 1;
  1052. max-width: 100%;
  1053. order: 1;
  1054. }