API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 19th, 2018
216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.41 KB | None | 0 0
raw download clone embed print report
  1. p {
  2. margin-bottom: 8px;
  3. font-family: 'Open Sans', sans-serif;
  4. font-size: 18px;
  5. line-height: 150%;
  6. font-weight: 300;
  7. }
  8.  
  9. strong {
  10. font-weight: 700;
  11. letter-spacing: -0.2px;
  12. }
  13.  
  14. .header {
  15. position: relative;
  16. z-index: 2;
  17. height: 95vh;
  18. min-height: 560px;
  19. background-color: #0096ff;
  20. background-image: -webkit-linear-gradient(180deg, rgba(0, 0, 0, .3), hsla(0, 0%, 100%, 0)), url('../images/hero-bg-a.png');
  21. background-image: linear-gradient(270deg, rgba(0, 0, 0, .3), hsla(0, 0%, 100%, 0)), url('../images/hero-bg-a.png');
  22. background-position: 0px 0px, 50% 50%;
  23. background-size: auto, cover;
  24. background-repeat: repeat, no-repeat;
  25. background-attachment: scroll, fixed;
  26. }
  27.  
  28. .logo-sympla {
  29. position: relative;
  30. display: block;
  31. width: 64px;
  32. height: 64px;
  33. margin-right: 16px;
  34. padding-top: 0px;
  35. padding-bottom: 0px;
  36. float: left;
  37. background-image: url('../images/logo-sympla-nav.svg');
  38. background-position: 50% 50%;
  39. background-size: 99%;
  40. background-repeat: no-repeat;
  41. }
  42.  
  43. .logo-sympla.hero {
  44. position: absolute;
  45. left: 40px;
  46. top: 40px;
  47. z-index: 3;
  48. display: block;
  49. width: 10.5vw;
  50. height: 10.5vw;
  51. float: none;
  52. background-image: url('../images/logo-sympla-hero.svg');
  53. background-size: 99%;
  54. }
  55.  
  56. .body {
  57. min-height: 100%;
  58. font-family: Raleway, sans-serif;
  59. -webkit-font-smoothing: antialiased;
  60. text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  61. }
  62.  
  63. .content-wrapper {
  64. position: relative;
  65. z-index: 1;
  66. display: block;
  67. width: 100%;
  68. max-width: 1280px;
  69. margin-right: auto;
  70. margin-left: auto;
  71. }
  72.  
  73. .content-wrapper.cta {
  74. text-align: center;
  75. }
  76.  
  77. .content-wrapper.about {
  78. max-width: 670px;
  79. }
  80.  
  81. .content-wrapper.timeline {
  82. max-width: 1280px;
  83. }
  84.  
  85. .content-wrapper.numbers {
  86. max-width: 1280px;
  87. margin-bottom: 80px;
  88. }
  89.  
  90. .content-wrapper.numbers-intro {
  91. margin-bottom: 100px;
  92. text-align: center;
  93. }
  94.  
  95. .content-wrapper.cta-numbers {
  96. text-align: center;
  97. }
  98.  
  99. .btn {
  100. display: inline-block;
  101. margin-bottom: 16px;
  102. padding: 12px 48px;
  103. border: 1px solid #0096ff;
  104. border-radius: 50px;
  105. background-color: transparent;
  106. -webkit-transition: all 500ms ease;
  107. transition: all 500ms ease;
  108. font-family: 'Open Sans', sans-serif;
  109. color: #0096ff;
  110. font-size: 14px;
  111. line-height: 24px;
  112. font-weight: 800;
  113. letter-spacing: 1px;
  114. text-decoration: none;
  115. text-transform: uppercase;
  116. }
  117.  
  118. .btn:hover {
  119. border-color: #0096ff;
  120. background-color: #0096ff;
  121. box-shadow: 0 14px 30px -10px #0096ff;
  122. color: #fff;
  123. }
  124.  
  125. .btn.main-cta {
  126. margin-bottom: 0px;
  127. padding: 8px 32px;
  128. border-style: none;
  129. border-color: hsla(0, 0%, 100%, 0);
  130. background-color: #fca700;
  131. box-shadow: 0 10px 30px -14px #fca700;
  132. color: #fff;
  133. font-size: 12px;
  134. }
  135.  
  136. .btn.main-cta:hover {
  137. background-color: #ffc700;
  138. box-shadow: 0 10px 30px -14px #ffc700;
  139. text-shadow: 0 1px 0 rgba(0, 0, 0, .33);
  140. }
  141.  
  142. .btn.small {
  143. display: none;
  144. margin-bottom: 8px;
  145. padding: 4px 24px;
  146. font-size: 11px;
  147. font-weight: 700;
  148. }
  149.  
  150. .tools-icon {
  151. display: block;
  152. width: 72px;
  153. height: 72px;
  154. margin-right: auto;
  155. margin-left: auto;
  156. }
  157.  
  158. .section-title {
  159. margin-top: 16px;
  160. margin-bottom: 32px;
  161. color: #0096ff;
  162. font-size: 72px;
  163. line-height: 120%;
  164. font-weight: 100;
  165. text-align: center;
  166. }
  167.  
  168. .section-title.cta {
  169. color: #fff;
  170. letter-spacing: -1px;
  171. }
  172.  
  173. .section-title.numbers {
  174. margin-bottom: 40px;
  175. font-size: 72px;
  176. font-weight: 100;
  177. letter-spacing: -1px;
  178. }
  179.  
  180. .section-title.category {
  181. margin-bottom: 24px;
  182. color: #fff;
  183. font-size: 32px;
  184. font-weight: 200;
  185. letter-spacing: 0.4px;
  186. }
  187.  
  188. .slider-nav {
  189. left: 0px;
  190. top: 48px;
  191. right: 0px;
  192. bottom: auto;
  193. display: block;
  194. width: 64px;
  195. height: 64px;
  196. margin-bottom: 0px;
  197. padding-top: 22px;
  198. padding-bottom: 22px;
  199. border-style: solid;
  200. border-width: 1px;
  201. border-color: rgba(0, 0, 0, .15);
  202. border-radius: 50px;
  203. background-color: #fff;
  204. background-image: url('../images/example-bg.png');
  205. background-position: 50% 50%;
  206. background-size: 24px;
  207. background-repeat: no-repeat;
  208. box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .2);
  209. -webkit-transition: background-color 300ms ease;
  210. transition: background-color 300ms ease;
  211. font-family: 'Open Sans', sans-serif;
  212. color: #19bbf5;
  213. font-size: 14px;
  214. font-weight: 700;
  215. text-align: left;
  216. text-transform: uppercase;
  217. }
  218.  
  219. .slider-nav:hover {
  220. background-color: #f6f6f6;
  221. }
  222.  
  223. .slider-nav.solution-right {
  224. left: auto;
  225. right: 6%;
  226. bottom: auto;
  227. width: 80px;
  228. height: 80px;
  229. margin-right: -40px;
  230. border-radius: 50px;
  231. background-image: url('../images/pointer-right.svg');
  232. }
  233.  
  234. .slider-nav.solution-right.timeline {
  235. top: 98px;
  236. }
  237.  
  238. .slider-nav.solution-left {
  239. left: 6%;
  240. right: auto;
  241. width: 80px;
  242. height: 80px;
  243. margin-left: -40px;
  244. border-style: solid;
  245. border-radius: 50px;
  246. background-image: url('../images/pointer-left.svg');
  247. }
  248.  
  249. .slider-nav.solution-left.timeline {
  250. top: 98px;
  251. }
  252.  
  253. .slider-nav.category-left {
  254. left: 0px;
  255. top: 16px;
  256. right: auto;
  257. bottom: auto;
  258. display: block;
  259. width: 64px;
  260. height: 72px;
  261. margin-right: auto;
  262. margin-left: auto;
  263. border-style: none;
  264. border-top-left-radius: 0px;
  265. border-bottom-left-radius: 0px;
  266. background-image: url('../images/pointer-left.svg');
  267. background-position: 12px 50%;
  268. }
  269.  
  270. .slider-nav.category-right {
  271. left: auto;
  272. top: 16px;
  273. right: 0px;
  274. bottom: auto;
  275. display: block;
  276. width: 64px;
  277. height: 72px;
  278. margin-right: auto;
  279. margin-left: auto;
  280. border-style: none;
  281. border-top-right-radius: 0px;
  282. border-bottom-right-radius: 0px;
  283. background-image: url('../images/pointer-right.svg');
  284. background-position: 70% 50%;
  285. }
  286.  
  287. .princing-content-title {
  288. margin-top: 8px;
  289. margin-bottom: 24px;
  290. font-size: 24px;
  291. line-height: 34px;
  292. }
  293.  
  294. .testimonial-author {
  295. margin-top: 0px;
  296. margin-bottom: 8px;
  297. padding-left: 64px;
  298. color: #000;
  299. font-size: 16px;
  300. text-align: left;
  301. }
  302.  
  303. .princing-footer-note {
  304. display: inline-block;
  305. padding-top: 2px;
  306. padding-bottom: 2px;
  307. border-top: 1px solid #d1d1d1;
  308. color: rgba(0, 0, 0, .5);
  309. font-size: 12px;
  310. font-weight: 500;
  311. letter-spacing: 0.3px;
  312. }
  313.  
  314. .quote-text {
  315. display: inline-block;
  316. max-width: 710px;
  317. margin-bottom: 0px;
  318. padding: 16px 56px 24px 64px;
  319. background-image: url('../images/icon-quote-01.svg'), url('../images/icon-quote-02.svg');
  320. background-position: 101% 100%, -2px -10px;
  321. background-size: 56px, 56px;
  322. background-repeat: no-repeat, no-repeat;
  323. color: rgba(0, 0, 0, .5);
  324. font-size: 16px;
  325. font-style: italic;
  326. font-weight: 400;
  327. text-align: left;
  328. }
  329.  
  330. .quote-text.highlight {
  331. font-size: 24px;
  332. line-height: 140%;
  333. }
  334.  
  335. .pricing-value {
  336. color: #0096ff;
  337. font-size: 130px;
  338. line-height: 80%;
  339. font-weight: 200;
  340. }
  341.  
  342. .price-symbol {
  343. font-size: 40px;
  344. }
  345.  
  346. .pricing-column {
  347. padding-right: 32px;
  348. padding-left: 32px;
  349. }
  350.  
  351. .princing-pro-symbol {
  352. margin-top: -8px;
  353. margin-bottom: 16px;
  354. }
  355.  
  356. .pricing-highlight-block {
  357. margin-bottom: 16px;
  358. padding: 40px 24px;
  359. border-style: solid;
  360. border-width: 1px;
  361. border-color: rgba(0, 0, 0, .15);
  362. border-radius: 20px;
  363. background-color: #fff;
  364. box-shadow: 0 0 0 0 rgba(0, 0, 0, .31);
  365. -webkit-transition: all 1000ms cubic-bezier(.19, 1, .22, 1);
  366. transition: all 1000ms cubic-bezier(.19, 1, .22, 1);
  367. }
  368.  
  369. .pricing-highlight-block:hover {
  370. box-shadow: 0 7px 36px -6px rgba(0, 0, 0, .2);
  371. }
  372.  
  373. .pricing-highlight-block.sympla-pro {
  374. padding-top: 16px;
  375. padding-bottom: 16px;
  376. }
  377.  
  378. .sympla-pro-column {
  379. padding-right: 48px;
  380. padding-left: 48px;
  381. }
  382.  
  383. .testimonial-slider {
  384. overflow: hidden;
  385. height: auto;
  386. background-color: transparent;
  387. }
  388.  
  389. .content-section {
  390. position: relative;
  391. z-index: 1;
  392. padding-top: 80px;
  393. padding-bottom: 96px;
  394. background-color: #fff;
  395. }
  396.  
  397. .content-section.pricing {
  398. background-color: #f0f0f0;
  399. text-align: center;
  400. }
  401.  
  402. .content-section.numbers {
  403. padding-top: 80px;
  404. padding-bottom: 96px;
  405. background-color: #fff;
  406. }
  407.  
  408. .content-section.timeline-solutions {
  409. padding-top: 80px;
  410. padding-bottom: 80px;
  411. }
  412.  
  413. .content-section.cta {
  414. padding-top: 9vw;
  415. padding-bottom: 9vw;
  416. background-color: rgba(0, 0, 0, .1);
  417. text-align: center;
  418. }
  419.  
  420. .content-section.support {
  421. padding-top: 80px;
  422. padding-bottom: 0px;
  423. background-color: #f0f0f0;
  424. }
  425.  
  426. .princing-text {
  427. margin-bottom: 24px;
  428. }
  429.  
  430. .main-nav {
  431. position: fixed;
  432. top: 0px;
  433. right: 0px;
  434. z-index: 10;
  435. padding: 8px 16px;
  436. float: right;
  437. border-bottom: 1px none hsla(0, 0%, 4%, .15);
  438. border-left: 1px none rgba(0, 0, 0, .15);
  439. border-bottom-left-radius: 30px;
  440. background-color: #fff;
  441. box-shadow: 5px 5px 37px 5px rgba(0, 0, 0, .12);
  442. }
  443.  
  444. .main-cta-wrapper {
  445. display: inline-block;
  446. padding-top: 14px;
  447. padding-bottom: 14px;
  448. float: right;
  449. }
  450.  
  451. .divider {
  452. position: relative;
  453. display: block;
  454. width: 1px;
  455. height: 64px;
  456. margin-right: 16px;
  457. padding-top: 0px;
  458. padding-bottom: 0px;
  459. float: right;
  460. background-color: rgba(0, 0, 0, .15);
  461. }
  462.  
  463. .about-number {
  464. margin-bottom: 8px;
  465. color: #0096ff;
  466. font-size: 62px;
  467. line-height: 100%;
  468. font-weight: 800;
  469. text-align: center;
  470. letter-spacing: -2px;
  471. text-transform: uppercase;
  472. }
  473.  
  474. .milion-text {
  475. font-size: 32px;
  476. line-height: 100%;
  477. font-weight: 800;
  478. letter-spacing: 1.5px;
  479. }
  480.  
  481. .footer-section {
  482. position: relative;
  483. display: block;
  484. background-color: #0096ff;
  485. background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), -webkit-linear-gradient(270deg, rgba(0, 150, 255, .2), rgba(0, 150, 255, .2)), url('../images/hero-bg-a-blur.png');
  486. background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), linear-gradient(180deg, rgba(0, 150, 255, .2), rgba(0, 150, 255, .2)), url('../images/hero-bg-a-blur.png');
  487. background-position: 0px 0px, 0px 0px, 50% 50%;
  488. background-size: auto, auto, cover;
  489. background-repeat: repeat, repeat, no-repeat;
  490. background-attachment: scroll, scroll, fixed;
  491. }
  492.  
  493. .slider-mask {
  494. position: relative;
  495. display: block;
  496. overflow: visible;
  497. width: 85%;
  498. margin-right: auto;
  499. margin-left: auto;
  500. text-align: center;
  501. }
  502.  
  503. .slider-mask.category {
  504. width: 100%;
  505. padding-top: 8px;
  506. }
  507.  
  508. .slider-mask.clients {
  509. max-width: 340px;
  510. }
  511.  
  512. .slider {
  513. overflow: hidden;
  514. height: auto;
  515. background-color: transparent;
  516. }
  517.  
  518. .solution-line-bar {
  519. position: absolute;
  520. left: 0px;
  521. top: 88px;
  522. right: 0px;
  523. z-index: 0;
  524. height: 1px;
  525. background-color: rgba(0, 0, 0, .15);
  526. }
  527.  
  528. .solution-line-bar.timeline {
  529. top: 138px;
  530. }
  531.  
  532. .solution-line-bar.timeline.start {
  533. left: auto;
  534. width: 50%;
  535. }
  536.  
  537. .solution-line-bar.timeline.end {
  538. right: auto;
  539. width: 50%;
  540. }
  541.  
  542. .timeline-bullet {
  543. position: static;
  544. left: 0px;
  545. top: 0px;
  546. right: 0px;
  547. bottom: 0px;
  548. z-index: 2;
  549. display: block;
  550. width: 16px;
  551. height: 16px;
  552. margin-top: -8px;
  553. margin-right: auto;
  554. margin-left: auto;
  555. border-radius: 50px;
  556. background-color: #ddd;
  557. }
  558.  
  559. .timeline-bullet.start {
  560. margin-left: -8px;
  561. float: left;
  562. }
  563.  
  564. .timeline-bullet.end {
  565. margin-right: -8px;
  566. float: right;
  567. }
  568.  
  569. .main-subtitle {
  570. position: relative;
  571. bottom: 0px;
  572. display: block;
  573. width: 60%;
  574. min-width: 600px;
  575. margin-top: 8px;
  576. margin-bottom: 40px;
  577. color: #fff;
  578. font-size: 20px;
  579. line-height: 130%;
  580. font-weight: 600;
  581. letter-spacing: 0.2px;
  582. }
  583.  
  584. .main-title {
  585. position: relative;
  586. z-index: 1;
  587. margin-top: 8px;
  588. margin-bottom: 16px;
  589. color: #fff;
  590. font-size: 3.8vw;
  591. line-height: 105%;
  592. font-weight: 900;
  593. }
  594.  
  595. .about-numbers-label {
  596. color: #000;
  597. font-size: 16px;
  598. font-weight: 600;
  599. text-align: center;
  600. text-transform: none;
  601. }
  602.  
  603. .plus {
  604. position: relative;
  605. display: inline-block;
  606. width: 33px;
  607. font-weight: 200;
  608. }
  609.  
  610. .about-bg-container {
  611. position: absolute;
  612. left: 0px;
  613. top: 0px;
  614. right: 0px;
  615. bottom: 0px;
  616. overflow: hidden;
  617. height: 100%;
  618. }
  619.  
  620. .about-bg-container.turner {
  621. display: block;
  622. width: 64vw;
  623. max-width: 1000px;
  624. margin-right: auto;
  625. margin-left: auto;
  626. background-image: url('../images/cta-circle-bg-turner.svg');
  627. background-position: 50% 50%;
  628. background-size: contain;
  629. background-repeat: no-repeat;
  630. }
  631.  
  632. .about-bg-container.fixed {
  633. display: block;
  634. width: 100%;
  635. max-width: 800px;
  636. margin-right: auto;
  637. margin-left: auto;
  638. background-image: url('../images/cta-circle-bg-static.svg');
  639. background-position: 50% 50%;
  640. background-size: contain;
  641. background-repeat: no-repeat;
  642. }
  643.  
  644. .case-img-block {
  645. display: block;
  646. overflow: hidden;
  647. border-radius: 100%;
  648. background-color: #000;
  649. }
  650.  
  651. .case-img-wrapper {
  652. position: relative;
  653. display: inline-block;
  654. padding: 8px;
  655. border-style: solid;
  656. border-width: 1px;
  657. border-color: rgba(0, 0, 0, .15);
  658. border-radius: 100%;
  659. }
  660.  
  661. .case-img {
  662. width: 280px;
  663. height: 280px;
  664. }
  665.  
  666. .cta-content-wrapper {
  667. position: relative;
  668. z-index: 1;
  669. }
  670.  
  671. .bg-numbers-block {
  672. position: absolute;
  673. left: 0px;
  674. right: 0px;
  675. bottom: 216px;
  676. z-index: 0;
  677. display: block;
  678. overflow: hidden;
  679. width: 100%;
  680. height: 330px;
  681. background-color: transparent;
  682. }
  683.  
  684. .bg-number-value {
  685. position: absolute;
  686. width: 100%;
  687. color: rgba(0, 0, 0, .04);
  688. font-size: 330px;
  689. line-height: 100%;
  690. font-weight: 900;
  691. text-align: center;
  692. letter-spacing: -16px;
  693. text-transform: uppercase;
  694. }
  695.  
  696. .about-numbers-column {
  697. padding: 16px 0px;
  698. }
  699.  
  700. .category-slide {
  701. width: 212px;
  702. padding-top: 0px;
  703. padding-right: 0px;
  704. padding-left: 0px;
  705. color: #fff;
  706. text-align: center;
  707. }
  708.  
  709. .category-img-block {
  710. display: block;
  711. overflow: hidden;
  712. padding: 24px;
  713. border-radius: 100%;
  714. background-color: hsla(0, 0%, 100%, .1);
  715. -webkit-transition: all 300ms ease;
  716. transition: all 300ms ease;
  717. }
  718.  
  719. .category-img-block:hover {
  720. border-color: rgba(0, 0, 0, .05);
  721. }
  722.  
  723. .category-icon {
  724. width: 40px;
  725. height: 40px;
  726. }
  727.  
  728. .category-img-wrapper {
  729. position: relative;
  730. display: inline-block;
  731. margin-bottom: 16px;
  732. padding: 0px;
  733. border-radius: 100%;
  734. background-color: hsla(0, 0%, 100%, .1);
  735. box-shadow: 0 17px 24px -15px rgba(0, 0, 0, .3);
  736. -webkit-transition: all 600ms cubic-bezier(.19, 1, .22, 1);
  737. transition: all 600ms cubic-bezier(.19, 1, .22, 1);
  738. }
  739.  
  740. .category-img-wrapper:hover {
  741. margin-top: -8px;
  742. margin-bottom: 8px;
  743. padding: 8px;
  744. }
  745.  
  746. .category-title {
  747. margin-top: 0px;
  748. margin-bottom: 16px;
  749. color: #fff;
  750. font-size: 15px;
  751. line-height: 120%;
  752. letter-spacing: 1px;
  753. }
  754.  
  755. .category-slider {
  756. overflow: hidden;
  757. height: 100%;
  758. padding-right: 48px;
  759. padding-left: 48px;
  760. background-color: transparent;
  761. }
  762.  
  763. .category-footer-link {
  764. color: #fff;
  765. text-decoration: none;
  766. }
  767.  
  768. .category-block {
  769. display: block;
  770. padding-top: 16px;
  771. padding-bottom: 24px;
  772. }
  773.  
  774. .last-cta-text {
  775. display: block;
  776. max-width: 570px;
  777. margin-right: auto;
  778. margin-bottom: 48px;
  779. margin-left: auto;
  780. color: #fff;
  781. font-weight: 300;
  782. }
  783.  
  784. .slider-solution-description {
  785. margin-bottom: 24px;
  786. color: #4b4b4b;
  787. font-size: 16px;
  788. line-height: 140%;
  789. font-weight: 500;
  790. }
  791.  
  792. .slider-solution-title {
  793. margin-top: 0px;
  794. margin-bottom: 16px;
  795. font-size: 20px;
  796. line-height: 125%;
  797. }
  798.  
  799. .btn-cta-pulse {
  800. position: relative;
  801. z-index: 3;
  802. min-width: 240px;
  803. margin-bottom: 16px;
  804. padding: 16px 40px;
  805. border-radius: 50px;
  806. background-color: #fca700;
  807. box-shadow: 0 9px 40px -14px #fca700;
  808. -webkit-transition: all 300ms ease;
  809. transition: all 300ms ease;
  810. font-family: 'Open Sans', sans-serif;
  811. line-height: 24px;
  812. font-weight: 800;
  813. text-align: center;
  814. letter-spacing: 1.5px;
  815. text-transform: uppercase;
  816. }
  817.  
  818. .btn-cta-pulse:hover {
  819. padding-right: 48px;
  820. padding-left: 48px;
  821. background-color: #ffc700;
  822. box-shadow: 0 0 30px -1px #ffc700;
  823. text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
  824. }
  825.  
  826. .btn-cta-pulse.hero {
  827. box-shadow: 0 9px 70px -14px rgba(0, 0, 0, .3);
  828. }
  829.  
  830. .btn-cta-pulse.hero:hover {
  831. box-shadow: 0 0 32px -4px #ffc700;
  832. }
  833.  
  834. .hero-row {
  835. display: -webkit-box;
  836. display: -webkit-flex;
  837. display: -ms-flexbox;
  838. display: flex;
  839. height: 100%;
  840. background-image: -webkit-linear-gradient(315deg, hsla(0, 0%, 100%, 0) 40%, #0096ff);
  841. background-image: linear-gradient(135deg, hsla(0, 0%, 100%, 0) 40%, #0096ff);
  842. }
  843.  
  844. .hero-content-column {
  845. display: -webkit-box;
  846. display: -webkit-flex;
  847. display: -ms-flexbox;
  848. display: flex;
  849. padding: 3vw 0px 3vw 32px;
  850. -webkit-box-pack: center;
  851. -webkit-justify-content: center;
  852. -ms-flex-pack: center;
  853. justify-content: center;
  854. -webkit-flex-wrap: wrap;
  855. -ms-flex-wrap: wrap;
  856. flex-wrap: wrap;
  857. -webkit-box-align: center;
  858. -webkit-align-items: center;
  859. -ms-flex-align: center;
  860. align-items: center;
  861. -webkit-align-content: center;
  862. -ms-flex-line-pack: center;
  863. align-content: center;
  864. }
  865.  
  866. .hero-logo-column {
  867. padding-top: 3vw;
  868. }
  869.  
  870. .hero-text {
  871. margin-bottom: 0px;
  872. padding-top: 8px;
  873. padding-bottom: 8px;
  874. font-size: 16px;
  875. line-height: 130%;
  876. font-weight: 400;
  877. text-align: center;
  878. }
  879.  
  880. .link {
  881. display: inline-block;
  882. padding-right: 8px;
  883. padding-left: 8px;
  884. border-radius: 50px;
  885. -webkit-transition: all 300ms ease;
  886. transition: all 300ms ease;
  887. color: #0096ff;
  888. font-size: 16px;
  889. font-weight: 700;
  890. text-decoration: none;
  891. }
  892.  
  893. .link:hover {
  894. margin-left: 8px;
  895. padding-right: 16px;
  896. padding-left: 16px;
  897. background-color: #0096ff;
  898. color: #fff;
  899. }
  900.  
  901. .support-section-column {
  902. width: 50%;
  903. padding-top: 80px;
  904. padding-bottom: 96px;
  905. float: left;
  906. border-right: 1px solid rgba(0, 0, 0, .15);
  907. }
  908.  
  909. .clients-slide {
  910. width: 100%;
  911. padding-right: 8px;
  912. padding-left: 8px;
  913. text-align: center;
  914. }
  915.  
  916. .clients-slider-nav {
  917. width: 280px;
  918. }
  919.  
  920. .support-container {
  921. display: -webkit-box;
  922. display: -webkit-flex;
  923. display: -ms-flexbox;
  924. display: flex;
  925. width: 100%;
  926. height: 298px;
  927. max-width: 640px;
  928. padding-right: 56px;
  929. padding-left: 56px;
  930. float: left;
  931. -webkit-flex-wrap: wrap;
  932. -ms-flex-wrap: wrap;
  933. flex-wrap: wrap;
  934. -webkit-box-align: center;
  935. -webkit-align-items: center;
  936. -ms-flex-align: center;
  937. align-items: center;
  938. -webkit-align-content: center;
  939. -ms-flex-line-pack: center;
  940. align-content: center;
  941. }
  942.  
  943. .support-container.title {
  944. display: block;
  945. height: auto;
  946. }
  947.  
  948. .support-section-row {
  949. border-top: 1px solid rgba(0, 0, 0, .15);
  950. }
  951.  
  952. .hero-feature-icon-block {
  953. display: block;
  954. width: 80px;
  955. height: 80px;
  956. margin-right: auto;
  957. margin-left: auto;
  958. float: none;
  959. }
  960.  
  961. .hero-features-slider {
  962. display: inline-block;
  963. overflow: hidden;
  964. width: 100%;
  965. height: auto;
  966. padding-bottom: 48px;
  967. padding-left: 8px;
  968. background-color: transparent;
  969. }
  970.  
  971. .hero-arguments-slider-nav {
  972. left: 408px;
  973. top: 82px;
  974. right: auto;
  975. bottom: 0px;
  976. width: 56px;
  977. height: 56px;
  978. margin-top: 0px;
  979. margin-bottom: auto;
  980. border-style: solid;
  981. border-width: 1px;
  982. border-color: rgba(0, 0, 0, .15);
  983. border-radius: 40px;
  984. background-color: #fff;
  985. background-image: url('../images/pointer-right.svg');
  986. background-position: 55% 50%;
  987. background-size: 24px;
  988. background-repeat: no-repeat;
  989. box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2);
  990. -webkit-transition: all 300ms ease;
  991. transition: all 300ms ease;
  992. color: #0096ff;
  993. }
  994.  
  995. .hero-arguments-slider-nav:hover {
  996. background-color: #f0f0f0;
  997. }
  998.  
  999. .hero-arguments-slider-nav.left {
  1000. left: 0px;
  1001. right: auto;
  1002. background-image: url('../images/pointer-left.svg');
  1003. background-position: 48% 50%;
  1004. }
  1005.  
  1006. .hero-features-slide-card {
  1007. margin-right: 24px;
  1008. padding: 16px 64px 56px;
  1009. border-radius: 34px;
  1010. background-color: #fff;
  1011. box-shadow: 5px 30px 40px -8px rgba(0, 0, 0, .25);
  1012. }
  1013.  
  1014. .hero-title-block {
  1015. width: 90%;
  1016. padding-left: 8px;
  1017. }
  1018.  
  1019. .hero-features-slider-mask {
  1020. overflow: visible;
  1021. width: 100%;
  1022. max-width: 448px;
  1023. }
  1024.  
  1025. .hero-cta-block {
  1026. position: absolute;
  1027. bottom: 12px;
  1028. width: 100%;
  1029. max-width: 464px;
  1030. text-align: center;
  1031. }
  1032.  
  1033. .hero-content-block {
  1034. position: relative;
  1035. padding-top: 48px;
  1036. }
  1037.  
  1038. .timeline-solution-slide {
  1039. width: 100%;
  1040. padding-right: 16px;
  1041. padding-left: 16px;
  1042. text-align: center;
  1043. }
  1044.  
  1045. .div-block-11 {
  1046. display: -webkit-box;
  1047. display: -webkit-flex;
  1048. display: -ms-flexbox;
  1049. display: flex;
  1050. -webkit-justify-content: space-around;
  1051. -ms-flex-pack: distribute;
  1052. justify-content: space-around;
  1053. }
  1054.  
  1055. .timeline-solution-block-v {
  1056. position: relative;
  1057. z-index: 2;
  1058. display: inline-block;
  1059. max-width: 332px;
  1060. padding-top: 32px;
  1061. -webkit-box-align: start;
  1062. -webkit-align-items: flex-start;
  1063. -ms-flex-align: start;
  1064. align-items: flex-start;
  1065. -webkit-box-flex: 0;
  1066. -webkit-flex: 0 0 auto;
  1067. -ms-flex: 0 0 auto;
  1068. flex: 0 0 auto;
  1069. text-align: center;
  1070. }
  1071.  
  1072. .timeline-solution-icon-block-v {
  1073. display: inline-block;
  1074. margin-bottom: 8px;
  1075. padding-top: 16px;
  1076. padding-right: 48px;
  1077. padding-left: 48px;
  1078. -webkit-box-flex: 0;
  1079. -webkit-flex: 0 0 auto;
  1080. -ms-flex: 0 0 auto;
  1081. flex: 0 0 auto;
  1082. }
  1083.  
  1084. .paragraph {
  1085. font-size: 17px;
  1086. line-height: 160%;
  1087. }
  1088.  
  1089. html.w-mod-js *[data-ix="main-nav"] {
  1090. display: none;
  1091. -webkit-transform: translate(0px, -100px);
  1092. -ms-transform: translate(0px, -100px);
  1093. transform: translate(0px, -100px);
  1094. }
  1095.  
  1096. @media (max-width: 991px) {
  1097. .header {
  1098. height: auto;
  1099. background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .3) 53%, hsla(0, 0%, 100%, 0)), url('../images/hero-bg-vertical-a.png');
  1100. background-image: linear-gradient(0deg, rgba(0, 0, 0, .3) 53%, hsla(0, 0%, 100%, 0)), url('../images/hero-bg-vertical-a.png');
  1101. background-position: 0px 0px, 50% 0px;
  1102. background-attachment: scroll, scroll;
  1103. }
  1104. .logo-sympla.hero {
  1105. position: relative;
  1106. display: block;
  1107. width: 150px;
  1108. height: 150px;
  1109. float: left;
  1110. }
  1111. .section-title {
  1112. font-size: 56px;
  1113. }
  1114. .section-title.numbers {
  1115. font-size: 40px;
  1116. letter-spacing: 0px;
  1117. }
  1118. .section-title.category {
  1119. padding-right: 32px;
  1120. padding-left: 32px;
  1121. }
  1122. .slider-nav.solution-right {
  1123. right: 16px;
  1124. margin-right: 0px;
  1125. }
  1126. .slider-nav.solution-left {
  1127. left: 16px;
  1128. margin-left: 0px;
  1129. }
  1130. .quote-text {
  1131. padding-right: 48px;
  1132. padding-left: 56px;
  1133. }
  1134. .pricing-column {
  1135. margin-bottom: 56px;
  1136. padding-right: 64px;
  1137. padding-left: 64px;
  1138. }
  1139. .sympla-pro-column {
  1140. padding-right: 72px;
  1141. padding-left: 72px;
  1142. }
  1143. .slider-mask {
  1144. width: 80%;
  1145. }
  1146. .slider-mask.clients {
  1147. width: 100%;
  1148. }
  1149. .main-subtitle {
  1150. width: 100%;
  1151. font-size: 22px;
  1152. }
  1153. .main-title {
  1154. font-size: 6.8vw;
  1155. }
  1156. .about-bg-container.turner {
  1157. width: 100%;
  1158. }
  1159. .case-img {
  1160. width: 200px;
  1161. height: 200px;
  1162. }
  1163. .bg-numbers-block {
  1164. top: 346px;
  1165. display: none;
  1166. }
  1167. .slider-solution-description {
  1168. margin-bottom: 32px;
  1169. }
  1170. .hero-row {
  1171. display: block;
  1172. }
  1173. .hero-content-column {
  1174. display: block;
  1175. }
  1176. .hero-logo-column {
  1177. height: 400px;
  1178. }
  1179. .support-section-column {
  1180. width: 100%;
  1181. float: none;
  1182. }
  1183. .clients-slide {
  1184. padding-top: 0px;
  1185. }
  1186. .support-container {
  1187. display: block;
  1188. height: auto;
  1189. max-width: 100%;
  1190. }
  1191. .support-container.title {
  1192. float: none;
  1193. }
  1194. .div-block-11 {
  1195. display: block;
  1196. }
  1197. .timeline-solution-block-v {
  1198. display: inline-block;
  1199. width: 80%;
  1200. }
  1201. }
  1202.  
  1203. @media (max-width: 767px) {
  1204. .content-wrapper.cta {
  1205. padding: 4vh 24px;
  1206. }
  1207. .content-wrapper.about {
  1208. margin-bottom: 48px;
  1209. padding-right: 24px;
  1210. padding-left: 24px;
  1211. }
  1212. .content-wrapper.timeline {
  1213. padding-right: 24px;
  1214. padding-left: 24px;
  1215. }
  1216. .section-title {
  1217. font-size: 50px;
  1218. }
  1219. .section-title.category {
  1220. font-size: 22px;
  1221. }
  1222. .slider-nav.solution-right {
  1223. right: 40px;
  1224. }
  1225. .slider-nav.solution-left {
  1226. left: 40px;
  1227. }
  1228. .princing-content-title {
  1229. font-size: 22px;
  1230. }
  1231. .testimonial-author {
  1232. padding-left: 0px;
  1233. text-align: center;
  1234. }
  1235. .quote-text {
  1236. background-position: 100% 105%, -2px -10px;
  1237. text-align: center;
  1238. }
  1239. .content-section.numbers {
  1240. padding-right: 32px;
  1241. padding-left: 32px;
  1242. }
  1243. .about-number {
  1244. font-size: 70px;
  1245. text-align: center;
  1246. }
  1247. .slider-mask {
  1248. width: 60%;
  1249. }
  1250. .main-subtitle {
  1251. min-width: 0px;
  1252. font-size: 16px;
  1253. }
  1254. .main-title {
  1255. font-size: 6.8vw;
  1256. }
  1257. .about-numbers-label {
  1258. padding-left: 0px;
  1259. text-align: center;
  1260. }
  1261. .plus {
  1262. top: 21px;
  1263. }
  1264. .bg-numbers-block {
  1265. display: none;
  1266. }
  1267. .bg-number-value {
  1268. font-size: 70px;
  1269. text-align: center;
  1270. }
  1271. .about-numbers-column {
  1272. padding-top: 16px;
  1273. padding-bottom: 16px;
  1274. }
  1275. .category-slide {
  1276. width: 172px;
  1277. padding-right: 16px;
  1278. padding-left: 16px;
  1279. }
  1280. .category-title {
  1281. font-size: 14px;
  1282. }
  1283. .slider-solution-description {
  1284. font-size: 16px;
  1285. }
  1286. .clients-slide {
  1287. padding-right: 16px;
  1288. padding-left: 16px;
  1289. }
  1290. .timeline-solution-slide {
  1291. width: 100%;
  1292. padding-right: 0px;
  1293. padding-left: 0px;
  1294. }
  1295. }
  1296.  
  1297. @media (max-width: 479px) {
  1298. .header {
  1299. overflow: visible;
  1300. min-height: 0px;
  1301. }
  1302. .logo-sympla {
  1303. display: inline-block;
  1304. width: 48px;
  1305. height: 48px;
  1306. margin-right: 8px;
  1307. margin-left: 8px;
  1308. background-size: 48px;
  1309. }
  1310. .logo-sympla.hero {
  1311. left: 0px;
  1312. top: 16px;
  1313. width: 64px;
  1314. height: 64px;
  1315. background-size: 64px;
  1316. }
  1317. .content-wrapper.cta {
  1318. padding-top: 40px;
  1319. padding-bottom: 40px;
  1320. }
  1321. .content-wrapper.about {
  1322. padding-right: 0px;
  1323. padding-left: 0px;
  1324. }
  1325. .content-wrapper.timeline {
  1326. padding-right: 16px;
  1327. padding-left: 16px;
  1328. }
  1329. .content-wrapper.numbers {
  1330. margin-bottom: 0px;
  1331. }
  1332. .content-wrapper.numbers-intro {
  1333. margin-bottom: 0px;
  1334. padding-right: 16px;
  1335. padding-left: 16px;
  1336. }
  1337. .btn.main-cta {
  1338. padding: 4px 24px;
  1339. font-size: 10px;
  1340. letter-spacing: 0.6px;
  1341. }
  1342. .tools-icon {
  1343. width: 64px;
  1344. height: 64px;
  1345. }
  1346. .section-title {
  1347. margin-bottom: 24px;
  1348. padding-right: 10px;
  1349. padding-left: 10px;
  1350. font-size: 30px;
  1351. line-height: 120%;
  1352. font-weight: 200;
  1353. }
  1354. .section-title.numbers {
  1355. font-size: 32px;
  1356. }
  1357. .section-title.category {
  1358. margin-bottom: 8px;
  1359. padding: 10px 35px;
  1360. font-size: 16px;
  1361. font-weight: 400;
  1362. }
  1363. .slider-nav.solution-right {
  1364. top: 40px;
  1365. right: 24px;
  1366. width: 56px;
  1367. height: 56px;
  1368. margin-right: 0px;
  1369. padding-top: 0px;
  1370. padding-bottom: 0px;
  1371. }
  1372. .slider-nav.solution-right.timeline {
  1373. left: 24px;
  1374. top: auto;
  1375. right: 24px;
  1376. bottom: 0px;
  1377. }
  1378. .slider-nav.solution-left {
  1379. left: 24px;
  1380. top: 40px;
  1381. width: 56px;
  1382. height: 56px;
  1383. margin-left: 0px;
  1384. padding-top: 0px;
  1385. padding-bottom: 0px;
  1386. }
  1387. .slider-nav.solution-left.timeline {
  1388. left: 24px;
  1389. top: auto;
  1390. right: 24px;
  1391. bottom: 0px;
  1392. }
  1393. .slider-nav.category-left {
  1394. display: none;
  1395. width: 48px;
  1396. }
  1397. .slider-nav.category-right {
  1398. width: 48px;
  1399. }
  1400. .princing-content-title {
  1401. padding-right: 24px;
  1402. padding-left: 24px;
  1403. font-size: 20px;
  1404. line-height: 28px;
  1405. }
  1406. .quote-text {
  1407. padding-right: 48px;
  1408. padding-left: 48px;
  1409. background-size: 54px, 54px;
  1410. font-size: 14px;
  1411. }
  1412. .quote-text.highlight {
  1413. padding-right: 42px;
  1414. font-size: 15px;
  1415. }
  1416. .pricing-column {
  1417. margin-bottom: 24px;
  1418. padding-right: 16px;
  1419. padding-left: 16px;
  1420. }
  1421. .pricing-highlight-block {
  1422. padding: 34px 24px;
  1423. }
  1424. .sympla-pro-column {
  1425. padding-right: 12px;
  1426. padding-left: 12px;
  1427. }
  1428. .content-section {
  1429. padding-top: 48px;
  1430. padding-bottom: 56px;
  1431. }
  1432. .content-section.pricing {
  1433. padding-top: 40px;
  1434. padding-bottom: 40px;
  1435. background-size: 160%;
  1436. }
  1437. .content-section.numbers {
  1438. padding: 40px 16px;
  1439. }
  1440. .content-section.timeline-solutions {
  1441. padding-top: 40px;
  1442. padding-bottom: 40px;
  1443. }
  1444. .content-section.cta {
  1445. padding-top: 0vw;
  1446. padding-bottom: 0vw;
  1447. }
  1448. .content-section.support {
  1449. padding-top: 40px;
  1450. }
  1451. .princing-text {
  1452. font-size: 16px;
  1453. }
  1454. .main-nav {
  1455. width: 100%;
  1456. padding-right: 8px;
  1457. padding-left: 8px;
  1458. border-bottom-left-radius: 0px;
  1459. text-align: left;
  1460. }
  1461. .main-cta-wrapper {
  1462. padding-top: 8px;
  1463. padding-bottom: 8px;
  1464. }
  1465. .divider {
  1466. display: none;
  1467. height: 40px;
  1468. float: none;
  1469. }
  1470. .about-number {
  1471. font-size: 40px;
  1472. }
  1473. .milion-text {
  1474. font-size: 24px;
  1475. letter-spacing: 0px;
  1476. }
  1477. .footer-section {
  1478. top: auto;
  1479. right: 0px;
  1480. bottom: 0px;
  1481. }
  1482. .slider-mask {
  1483. overflow: hidden;
  1484. width: 80%;
  1485. }
  1486. .slider-mask.clients {
  1487. overflow: visible;
  1488. width: 72%;
  1489. max-width: 226px;
  1490. }
  1491. .slider.tools {
  1492. overflow: visible;
  1493. padding-bottom: 24px;
  1494. }
  1495. .solution-line-bar {
  1496. top: 68px;
  1497. }
  1498. .solution-line-bar.timeline {
  1499. display: none;
  1500. }
  1501. .main-subtitle {
  1502. width: 100%;
  1503. margin-bottom: 24px;
  1504. font-size: 14px;
  1505. line-height: 130%;
  1506. }
  1507. .main-title {
  1508. margin-bottom: 8px;
  1509. font-size: 6vw;
  1510. line-height: 110%;
  1511. }
  1512. .plus {
  1513. top: 6px;
  1514. width: 24px;
  1515. }
  1516. .about-bg-container {
  1517. display: none;
  1518. }
  1519. .bg-number-value {
  1520. font-size: 50px;
  1521. }
  1522. .about-numbers-column {
  1523. padding-top: 8px;
  1524. padding-bottom: 8px;
  1525. }
  1526. .category-slide {
  1527. width: 50%;
  1528. padding-right: 0px;
  1529. padding-left: 0px;
  1530. }
  1531. .category-title {
  1532. min-height: 0px;
  1533. margin-bottom: 8px;
  1534. font-size: 12px;
  1535. }
  1536. .category-slider {
  1537. padding-right: 16%;
  1538. padding-left: 16%;
  1539. }
  1540. .category-block {
  1541. padding-top: 0px;
  1542. }
  1543. .content-text {
  1544. font-size: 14px;
  1545. }
  1546. .last-cta-text {
  1547. margin-bottom: 32px;
  1548. font-size: 14px;
  1549. font-weight: 400;
  1550. }
  1551. .slider-solution-description {
  1552. margin-bottom: 24px;
  1553. padding-right: 0px;
  1554. background-image: none;
  1555. font-size: 14px;
  1556. font-weight: 400;
  1557. }
  1558. .slider-solution-title {
  1559. min-height: 0px;
  1560. margin-bottom: 16px;
  1561. font-size: 16px;
  1562. }
  1563. .btn-cta-pulse {
  1564. font-size: 12px;
  1565. line-height: 16px;
  1566. }
  1567. .btn-cta-pulse.hero {
  1568. min-width: 0px;
  1569. padding-top: 12px;
  1570. padding-bottom: 12px;
  1571. }
  1572. .hero-content-column {
  1573. padding: 1vw 8px;
  1574. }
  1575. .hero-logo-column {
  1576. height: 52vw;
  1577. padding-top: 0vw;
  1578. }
  1579. .hero-text {
  1580. font-size: 12px;
  1581. line-height: 140%;
  1582. }
  1583. .link {
  1584. font-size: 14px;
  1585. }
  1586. .link:hover {
  1587. margin-left: 0px;
  1588. padding-right: 8px;
  1589. padding-left: 8px;
  1590. background-color: transparent;
  1591. color: #0096ff;
  1592. }
  1593. .support-section-column {
  1594. padding-top: 40px;
  1595. padding-bottom: 56px;
  1596. }
  1597. .support-section-column.clients {
  1598. padding-top: 16px;
  1599. padding-bottom: 0px;
  1600. }
  1601. .clients-slide {
  1602. padding-right: 0px;
  1603. padding-left: 0px;
  1604. }
  1605. .clients-slider-nav {
  1606. width: 50px;
  1607. }
  1608. .support-container {
  1609. padding-right: 24px;
  1610. padding-left: 24px;
  1611. }
  1612. .support-section-row {
  1613. border-top-style: none;
  1614. }
  1615. .hero-feature-icon-block {
  1616. width: 48px;
  1617. height: 48px;
  1618. }
  1619. .hero-features-slider {
  1620. padding-right: 16px;
  1621. padding-left: 16px;
  1622. }
  1623. .hero-arguments-slider-nav {
  1624. left: auto;
  1625. top: 68px;
  1626. right: 0px;
  1627. width: 40px;
  1628. height: 40px;
  1629. }
  1630. .hero-arguments-slider-nav.left {
  1631. top: 68px;
  1632. }
  1633. .hero-features-slide-card {
  1634. padding-right: 10vw;
  1635. padding-bottom: 48px;
  1636. padding-left: 10vw;
  1637. border-radius: 24px;
  1638. box-shadow: none;
  1639. }
  1640. .hero-title-block {
  1641. width: 100%;
  1642. padding-right: 16px;
  1643. padding-left: 16px;
  1644. }
  1645. .hero-cta-block {
  1646. padding-right: 48px;
  1647. padding-left: 48px;
  1648. }
  1649. .hero-content-block {
  1650. padding-top: 0px;
  1651. }
  1652. .timeline-solution-block-v {
  1653. width: 100%;
  1654. margin-bottom: 16px;
  1655. padding-top: 0px;
  1656. padding-right: 0px;
  1657. padding-left: 0px;
  1658. }
  1659. .timeline-solution-icon-block-v {
  1660. margin-right: auto;
  1661. margin-left: auto;
  1662. padding-top: 0px;
  1663. padding-right: 0px;
  1664. padding-left: 0px;
  1665. float: none;
  1666. }
  1667. .paragraph {
  1668. line-height: 150%;
  1669. }
  1670. }
  1671. @keyframes color-change {
  1672. 0% {background-color: #fca700;}
  1673. 50% {background-color: #ffc700;}
  1674. 100% {background-color: #fca700;}
  1675. }
  1676.  
  1677. @keyframes spin {
  1678. 0% {transform: rotateZ(0deg);}
  1679. 100% {transform: rotateZ(360deg);}
  1680.  
  1681. }
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!