API tools faq
paste
Guest User

Untitled

a guest
Jan 23rd, 2019
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 69.47 KB | None | 0 0
raw download clone embed print report
  1. @import "vars"
  2. @import "fonts"
  3. @import "libs"
  4.  
  5.  
  6. #myList li display:none
  7.  
  8. #loadMore
  9. color:green
  10. cursor:pointer
  11. #loadMore:hover
  12. color:black
  13. #showLess
  14. color:red
  15. cursor:pointer
  16. #showLess:hover
  17. color:black
  18.  
  19. ::placeholder
  20. color: #666
  21.  
  22. ::selection
  23. // background-color: $accent
  24. color: #fff
  25. .section
  26. height: 100vh !important
  27. overflow: hidden
  28. .button
  29. display: inline-block
  30. color: #fff
  31. text-decoration: none
  32. background-color: $accent
  33. padding: 15px 45px
  34. font-size: 13px
  35. text-transform: uppercase
  36. font-weight: 600
  37. text-align: center
  38. position: relative
  39. outline: none
  40. transition: background-color .1s ease
  41. &:focus, &:hover
  42. text-decoration: none
  43. color: #fff
  44. &:hover
  45. background-color: lighten($accent, 5%)
  46. &.button-white
  47. background-color: #fff
  48. color: #444
  49. padding: 7px 15px
  50. outline: 2px solid #000
  51.  
  52.  
  53. body
  54. font-size: 16px
  55. min-width: 320px
  56. font-weight: 500
  57. position: relative
  58. line-height: 1.65
  59. font-family: $default-font
  60. overflow-x: hidden
  61. color: $text
  62. //background-color: #000
  63. input, textarea
  64. border: #666 1px solid
  65. outline: none
  66. &:focus:required:invalid
  67. border-color: red
  68. &:required:valid
  69. border-color: green
  70.  
  71. .img-responsive
  72. display: block
  73. max-width: 100%
  74. height: auto
  75. &.img-width
  76. width: 100%
  77.  
  78. .text-center
  79. text-align: center
  80.  
  81. b, strong
  82. font-weight: bold
  83.  
  84. .container-fluid
  85. padding-right: 0
  86. padding-left: 0
  87.  
  88. .left-pannel
  89. z-index: 1060
  90. .content
  91. position: fixed
  92. width: 300px
  93. height: 100vh
  94. background-color: #fff
  95. text-align: center
  96. top: 0
  97. z-index: 1160
  98. min-height: 515px
  99. .your-town
  100. position: relative
  101. img
  102. display: inline-block
  103. height: 30px
  104. width: auto
  105. margin-bottom: 15px
  106.  
  107. &-choice
  108. display: inline-block
  109. font-size: 12px
  110. width: auto
  111. span
  112. display: block
  113. text-align: left
  114. margin-left: 4px
  115.  
  116.  
  117. select
  118. border: none
  119. &:focus
  120. outline: none
  121.  
  122.  
  123. a
  124. width: 100%
  125. display: block
  126. .logo
  127. padding: 30% 10% 20% 10%
  128. min-width: 200px
  129. max-width: 250px
  130. .phone-pannel
  131. position: absolute
  132. padding: 15% 10%
  133. bottom: 0
  134. margin: auto
  135. .phone
  136. text-align: left
  137. padding: 0 10% 20% 10%
  138. strong
  139. font-size: 20px
  140. display: block
  141. margin: auto
  142. span
  143. font-size: 15px
  144. display: block
  145. margin: auto
  146. .button-big
  147. display: inline-block
  148. border: 2px solid #000
  149. height: 100%
  150. width: 100%
  151. background-color: #fff
  152. transition: background-color .25s ease
  153. &:hover
  154. background-color: darken(#fff, 5%)
  155.  
  156. img, span
  157. display: inline-block
  158. position: relative
  159. span
  160. font-size: 14px
  161. font-weight: 600
  162. line-height: 1.2
  163. text-align: left
  164. width: 25%
  165. height: 25%
  166. top: 5px
  167. right: 3%
  168. img
  169. width: 25%
  170. height: 25%
  171. max-height: 55px
  172. max-width: 50px
  173. position: relative
  174. bottom: 8px
  175. right: 10%
  176.  
  177. .menu
  178. background-color: #373737
  179. right: 0
  180. left: 300px
  181. top: 0
  182. z-index: 25000
  183. .menu-content
  184. position: fixed
  185. background-color: #373737
  186. right: 0
  187. top: 0
  188. left: 300px
  189. z-index: 25000
  190. height: 100vh
  191. transform: translateY(-1300px)
  192. transition: all 1s ease
  193. .menu-content-active
  194. transform: translateY(0)
  195. transition: all 1s ease
  196. .navbar
  197. padding-top: 0
  198. padding-right: 0
  199. padding-left: 0
  200. left: 300px
  201. width: 100px
  202. z-index: 26000
  203. outline: none
  204. .hamburger
  205. background-color: #373737
  206. height: 100px
  207. width: 100px
  208. margin-top: 0
  209. &:focus
  210. outline: none
  211. &:hover
  212. opacity: 1
  213.  
  214. .hamburger-box
  215. .hamburger-inner
  216. background-color: #fff
  217. &::before
  218. background-color: #fff
  219. &::after
  220. background-color: #fff
  221. .is-active
  222. background-color: #b51d22
  223. .hidden-menu
  224. height: 100%
  225. width: 100vh
  226. color: #fff
  227. padding: 7rem 0
  228. position: relative
  229. ul
  230. list-style-type: none
  231. width: 320px
  232. li
  233. height: 50px
  234. .headline
  235. text-transform: uppercase
  236. color: #fff
  237. font-size: 20px
  238. padding: 15px 20px
  239. a
  240. display: inline-block
  241. color: #c2c2c2
  242. font-size: 13px
  243. padding: 15px 20px
  244. transition: background-color .35s ease
  245. &:hover
  246. background-color: #b51d22
  247. text-decoration: none
  248. .active
  249. background-color: #b51d22
  250. .angel-down
  251. height: 10px
  252. width: auto
  253. filter: invert(1)
  254. position: relative
  255. bottom: 3px
  256. left: 3px
  257. display: none
  258. &:hover
  259. background-color: transparent
  260. .second-col
  261. .desing
  262. ul
  263. li
  264. height: 60px
  265.  
  266. .slider
  267. .slide
  268. height: 900px
  269. .carousel-inner
  270. height: 100%
  271. width: auto
  272. margin-right: 24%
  273. margin-left: 300px
  274. background-size: cover
  275. background-position: bottom right
  276. background-repeat: no-repeat
  277. z-index: -1
  278. .carousel-item
  279. font-size: 48px
  280. color: #b51d22
  281. padding: 15% 20%
  282. font-weight: 600
  283. width: 70%
  284. line-height: 1.2
  285. div
  286. display: flex
  287. flex-wrap: nowrap
  288. .carousel-indicators
  289. position: absolute
  290. display: block
  291. height: 100%
  292. width: 25%
  293. background-color: #373737
  294. margin-right: 0
  295. margin-bottom: 0
  296. margin-left: 0
  297. bottom: 0
  298. left: auto
  299. color: #fff
  300. font-size: 18px
  301. text-align: left
  302. padding: 3% 2% 8% 3%
  303. text-transform: uppercase
  304. .last
  305. margin-bottom: 20px
  306. li
  307. position: relative
  308. height: auto
  309. width: auto
  310. color: #fff
  311. text-indent: inherit
  312. text-transform: none
  313. font-size: 14px
  314. background: none
  315. padding: 8px 15px
  316. a
  317. position: relative
  318. display: block
  319. color: #fff
  320. .active
  321. background-color: #b51d22
  322.  
  323. .s-services
  324. height: 900px
  325. overflow: hidden
  326. .s-services-service
  327. padding-left: 300px
  328. width: auto
  329. display: flex
  330. flex-direction: column
  331. .button-service
  332. position: absolute
  333. border: none
  334. background-color: rgba(#fff, .5)
  335. width: 150px
  336. height: auto
  337. margin: 750px 0 0 50%
  338. left: 75px
  339. .button-service-active
  340. display: none
  341. .item
  342. background-color: #e6e6e6
  343. .content, img
  344. display: block
  345. width: 50%
  346. .content
  347. padding: 5% 3%
  348. .headline
  349. font-size: 36px
  350. font-weight: 500
  351. .text
  352. font-size: 14px
  353. padding: 5% 0 12% 0
  354. .two-button
  355. display: flex
  356. flex-wrap: wrap
  357. justify-content: center
  358. .button
  359. margin: 10px
  360. .button-white
  361. img
  362. display: inline-block
  363. height: 35px
  364. width: auto
  365. .s-services-active
  366. height: 100% !important
  367. .s-services-header, .s-reasons-header, .s-geography-headline, .s-video-headline, .s-technology-headline, .s-equipment-headline, .s-projects-headline, .s-client-headline, .s-awards-headline, .s-team-headline, .s-persona-header, .s-interesting-header, .s-steps-headline, .s-methods-headline, .s-contacts-headline, .s-techno-blog-headline, .s-techno-blog-news-headline, .s-form-headline, .s-objects-1-headline, .s-kind-work-headline
  368. position: relative
  369. margin-left: 300px
  370. height: 100px
  371. background-color: $accent
  372. span
  373. display: block
  374. color: #fff
  375. font-size: 20px
  376. font-weight: 500
  377. padding-left: 120px
  378. padding-top: 37px
  379.  
  380. .s-reasons
  381. .content
  382. display: flex
  383. margin-left: 300px
  384. background-size: cover
  385. background-position: bottom right
  386. justify-content: center
  387. flex-direction: column
  388. padding-top: 2%
  389. .s-reasons-reason
  390. background-size: cover
  391. background-position: bottom right
  392. flex-wrap: wrap
  393. justify-content: center
  394. .s-reason-item
  395. height: 330px
  396. width: 280px
  397. margin: 0 15px 15px 0
  398. background-color: #fff
  399. opacity: .8
  400. display: flex
  401. flex-direction: column
  402. justify-content: space-around
  403. span
  404. display: block
  405. font-size: 18px
  406. margin: 0 auto
  407. width: 200px
  408. font-weight: 500
  409. img
  410. display: block
  411. height: 120px
  412. width: 100px
  413. margin: 0 auto
  414. .button-reasons
  415. display: inline-block
  416. color: #000
  417. text-decoration: none
  418. background-color: rgba(256, 256, 256, .5)
  419. padding: 10px 35px
  420. font-size: 14px
  421. font-weight: 500
  422. text-align: center
  423. position: relative
  424. outline: none
  425. transition: opacity .1s ease
  426. border: 2px solid #000
  427. margin: 15px auto
  428. &:focus, &:hover
  429. text-decoration: none
  430. color: #fff
  431. &:hover
  432. opacity: .7
  433. &:active
  434. opacity: .7
  435.  
  436. .s-video
  437. height: 900px
  438. .video-pannel
  439. margin-left: 300px
  440. background-color: #373737
  441. display: flex
  442. height: 800px
  443. .right-pannel
  444. width: 520px
  445. background-color: #e6e6e6
  446. padding: 50px 30px 30px 60px
  447. font-weight: 500
  448. position: relative
  449. .headline
  450. font-size: 36px
  451. margin-bottom: 30px
  452. font-weight: 500
  453. line-height: 1.2
  454. p
  455. font-size: 12px
  456. margin: 20px 0
  457.  
  458. ul
  459. margin-left: -20px
  460. margin: 10px 0
  461. font-size: 12px
  462. padding-left: 20px
  463. span
  464. margin-left: -20px
  465. .button-team
  466. padding: 25px 70px
  467. .container
  468. padding-right: 0
  469. padding-left: 0
  470. flex-wrap: wrap
  471. justify-content: center
  472. .embed-responsive
  473. flex-direction: column
  474. width: 100%
  475. .mouse
  476. margin-bottom: 0
  477. width: 34px
  478. margin-top: 30px
  479. margin-left: 50px
  480.  
  481.  
  482.  
  483. .s-technology
  484. .technology
  485. margin-left: 300px
  486. background-color: #e6e6e6
  487. .bottom
  488. height: auto
  489. width: 100%
  490. display: flex
  491. flex-wrap: nowrap
  492. background-color: #c3c3c3
  493. .left
  494. width: 49%
  495. margin: auto 6%
  496. font-weight: 500
  497. .top
  498. display: flex
  499. flex-wrap: nowrap
  500. font-size: 14px
  501. filter: grayscale(1)
  502. .text
  503. margin: auto 25px
  504. strong
  505. font-size: 16px
  506. .bottom
  507. width: 80%
  508. max-height: 80px
  509. font-size: 14px
  510. margin-top: 20px
  511. .right
  512. width: 49%
  513. padding: 1% 4%
  514. form
  515. height: 100%
  516. width: 100%
  517. display: flex
  518. flex-wrap: nowrap
  519. .first
  520. width: 50%
  521. input, textarea
  522. display: block
  523. width: 95%
  524. margin-top: 20px
  525. border: none
  526. color: #000
  527. .last-input
  528. height: 80px
  529. .last
  530. padding-top: 3%
  531. button
  532. margin-top: 30px
  533. width: 100%
  534. height: 70px
  535. border: none
  536. .r-tabs
  537. padding: 0
  538. font-weight: 500
  539.  
  540. .r-tabs-nav
  541. .r-tabs-tab
  542. width: 25%
  543. height: 150px
  544. background-color: #c3c3c3
  545. margin-left: -4px
  546. border-right: 1px solid #e6e6e6
  547. .r-tabs-anchor
  548. width: 100%
  549. height: 100%
  550. display: flex
  551. flex-wrap: nowrap
  552. padding: 4% 10%
  553. color: #000
  554. text-decoration: none
  555. font-size: 18px
  556. span
  557. position: relative
  558. margin: auto 20px
  559. width: 50px
  560. line-height: 1.5
  561. .r-tabs-state-active
  562. background-color: #e6e6e6
  563. .r-tabs-panel
  564. padding: 0
  565. .content
  566. display: flex
  567. flex-wrap: nowrap
  568. .left-col
  569. width: 50%
  570. .headline
  571. padding: 7% 10%
  572. .middle
  573. display: flex
  574. justify-content: flex-start
  575. .items
  576. display: inline-block
  577. width: 34%
  578. height: 400px
  579. .item
  580. background-color: $accent
  581. border-bottom: 2px solid #e6e6e6
  582. height: 25%
  583. padding: 6% 6%
  584. display: flex
  585. flex-wrap: nowrap
  586. span
  587. width: 80%
  588. font-size: 14px
  589. color: #fff
  590. line-height: 1.3
  591. padding-left: 10px
  592. display: block
  593. margin: auto
  594. img
  595. display: block
  596. position: relative
  597. max-width: 63px
  598. margin: auto
  599. .text
  600. display: inline-block
  601. width: 64%
  602. height: 400px
  603. padding: 0 3%
  604. ul
  605. list-style-type: decimal
  606. padding-top: 20px
  607. padding-right: 30px
  608. font-size: 24px
  609. li
  610. margin-top: 10px
  611. span
  612. display: block
  613. font-size: 14px
  614. font-weight: 500
  615. padding: 0
  616. span
  617. padding-left: 25px
  618. font-size: 16px
  619. font-weight: 600
  620. a
  621. background-color: rgba(256, 256, 256, .5)
  622. color: #000
  623. border: 2px solid #000
  624. margin: 60px 50% 20px
  625. left: -88px
  626. transition: background-color .1s ease
  627. &:focus, &:hover
  628. text-decoration: none
  629. &:hover
  630. background-color: darken(rgba(256, 256, 256, .5), 25%)
  631. .right-col
  632. width: 50%
  633. filter: grayscale(1)
  634.  
  635. .s-equipment
  636. .s-equipment-content
  637. margin-left: 300px
  638. background-color: #c3c3c3
  639. p
  640. margin-left: 10%
  641. padding-top: 3%
  642. width: 50%
  643. font-weight: 500
  644. .owl-carousel
  645. padding: 20px 150px
  646. .owl-nav
  647. position: absolute
  648. display: flex
  649. flex-wrap: nowrap
  650. justify-content: space-between
  651. top: 300px
  652. width: 85vw
  653. left: 0
  654. .owl-next
  655. position: absolute
  656. right: 100px
  657. .owl-prev
  658. position: absolute
  659. left: 50px
  660. .owl-stage-outer
  661. margin: 50px 0
  662. .owl-stage
  663. .owl-item
  664. padding: 0 10px
  665. .item
  666. display: flex
  667. flex-direction: column
  668. filter: grayscale(1)
  669. span
  670. margin: 25px 10px
  671. font-weight: 500
  672. font-size: 18px
  673. .button-equipment
  674. width: 50%
  675. padding: 10px 15px
  676. color: #000
  677. border: 2px solid #000
  678. background-color: rgba(256, 256, 256, .5)
  679. .s-geography
  680. height: 900px
  681. .s-geography-content
  682. padding-left: 300px
  683. color: #fff
  684. font-weight: 500
  685. background-clip: content-box !important
  686. overflow: hidden
  687. .right-pannel
  688. position: absolute
  689. background-color: rgba(#fff, .8)
  690. right: -450px
  691. width: 500px
  692. height: 91%
  693. padding: 60px 50px
  694. color: #000
  695. transition: all 1s ease
  696. z-index: 2
  697. .right-pannel-arrow
  698. position: absolute
  699. right: 450px
  700. left: 0
  701. top: 0
  702. border: none
  703. background-color: #fff
  704. font-family: "minionpro"
  705. height: 50px
  706. width: 50px
  707. font-size: 30px
  708. transition: all 1s ease
  709. span
  710. display: block
  711. transform: scaleX(-1)
  712. .right-pannel-active
  713. right: 0
  714. .right-pannel-arrow
  715. right: 0
  716. left: 450px
  717. transition: all 1s ease
  718. span
  719. transform: scaleX(1)
  720.  
  721. g
  722. width: 1620px
  723. .text
  724. position: absolute
  725. margin-left: 150px
  726. margin-top: 40px
  727. width: 35%
  728. p
  729. font-size: 12px
  730. width: 100%
  731. span
  732. font-size: 16px
  733. ul
  734. padding-left: 0
  735. li
  736. display: inline-block
  737. margin-right: 40px
  738. .red
  739. color: $accent
  740. font-size: 48px
  741.  
  742. .s-projects
  743. .s-projects-content
  744. margin-left: 300px
  745. .top-pannel
  746. display: block
  747. width: 100%
  748. height: 70px
  749. background-color: #373737
  750. padding: 20px 150px
  751. span
  752. color: #fff
  753. font-size: 14px
  754. font-weight: 500
  755. margin-left: 10px
  756. li
  757. display: inline-block
  758. color: #fff
  759. font-size: 14px
  760. font-weight: 500
  761. margin-left: 10px
  762. a
  763. img
  764. height: 20px
  765. width: auto
  766. filter: invert(.9)
  767. .center
  768. display: inline-block
  769. width: 400px
  770. margin: auto 50%
  771. position: relative
  772. left: -179px
  773. top: -32px
  774. select
  775. background-color: lighten(#373737, 10%)
  776. border: none
  777. height: 40px
  778. width: 200px
  779. padding: 5px 10px
  780. color: #fff
  781. outline: none
  782.  
  783.  
  784. .carousel-1
  785. padding: 0
  786. .carousel
  787. .carousel-control-prev
  788. left: -5%
  789. height: 100px
  790. margin: auto 0
  791. .carousel-control-prev-icon
  792. background-image: url(../img/projects/arrow-prev.png)
  793. width: 24px
  794. height: 72px
  795. .carousel-control-next
  796. right: -5%
  797. height: 100px
  798. margin: auto 0
  799. .carousel-control-next-icon
  800. background-image: url(../img/projects/arrow-next.png)
  801. width: 24px
  802. height: 72px
  803. .item-top
  804. display: flex
  805. flex-wrap: nowrap
  806. height: 50%
  807. width: 100%
  808. background-color: #e6e6e6
  809. .left
  810. width: 33%
  811. padding: 50px 100px
  812. p
  813. font-size: 36px
  814. margin: 50px 0
  815. .center
  816. width: 33%
  817. padding: 10px 0
  818. ul
  819. list-style-type: none
  820. li
  821. display: flex
  822. flex-wrap: nowrap
  823. margin: 20px 0
  824. .column-1
  825. width: 40%
  826. padding: 0
  827. font-weight: 600
  828. font-size: 14px
  829. .column-2
  830. width: 56%
  831. padding: 0
  832. font-size: 14px
  833. .right
  834. width: 32%
  835. height: 100%
  836. filter: grayscale(1)
  837. .item-bottom
  838. height: 50%
  839. width: 100%
  840. display: flex
  841. flex-wrap: nowrap
  842. background-color: #c3c3c3
  843. .left
  844. width: 33%
  845. padding: 50px 100px
  846. p
  847. font-size: 36px
  848. margin: 50px 0
  849. .center
  850. width: 33%
  851. padding: 10px 0
  852. ul
  853. list-style-type: none
  854. li
  855. display: flex
  856. flex-wrap: nowrap
  857. margin: 20px 0
  858. .column-1
  859. width: 40%
  860. padding: 0
  861. font-weight: 600
  862. font-size: 14px
  863. .column-2
  864. width: 56%
  865. padding: 0
  866. font-size: 14px
  867. .right
  868. width: 32%
  869. height: 100%
  870. filter: grayscale(1)
  871.  
  872.  
  873. .carousel-2
  874. background: #000
  875. .carousel
  876. width: 80%
  877. margin: auto
  878. .carousel-control-prev
  879. left: -15%
  880. .carousel-control-prev-icon
  881. background-image: url(../img/projects/arrow-prev.png)
  882. width: 24px
  883. height: 72px
  884. .carousel-control-next
  885. right: -15%
  886. .carousel-control-next-icon
  887. background-image: url(../img/projects/arrow-next.png)
  888. width: 24px
  889. height: 72px
  890. .carousel-inner
  891. .carousel-item
  892. margin: auto
  893. height: 800px
  894. .item-photo-1, .item-photo-3, .item-photo-4, .item-photo-5, .item-photo-6
  895. filter: grayscale(1)
  896. .item-photo
  897. display: inline-block
  898. width: 33%
  899. overflow: hidden
  900. height: 50%
  901. margin: -4px -2px
  902. .item-photo-2
  903. display: inline-block
  904. width: 33%
  905. .item-photo-content-2
  906. position: absolute
  907. height: 50%
  908. width: 33%
  909. top: 0
  910. padding: 3%
  911. ul
  912. position: relative
  913. background-color: rgba(#000, .5)
  914. height: 100%
  915. color: #fff
  916. list-style-type: none
  917. font-size: 12px
  918. font-weight: 500
  919. padding: 20px 30px
  920. li
  921. margin: 10px 10px
  922. .content-1
  923. top: 10px
  924. .content-2
  925. font-size: 20px
  926. margin-bottom: 10%
  927. margin-top: 10%
  928.  
  929. .s-client
  930. overflow: hidden
  931. .s-client-content
  932. margin-left: 300px
  933. display: flex
  934. flex-wrap: nowrap
  935. .left-col
  936. background-color: #e6e6e6
  937. width: 50%
  938. height: auto
  939. padding: 3% 5%
  940. .headline
  941. font-size: 36px
  942. padding-left: 10%
  943. font-weight: 500
  944. .labels
  945. display: flex
  946. flex-wrap: wrap
  947. padding-top: 20px
  948. filter: grayscale(1)
  949. .item
  950. height: 100px
  951. width: 200px
  952. align-content: center
  953. display: flex
  954. flex-flow: row wrap
  955. img
  956. margin: auto
  957. display: block
  958. .right-col
  959. background-color: #373737
  960. width: 50%
  961. height: auto
  962. color: #fff
  963. font-size: 36px
  964. font-weight: 500
  965. padding: 3% 20px 3% 70px
  966. overflow: visible
  967. .reviews
  968. display: flex
  969. flex-wrap: wrap
  970. height: 730px
  971. padding: 10% 50px
  972. .reviews-item
  973. display: flex
  974. margin: 5px 10px
  975. overflow-x: visible
  976. height: 113px
  977. transition: order 0s linear
  978. .text
  979. display: none
  980. font-size: 12px
  981. transition: display 1s linear
  982. width: 430px
  983. img
  984. height: 113px
  985. width: 80px
  986. overflow: visible
  987. transition: all 0s linear
  988. .reviews-item-active
  989. display: flex
  990. flex-wrap: nowrap
  991. height: 100%
  992. width: 100%
  993. order: -1
  994. margin-left: 0
  995. margin-bottom: 200px
  996. transition: order 0s linear
  997. img
  998. height: 470px
  999. width: 333px
  1000. margin-left: -120px
  1001. height: 470px
  1002. transition: all .5s linear
  1003. .text
  1004. display: block
  1005. padding-left: 30px
  1006. span
  1007. font-size: 14px
  1008. margin-bottom: 20px
  1009. .last
  1010. font-size: 10px
  1011. margin-top: 30px
  1012. .first
  1013. margin-top: 50px
  1014.  
  1015.  
  1016. .s-awards
  1017. .s-awards-content
  1018. margin-left: 300px
  1019. height: 760px
  1020. display: flex
  1021. flex-wrap: nowrap
  1022. .left-col
  1023. height: 100%
  1024. width: 50%
  1025. text-align: center
  1026. .top
  1027. background-image: url(../img/awards/bg-1.png)
  1028. padding-top: 30px
  1029. text-align: center
  1030. height: 50%
  1031. width: 100%
  1032. background-position: bottom right
  1033. font-size: 36px
  1034. font-weight: 500
  1035. filter: grayscale(1)
  1036. .bottom
  1037. height: 50%
  1038. width: 100%
  1039. display: flex
  1040. flex-wrap: nowrap
  1041. .right
  1042. width: 50%
  1043. height: 100%
  1044. background-image: url(../img/awards/bg-4.png)
  1045. filter: grayscale(1)
  1046. background-position: bottom center
  1047. .left
  1048. width: 50%
  1049. height: 100%
  1050. .bottom-photo
  1051. filter: grayscale(1)
  1052. .top-photo
  1053. background-image: url(../img/awards/bg-2.png)
  1054. height: 50%
  1055. width: 100%
  1056. padding: 20px
  1057. filter: grayscale(1)
  1058. &:focus
  1059. filter: grayscale(0)
  1060. .content
  1061. filter: grayscale(0)
  1062. display: block
  1063. background-color: rgba($accent, .7)
  1064. height: 100%
  1065. width: 100%
  1066. color: #fff
  1067. font-size: 14px
  1068. font-weight: 500
  1069. padding: 25px
  1070. .first
  1071. font-size: 11px
  1072. &:hover
  1073. filter: grayscale(0)
  1074. .content
  1075. display: block
  1076. background-color: rgba($accent, .7)
  1077. height: 100%
  1078. width: 100%
  1079. color: #fff
  1080. font-size: 14px
  1081. font-weight: 500
  1082. padding: 25px
  1083. .first
  1084. font-size: 11px
  1085. .content
  1086. display: none
  1087. .bottom-photo
  1088. background-image: url(../img/awards/bg-3.png)
  1089. width: 100%
  1090. height: 50%
  1091. .button-awards
  1092. position: relative
  1093. bottom: 100px
  1094. background-color: rgba(#fff, .5)
  1095. border: 2px solid #000
  1096. color: #000
  1097. .right-col
  1098. width: 50%
  1099. height: 100%
  1100. background-color: #c3c3c3
  1101. .top
  1102. width: 100%
  1103. height: 25%
  1104. text-align: center
  1105. padding-top: 30px
  1106. font-size: 36px
  1107. font-weight: 500
  1108. .middle
  1109. height: 50%
  1110. width: 100%
  1111. background-color: #e6e6e6
  1112. .owl-carousel
  1113. height: 100%
  1114. .owl-stage-outer
  1115. height: 100%
  1116. .owl-stage
  1117. height: 100%
  1118. .owl-item
  1119. height: 100%
  1120. width: auto
  1121. .owl-item-photo
  1122. height: 100%
  1123. img
  1124. height: 100%
  1125. width: 400px
  1126. margin: 0 auto
  1127. filter: grayscale(1)
  1128.  
  1129.  
  1130. .owl-nav
  1131. position: absolute
  1132. bottom: 40%
  1133. width: 100%
  1134. .owl-prev, .owl-next
  1135. position: relative
  1136. img
  1137. height: 50px
  1138. width: auto
  1139. .owl-next
  1140. position: relative
  1141. left: 92%
  1142. .owl-prev
  1143. left: 5%
  1144. .bottom
  1145. padding: 3% 10%
  1146. text-align: center
  1147. .button-awards-2
  1148. position: relative
  1149. top: 26px
  1150. background-color: rgba(#fff, .5)
  1151. border: 2px solid #000
  1152. color: #000
  1153. p
  1154. font-weight: 500
  1155.  
  1156. footer
  1157. margin-left: 300px
  1158. display: flex
  1159. flex-wrap: nowrap
  1160. background-color: #373737
  1161. font-size: 12px
  1162. height: 180px
  1163. color: #fff
  1164. .left-col
  1165. width: 50%
  1166. display: flex
  1167. flex-wrap: nowrap
  1168. padding: 2% 0 2% 7%
  1169. justify-content: flex-end
  1170. .active
  1171. background-color: $accent
  1172. padding: 2px 10px
  1173. .column
  1174. width: 25%
  1175. display: flex
  1176. flex-direction: column
  1177. a
  1178. display: block
  1179. color: #fff
  1180. margin-top: 30px
  1181. .right-col
  1182. width: 50%
  1183. padding: 2% 7% 2%
  1184. .column
  1185. display: inline-block
  1186. width: 49%
  1187. padding: 0 5% 0 5%
  1188. margin-top: 30px
  1189.  
  1190. .s-team
  1191. .content
  1192. margin-left: 300px
  1193. height: 100%
  1194. background-color: #e6e6e6
  1195. .r-tabs-team
  1196. height: 100%
  1197. width: 100%
  1198. .r-tabs-nav
  1199. height: 150px
  1200. .r-tabs-tab
  1201. height: 100%
  1202. width: 50%
  1203. margin-left: -2px
  1204. text-align: center
  1205. background-color: #c3c3c3
  1206. a
  1207. display: block
  1208. width: 100%
  1209. height: 100%
  1210. margin: auto
  1211. line-height: 9
  1212. font-size: 18px
  1213. color: #000
  1214. font-weight: 500
  1215. text-decoration: none
  1216. .r-tabs-state-active
  1217. background-color: #e6e6e6
  1218. .r-tabs-panel
  1219. padding: 0
  1220. .boss, .worker
  1221. display: inline-flex
  1222. height: 400px
  1223. width: 50%
  1224. margin-left: -2px
  1225. background-position: bottom left
  1226. background-repeat: no-repeat
  1227. background-size: cover
  1228. .right
  1229. height: 100%
  1230. width: 50%
  1231. margin-left: 50%
  1232. background-color: rgba(#fff, .7)
  1233. text-align: right
  1234. span
  1235. display: block
  1236. margin-top: 20px
  1237. margin-right: 10px
  1238. font-weight: 500
  1239. .text
  1240. position: relative
  1241. top: 50%
  1242. padding: 20px 0 20px 50px
  1243. width: 100%
  1244. height: 50%
  1245. font-size: 16px
  1246. text-align: left
  1247. .title
  1248. padding: 5px 10px
  1249. background-color: $accent
  1250. color: #fff
  1251. font-weight: 500
  1252. width: 250px
  1253. margin-top: 20px
  1254. font-size: 12px
  1255. a
  1256. color: #000
  1257. font-family: "minionpro"
  1258. display: block
  1259. margin-top: 20px
  1260. font-size: 14px
  1261. .worker
  1262. background-size: contain
  1263. .right
  1264. .text
  1265. top: 38%
  1266. .bottom
  1267. height: 250px
  1268. width: 100%
  1269. display: flex
  1270. flex-wrap: nowrap
  1271. .left
  1272. width: 49%
  1273. padding: 6%
  1274. font-size: 18px
  1275. font-weight: 500
  1276. strong
  1277. font-size: 30px
  1278. .right
  1279. width: 49%
  1280. padding: 1% 4%
  1281. form
  1282. height: 100%
  1283. width: 100%
  1284. display: flex
  1285. flex-wrap: nowrap
  1286. .first
  1287. width: 50%
  1288. input
  1289. display: block
  1290. width: 95%
  1291. margin-top: 20px
  1292. border: none
  1293. color: #000
  1294. .last-input
  1295. height: 80px
  1296. .last
  1297. width: 50%
  1298. padding-top: 3%
  1299. button
  1300. margin-top: 30px
  1301. width: 100%
  1302. height: 70px
  1303. border: none
  1304. .s-persona
  1305. .s-persona-content
  1306. background-color: #e6e6e6
  1307. margin-left: 300px
  1308. display: flex
  1309. flex-wrap: nowrap
  1310. .left
  1311. padding: 3% 5%
  1312. width: 50%
  1313. .title
  1314. font-size: 18px
  1315. font-weight: 500
  1316. strong
  1317. font-size: 36px
  1318. p
  1319. margin: 10px
  1320. font-size: 12px
  1321. font-weight: 500
  1322. .first
  1323. margin-top: 50px
  1324. a
  1325. display: block
  1326. margin-top: 100px
  1327. color: $accent
  1328. font-weight: 500
  1329. font-family: "minionpro"
  1330. .right
  1331.  
  1332.  
  1333. .s-interesting
  1334. .s-interesting-content
  1335. padding-left: 300px
  1336. width: 100%
  1337. height: 920px
  1338. background-position: top right
  1339. .headline
  1340. height: 160px
  1341. padding: 5% 10%
  1342. font-size: 36px
  1343. font-weight: 500
  1344. color: #373737
  1345. .space
  1346. color: $accent
  1347. .facts
  1348. display: flex
  1349. flex-wrap: wrap
  1350. width:
  1351. font-size: 14px
  1352. .item
  1353. width: 25%
  1354. height: 200px
  1355. color: #000
  1356. font-weight: 500
  1357. background-color: rgba(#fff, .8)
  1358. padding-left: 5%
  1359. text-align: right
  1360. .red
  1361. height: 20px
  1362. width: 20px
  1363. background-color: $accent
  1364. p
  1365. max-width: 250px
  1366. margin-top: 20px
  1367. text-align: left
  1368. .red-text
  1369. font-size: 30px
  1370. color: $accent
  1371. font-weight: 500
  1372. text-align: left
  1373. margin-top: 60px
  1374. .arrow
  1375. position: relative
  1376. right: 3%
  1377. .item-1
  1378. background-color: rgba(#fff, .9)
  1379. .item-2
  1380. background-color: rgba(#fff, .8)
  1381. .item-3
  1382. background-color: rgba(#fff, .7)
  1383. .item-4
  1384. background-color: rgba(#fff, .6)
  1385. .arrow
  1386. top: 48px
  1387. .item-5
  1388. background-color: rgba(#fff, .8)
  1389. .item-6
  1390. background-color: rgba(#fff, .7)
  1391. .arrow
  1392. top: 0
  1393. .item-7
  1394. background-color: rgba(#fff, .6)
  1395. .red-text
  1396. margin-top: 0
  1397. .arrow
  1398. bottom: 3px
  1399. .item-8
  1400. background-color: rgba(#fff, .5)
  1401. .red-text
  1402. margin-top: 35px
  1403. .item-9
  1404. background-color: rgba(#fff, .6)
  1405. .item-10
  1406. background-color: #e6e6e6
  1407. padding-top: 30px
  1408. .arrow
  1409. top: 15px
  1410. .item-11
  1411. background-color: #373737
  1412. color: #fff
  1413. padding-top: 30px
  1414. .arrow
  1415. top: 15px
  1416. .item-12
  1417. background-color: $accent
  1418. color: #fff
  1419. padding-top: 30px
  1420. .arrow
  1421. top: 38px
  1422.  
  1423.  
  1424. .s-steps
  1425. .s-steps-content
  1426. padding-left: 300px
  1427. height: 920px
  1428. background-position: right bottom
  1429. background-size: cover
  1430. background-repeat: no-repeat
  1431. .headline
  1432. font-size: 36px
  1433. font-weight: 500
  1434. padding: 3% 0 3% 7%
  1435. .space
  1436. color: $accent
  1437. .steps
  1438. display: flex
  1439. flex-wrap: wrap
  1440. height: 580px
  1441. padding-left: 7%
  1442. padding-right: 7%
  1443. .step
  1444. width: 33%
  1445. display: flex
  1446. flex-wrap: nowrap
  1447. background-color: rgba(#fff, .4)
  1448. height: 290px
  1449. overflow: hidden
  1450. .triangle
  1451. position: relative
  1452. height: 200px
  1453. width: 200px
  1454. background-color: #373737
  1455. transform: rotate(45deg)
  1456. right: 112px
  1457. top: 44px
  1458. text-align: right
  1459. .year
  1460. position: relative
  1461. color: #fff
  1462. transform: rotate(-45deg)
  1463. font-size: 60px
  1464. font-weight: 500
  1465. top: 65px
  1466. right: 21px
  1467. .first-triangle
  1468. background-color: $accent
  1469. .text
  1470. width: 200px
  1471. font-size: 16px
  1472. font-weight: 500
  1473. position: relative
  1474. margin: auto 0
  1475. .step-2
  1476. background-color: rgba(#fff, .8)
  1477. .step-3
  1478. background-color: rgba(#fff, .4)
  1479. .step-4
  1480. background-color: rgba(#fff, .8)
  1481. .step-6
  1482. background-color: $accent
  1483. padding: 3% 4%
  1484. .text
  1485. margin-left: 20px
  1486. font-size: 18px
  1487. font-weight: bold
  1488. color: #fff
  1489.  
  1490. .s-methods
  1491. .s-methods-content
  1492. margin-left: 300px
  1493. display: flex
  1494. flex-wrap: nowrap
  1495. padding: 5%
  1496. height: 920px
  1497. background-position: bottom right
  1498. background-size: cover
  1499. .headline
  1500. width: 300px
  1501. color: #fff
  1502. font-weight: 500
  1503. .methods
  1504. display: flex
  1505. flex-wrap: wrap
  1506. width: 800px
  1507. .method
  1508. background-color: rgba(#fff, .8)
  1509. height: 370px
  1510. width: 340px
  1511. margin: 10px
  1512. padding: 50px
  1513. display: flex
  1514. flex-direction: column
  1515. text-align: center
  1516. img
  1517. margin: 0 auto
  1518. height: 140px
  1519. width: auto
  1520. span
  1521. color: #000
  1522. font-weight: 500
  1523. font-size: 20px
  1524. margin-top: 20px
  1525.  
  1526. .s-contacts
  1527. .s-contacts-content
  1528. padding-left: 300px
  1529. .maps
  1530. .carousel
  1531. .carousel-inner
  1532. filter: grayscale(1)
  1533. height: 550px
  1534. .ymaps-2-1-71-svg-icon
  1535. filter: grayscale(0)
  1536. .carousel-indicators
  1537. top: 0
  1538. flex-direction: column
  1539. width: 200px
  1540. height: 450px
  1541. margin: auto 15%
  1542. li
  1543. display: block
  1544. width: 100%
  1545. height: auto
  1546. min-height: 40px
  1547. font-size: 24px
  1548. font-weight: 500
  1549. text-indent: 0
  1550. background: none
  1551. .indicator
  1552. .text
  1553. display: none
  1554. font-size: 12px
  1555. .active
  1556. .indicator
  1557. .text
  1558. display: block
  1559. .bottom
  1560. height: 250px
  1561. width: 100%
  1562. display: flex
  1563. flex-wrap: nowrap
  1564. background-color: #c3c3c3
  1565. .left
  1566. width: 49%
  1567. margin: auto 6%
  1568. font-size: 18px
  1569. font-weight: 500
  1570. strong
  1571. font-size: 30px
  1572. .right
  1573. width: 49%
  1574. padding: 1% 4%
  1575. form
  1576. height: 100%
  1577. width: 100%
  1578. display: flex
  1579. flex-wrap: nowrap
  1580. .first
  1581. width: 50%
  1582. input, textarea
  1583. display: block
  1584. width: 95%
  1585. margin-top: 20px
  1586. border: none
  1587. color: #000
  1588.  
  1589. .last
  1590. padding-top: 3%
  1591. button
  1592. margin-top: 30px
  1593. width: 100%
  1594. height: 70px
  1595. border: none
  1596.  
  1597.  
  1598. .s-techno-blog
  1599. background-color: #e6e6e6
  1600. .techno-blog
  1601. padding-left: 300px
  1602. background-color: #e6e6e6
  1603. .r-tabs
  1604. padding: 0
  1605. font-weight: 500
  1606.  
  1607. .r-tabs-nav
  1608. .r-tabs-tab
  1609. width: 19.9%
  1610. height: 150px
  1611. background-color: #c3c3c3
  1612. margin-left: -4px
  1613. border-right: 1px #e6e6e6 solid
  1614. a
  1615. color: #000
  1616. text-decoration: none
  1617. width: 100%
  1618. height: 100%
  1619. display: block
  1620. font-size: 18px
  1621. text-align: center
  1622. padding: 61px 0
  1623. .r-tabs-state-active
  1624. background-color: #e6e6e6
  1625. .r-tabs-panel
  1626. padding: 0
  1627. .top
  1628. display: flex
  1629. flex-wrap: wrap
  1630. justify-content: center
  1631. padding: 20px
  1632. .item
  1633. height: 530px
  1634. width: 430px
  1635. background-color: #fff
  1636. margin: 20px
  1637. img
  1638. filter: grayscale(1)
  1639. width: 100%
  1640. height: 250px
  1641. display: block
  1642.  
  1643. p
  1644. font-size: 14px
  1645. display: block
  1646. margin: 25px 45px
  1647. .headline
  1648. font-size: 18px
  1649. font-weight: 600
  1650. a
  1651. display: block
  1652. margin: 25px 45px
  1653. color: $accent
  1654. font-family: "minionpro"
  1655. .middle
  1656. display: flex
  1657. flex-wrap: nowrap
  1658. height: 200px
  1659. background-color: #c3c3c3
  1660. padding: 45px 10%
  1661. p
  1662. font-size: 18px
  1663. width: 30%
  1664. strong
  1665. font-size: 30px
  1666. form
  1667. position: relative
  1668. margin: auto 30px
  1669. width: 70%
  1670. input
  1671. height: 51px
  1672. width: 30%
  1673. border: none
  1674. margin-left: 15px
  1675. padding: 0 10px
  1676.  
  1677. .button
  1678. margin-left: 15px
  1679. bottom: 2px
  1680. .bottom
  1681. display: flex
  1682. flex-wrap: wrap
  1683. justify-content: center
  1684. padding: 20px
  1685. .hidden
  1686. display: none
  1687.  
  1688. .button-white
  1689. background-color: rgba(#fff, .8)
  1690. color: #000
  1691. border: 1px solid #000
  1692. display: block
  1693. margin: 0 auto
  1694. bottom: 15px
  1695.  
  1696. .s-techno-blog-news
  1697. .s-techno-blog-news-content
  1698. padding-left: 300px
  1699. display: flex
  1700. height: auto
  1701. .left-col
  1702. background-color: #e6e6e6
  1703. padding: 4% 7%
  1704. width: 75%
  1705. .path
  1706. color: $accent
  1707. font-weight: 500
  1708. a
  1709. color: #c3c3c3
  1710. margin: 0 10px
  1711. .headline
  1712. font-size: 36px
  1713. color: #000
  1714. font-weight: 500
  1715. .bottom-space
  1716. color: $accent
  1717. p
  1718. font-size: 14px
  1719. margin: 30px 0
  1720. font-weight: 500
  1721. img
  1722. width: 100%
  1723. height: auto
  1724.  
  1725. .right-col
  1726. background-color: #373737
  1727. right: 0
  1728. width: 25%
  1729. color: #fff
  1730. height: auto
  1731. padding: 5% 3%
  1732. text-transform: uppercase
  1733. .headline
  1734. margin-left: 20px
  1735. font-weight: 500
  1736. font-size: 20px
  1737. ul
  1738. font-weight: 500
  1739. list-style-type: none
  1740. font-size: 14px
  1741. li
  1742. text-transform: none
  1743. margin-top: 20px
  1744. a
  1745. color: #fff
  1746. padding: 5px 10px
  1747. .active
  1748. background-color: $accent
  1749. .form
  1750. margin-left: 300px
  1751. display: flex
  1752. flex-wrap: nowrap
  1753. background-color: #c3c3c3
  1754. padding: 45px 5%
  1755. p
  1756. font-size: 18px
  1757. width: 33%
  1758. font-weight: 500
  1759. strong
  1760. font-size: 30px
  1761. form
  1762. position: relative
  1763. margin: auto 30px
  1764. width: 70%
  1765. input
  1766. height: 51px
  1767. width: 30%
  1768. border: none
  1769. margin-left: 15px
  1770. padding: 0 10px
  1771. .button
  1772. margin-left: 15px
  1773. bottom: 2px
  1774. .s-form
  1775. .s-form-content
  1776. margin-left: 300px
  1777. font-weight: 500
  1778. padding: 4%
  1779. background-color: #e6e6e6
  1780. p
  1781. font-size: 36px
  1782. .bottom-space
  1783. color: $accent
  1784. form
  1785. input
  1786. width: 390px
  1787. height: 50px
  1788. margin: 30px 10px
  1789. border-right: none
  1790. border-left: none
  1791. border-top: none
  1792. border-bottom: 2px solid rgba(#000, .3)
  1793. background-color: #e6e6e6
  1794. .button
  1795. display: block
  1796. border: none
  1797. margin-left: 10px
  1798. margin-top: 50px
  1799. textarea
  1800. margin-left: 10px
  1801. margin-top: 30px
  1802. border: none
  1803.  
  1804. .s-objects-1
  1805. .s-objects-1-content
  1806. padding-left: 300px
  1807. display: flex
  1808. flex-wrap: nowrap
  1809. height: 100%
  1810. background-color: #e6e6e6
  1811. .left
  1812. width: 50%
  1813. height: 100%
  1814. background-color: #e6e6e6
  1815. .content
  1816. padding: 5% 10%
  1817. .path
  1818. color: $accent
  1819. margin-left: -10px
  1820. a
  1821. color: #c3c3c3
  1822. margin: 0 10px
  1823. span
  1824. margin: 30px 0
  1825. display: block
  1826. p
  1827. font-size: 36px
  1828. ul
  1829. padding: 0
  1830. list-style-type: none
  1831. li
  1832. margin-top: 15px
  1833. display: flex
  1834. flex-wrap: nowrap
  1835. font-size: 14px
  1836. .column-1
  1837. width: 30%
  1838. font-weight: 600
  1839. .column-2
  1840. width: 70%
  1841. .buttons
  1842. height: 100px
  1843. display: flex
  1844. justify-content: space-between
  1845. position: relative
  1846. a
  1847. display: flex
  1848. color: #c6c6c6
  1849. .arrow
  1850. width: 100px
  1851. background-color: #c6c6c6
  1852. color: #fff
  1853. text-align: center
  1854. font-family: "minionpro"
  1855. font-size: 56px
  1856. line-height: 1.9
  1857. span
  1858. margin: auto 0
  1859. margin-left: 15px
  1860. .next-button
  1861. position: relative
  1862. right: 0
  1863. span
  1864. margin-right: 15px
  1865. text-align: right
  1866. .right
  1867. width: 50%
  1868. height: 100%
  1869. background-color: #000
  1870. filter: grayscale(1)
  1871.  
  1872. .s-technology-form
  1873. padding-left: 300px
  1874. width: 100%
  1875. display: flex
  1876. flex-wrap: nowrap
  1877. background-color: #c3c3c3
  1878. .left
  1879. width: 39%
  1880. padding: 1% 6%
  1881. font-weight: 500
  1882. .top
  1883. display: flex
  1884. flex-wrap: nowrap
  1885. font-size: 14px
  1886. filter: grayscale(1)
  1887. .text
  1888. margin: auto 25px
  1889. strong
  1890. font-size: 16px
  1891. .bottom
  1892. width: 90%
  1893. font-size: 14px
  1894. margin-top: 20px
  1895. max-height: 100px
  1896. .right
  1897. width: 59%
  1898. padding: 1% 4%
  1899. form
  1900. height: 100%
  1901. width: 100%
  1902. display: flex
  1903. flex-wrap: nowrap
  1904. .first
  1905. width: 50%
  1906. input, textarea
  1907. display: block
  1908. width: 95%
  1909. margin-top: 20px
  1910. border: none
  1911. color: #000
  1912. .last-input
  1913. height: 80px
  1914. .last
  1915. padding-top: 3%
  1916. button
  1917. margin-top: 30px
  1918. width: 100%
  1919. height: 70px
  1920. border: none
  1921.  
  1922. .technology-hedline
  1923. position: fixed
  1924. height: 175px
  1925. width: 100vw
  1926. top: 0
  1927. z-index: 1101
  1928. .top
  1929. height: 100px
  1930. background-color: $accent
  1931. color: #fff
  1932. padding: 37px 70px
  1933. margin-left: 400px
  1934. ul
  1935. display: flex
  1936. list-style-type: none
  1937. height: 75px
  1938. width: 100%
  1939. padding: 0
  1940. padding-left: 300px
  1941. li
  1942. width: 26%
  1943. height: 100%
  1944. border-right: 1px solid #e6e6e6
  1945. a
  1946. display: flex
  1947. background-color: #c3c3c3
  1948. height: 75px
  1949. width: 100%
  1950. color: #000
  1951. padding: 3px 20px
  1952. img
  1953. height: 70px
  1954. width: auto
  1955. span
  1956. margin: auto 15px
  1957. line-height: 1.4
  1958. .active
  1959. background-color: #e6e6e6
  1960.  
  1961. .s-jet-fixed
  1962. margin-top: 150px
  1963. margin-left: 300px
  1964. background-position: right bottom
  1965. background-size: cover
  1966. padding: 3% 5%
  1967. .headline
  1968. display: flex
  1969. font-size: 36px
  1970. color: #fff
  1971. .bottom-space
  1972. color: $accent
  1973. .middle
  1974. height: 175px
  1975. width: 490px
  1976. margin-top: 70px
  1977. display: flex
  1978. .left
  1979. background-color: #373737
  1980. width: 315px
  1981. color: #fff
  1982. font-size: 19px
  1983. padding: 25px 50px
  1984. .right
  1985. width: 175px
  1986. height: 175px
  1987. background-color: $accent
  1988. img
  1989. display: block
  1990. margin: auto
  1991. padding: 20px 0
  1992. .mouse
  1993. margin-top: 150px
  1994.  
  1995. .s-jet-advantages
  1996. .content
  1997. padding-left: 300px
  1998. .text
  1999. display: flex
  2000. height: 50%
  2001. width: 100%
  2002. .text-1
  2003. height: auto
  2004. width: 50%
  2005. background-color: #c3c3c3
  2006. p
  2007. padding: 40px 90px
  2008. width: 500px
  2009. .items
  2010. display: flex
  2011. flex-wrap: wrap
  2012. width: 530px
  2013. margin-left: -2px
  2014. .item
  2015. width: 50%
  2016. height: 100px
  2017. display: flex
  2018. background-color: $accent
  2019. border: 2px solid #c3c3c3
  2020. font-size: 14px
  2021. color: #fff
  2022. padding: 0 20px
  2023. img
  2024. width: 30%
  2025. margin: auto
  2026. span
  2027. width: 70%
  2028. line-height: 1.4
  2029. margin: auto
  2030. margin-left: 20px
  2031. .text-2
  2032. width: 50%
  2033. background-color: #e6e6e6
  2034. padding: 40px 90px
  2035. p
  2036. font-size: 14px
  2037. width: 60%
  2038. .headline
  2039. font-size: 24px
  2040. .photos
  2041. width: 100%
  2042. display: flex
  2043. filter: grayscale(1)
  2044. img
  2045. width: 50%
  2046. height: 80%
  2047.  
  2048. .s-jet-advantages-2
  2049. padding-left: 300px
  2050. display: flex
  2051. background-color: #373737
  2052. .left-pannel
  2053. height: 100%
  2054. width: 50%
  2055. color: darken(#fff, 10%)
  2056. padding: 50px 100px
  2057. p
  2058. font-size: 14px
  2059. margin-top: 20px
  2060. font-weight: 500
  2061. .headline
  2062. font-size: 24px
  2063. line-height: 1.3
  2064. .right
  2065. height: 100%
  2066. width: 50%
  2067. filter: grayscale(1)
  2068. img
  2069. display: block
  2070. height: 50%
  2071. width: 100%
  2072. .bottom
  2073. display: flex
  2074. width: 100%
  2075. img
  2076. width: 50%
  2077.  
  2078. .s-jet-type
  2079. padding-left: 300px
  2080. display: flex
  2081. .type
  2082. height: 100%
  2083. width: 50%
  2084. .text
  2085. height: 450px
  2086. width: 100%
  2087. background-color: #e6e6e6
  2088. padding: 50px 100px
  2089. .headline
  2090. font-size: 36px
  2091. height: 60px
  2092. p
  2093. font-size: 14px
  2094. height: 130px
  2095. .options
  2096. display: flex
  2097. margin-top: 30px
  2098. .option
  2099. height: 80px
  2100. width: 35%
  2101. border-left: 2px solid rgba(#373737, .3)
  2102. padding-left: 20px
  2103. p
  2104. line-height: 1.2
  2105. height: 30px
  2106. font-weight: 600
  2107. span
  2108. font-size: 24px
  2109. color: $accent
  2110. line-height: 0.8
  2111. margin-top: 25px
  2112. display: block
  2113. img
  2114. display: block
  2115. height: 50%
  2116. width: 100%
  2117. filter: grayscale(1)
  2118. .type-2
  2119. .text
  2120. background-color: #c3c3c3
  2121.  
  2122. .s-jet-stages
  2123. margin-left: 300px
  2124. background-color: #e6e6e6
  2125. padding: 3% 5%
  2126. .headline
  2127. font-size: 36px
  2128. .stages
  2129. display: flex
  2130. filter: grayscale(1)
  2131. .stage
  2132. margin: 25px
  2133. width: 33%
  2134. img
  2135. margin-top: 50px
  2136. width: 100%
  2137. height: auto
  2138.  
  2139.  
  2140.  
  2141.  
  2142.  
  2143.  
  2144. .s-vibro-fixed
  2145. margin-top: 150px
  2146. margin-left: 300px
  2147. background-position: right bottom
  2148. background-size: cover
  2149. padding: 3% 5%
  2150. .headline
  2151. display: flex
  2152. font-size: 36px
  2153. color: #fff
  2154. .bottom-space
  2155. color: $accent
  2156. .middle
  2157. height: 175px
  2158. width: 490px
  2159. margin-top: 70px
  2160. display: flex
  2161. .left
  2162. background-color: #373737
  2163. width: 315px
  2164. color: #fff
  2165. font-size: 19px
  2166. padding: 25px 50px
  2167. .right
  2168. width: 175px
  2169. height: 175px
  2170. background-color: $accent
  2171. img
  2172. display: block
  2173. margin: auto
  2174. padding: 20px 0
  2175. .mouse
  2176. margin-top: 250px
  2177.  
  2178. .s-vibro-advantages
  2179. .content
  2180. padding-left: 300px
  2181. .text
  2182. display: flex
  2183. height: 50%
  2184. width: 100%
  2185. .text-1
  2186. height: auto
  2187. width: 50%
  2188. background-color: #c3c3c3
  2189. p
  2190. padding: 40px 90px
  2191. width: 500px
  2192. .items
  2193. display: flex
  2194. flex-wrap: wrap
  2195. width: 530px
  2196. margin-left: -2px
  2197. .item
  2198. width: 50%
  2199. height: 100px
  2200. display: flex
  2201. background-color: $accent
  2202. border: 2px solid #c3c3c3
  2203. font-size: 14px
  2204. color: #fff
  2205. padding: 0 20px
  2206. img
  2207. width: 30%
  2208. margin: auto
  2209. span
  2210. width: 70%
  2211. line-height: 1.4
  2212. margin: auto
  2213. margin-left: 20px
  2214. .text-2
  2215. width: 50%
  2216. background-color: #e6e6e6
  2217. padding: 40px 90px
  2218. p
  2219. font-size: 14px
  2220. width: 60%
  2221. .headline
  2222. font-size: 24px
  2223. .photos
  2224. width: 100%
  2225. display: flex
  2226. filter: grayscale(1)
  2227. img
  2228. width: 50%
  2229. height: 80%
  2230.  
  2231. .s-vibro-advantages-2
  2232. padding-left: 300px
  2233. display: flex
  2234. background-color: #373737
  2235. .left-pannel
  2236. height: 100%
  2237. width: 50%
  2238. color: darken(#fff, 10%)
  2239. padding: 50px 100px
  2240. p
  2241. font-size: 14px
  2242. margin-top: 20px
  2243. font-weight: 500
  2244. .headline
  2245. font-size: 24px
  2246. line-height: 1.3
  2247. .right
  2248. height: 100%
  2249. width: 50%
  2250. filter: grayscale(1)
  2251. img
  2252. display: block
  2253. height: 50%
  2254. width: 100%
  2255. .bottom
  2256. display: flex
  2257. width: 100%
  2258. img
  2259. width: 50%
  2260.  
  2261. .s-vibro-stages
  2262. margin-left: 300px
  2263. background-color: #e6e6e6
  2264. padding: 3% 5%
  2265. .headline
  2266. font-size: 36px
  2267. .stages
  2268. display: flex
  2269. filter: grayscale(1)
  2270. .stage
  2271. margin: 25px
  2272. width: 33%
  2273. img
  2274. margin-top: 50px
  2275. width: 100%
  2276. height: auto
  2277.  
  2278.  
  2279.  
  2280.  
  2281. .s-injection-fixed
  2282. margin-top: 150px
  2283. margin-left: 300px
  2284. background-position: right bottom
  2285. background-size: cover
  2286. padding: 3% 5%
  2287. .headline
  2288. display: flex
  2289. font-size: 36px
  2290. color: #fff
  2291. .bottom-space
  2292. color: $accent
  2293. .middle
  2294. height: 175px
  2295. width: 490px
  2296. margin-top: 70px
  2297. display: flex
  2298. .left
  2299. background-color: #373737
  2300. width: 315px
  2301. color: #fff
  2302. font-size: 19px
  2303. padding: 25px 50px
  2304. .right
  2305. width: 175px
  2306. height: 175px
  2307. background-color: $accent
  2308. img
  2309. display: block
  2310. margin: auto
  2311. padding: 20px 0
  2312. .mouse
  2313. margin-top: 150px
  2314.  
  2315. .s-injection-advantages
  2316. .content
  2317. padding-left: 300px
  2318. .text
  2319. display: flex
  2320. height: 50%
  2321. width: 100%
  2322. .text-1
  2323. height: auto
  2324. width: 50%
  2325. background-color: #c3c3c3
  2326. p
  2327. padding: 40px 90px
  2328. width: 500px
  2329. .items
  2330. display: flex
  2331. flex-wrap: wrap
  2332. width: 530px
  2333. margin-left: -2px
  2334. .item
  2335. width: 50%
  2336. height: 100px
  2337. display: flex
  2338. background-color: $accent
  2339. border: 2px solid #c3c3c3
  2340. font-size: 14px
  2341. color: #fff
  2342. padding: 0 20px
  2343. img
  2344. width: 30%
  2345. margin: auto
  2346. span
  2347. width: 70%
  2348. line-height: 1.4
  2349. margin: auto
  2350. margin-left: 20px
  2351. .text-2
  2352. width: 50%
  2353. background-color: #e6e6e6
  2354. padding: 40px 90px
  2355. p
  2356. font-size: 14px
  2357. width: 60%
  2358. .headline
  2359. font-size: 24px
  2360. .photos
  2361. width: 100%
  2362. display: flex
  2363. filter: grayscale(1)
  2364. img
  2365. width: 50%
  2366. height: 80%
  2367.  
  2368. .s-injection-advantages-2
  2369. padding-left: 300px
  2370. display: flex
  2371. background-color: #373737
  2372. .left-pannel
  2373. height: 100%
  2374. width: 50%
  2375. color: darken(#fff, 10%)
  2376. padding: 50px 100px
  2377. p
  2378. font-size: 14px
  2379. margin-top: 20px
  2380. font-weight: 500
  2381. .headline
  2382. font-size: 24px
  2383. line-height: 1.3
  2384. .right
  2385. height: 100%
  2386. width: 50%
  2387. filter: grayscale(1)
  2388. img
  2389. display: block
  2390. height: 50%
  2391. width: 100%
  2392. .bottom
  2393. display: flex
  2394. width: 100%
  2395. img
  2396. width: 50%
  2397.  
  2398. .s-injection-type
  2399. padding-left: 300px
  2400. display: flex
  2401. .type
  2402. height: 100%
  2403. width: 50%
  2404. .text
  2405. height: 450px
  2406. width: 100%
  2407. background-color: #e6e6e6
  2408. padding: 50px 100px
  2409. .headline
  2410. font-size: 36px
  2411. line-height: 1.1
  2412. margin-top: 0
  2413. p
  2414. font-size: 14px
  2415. margin-top: 20px
  2416. max-width: 500px
  2417. img
  2418. display: block
  2419. height: 50%
  2420. width: 100%
  2421. filter: grayscale(1)
  2422. .type-2
  2423. .text
  2424. background-color: #c3c3c3
  2425.  
  2426. .s-injection-stages
  2427. margin-left: 300px
  2428. background-color: #e6e6e6
  2429. padding: 3% 5%
  2430. .headline
  2431. font-size: 36px
  2432. .stages
  2433. display: flex
  2434. filter: grayscale(1)
  2435. .stage
  2436. margin: 25px
  2437. margin-bottom: 0
  2438. width: 30%
  2439. p
  2440. margin-bottom: 0
  2441. img
  2442. margin-top: 50px
  2443. width: 100%
  2444. height: auto
  2445. .stage-2
  2446. margin-top: 51px
  2447.  
  2448.  
  2449.  
  2450. .s-engineering-fixed
  2451. margin-top: 150px
  2452. margin-left: 300px
  2453. background-position: right bottom
  2454. background-size: cover
  2455. padding: 3% 5%
  2456. .headline
  2457. display: flex
  2458. font-size: 36px
  2459. color: #fff
  2460. .bottom-space
  2461. color: $accent
  2462. .middle
  2463. height: 175px
  2464. width: 490px
  2465. margin-top: 70px
  2466. display: flex
  2467. .left
  2468. background-color: #373737
  2469. width: 315px
  2470. color: #fff
  2471. font-size: 19px
  2472. padding: 25px 50px
  2473. .right
  2474. width: 175px
  2475. height: 175px
  2476. background-color: $accent
  2477. img
  2478. display: block
  2479. margin: auto
  2480. padding: 20px 0
  2481. .mouse
  2482. margin-top: 150px
  2483.  
  2484. .s-engineering-advantages
  2485. .content
  2486. padding-left: 300px
  2487. .text
  2488. display: flex
  2489. height: 50%
  2490. width: 100%
  2491. .text-1
  2492. height: auto
  2493. width: 50%
  2494. background-color: #c3c3c3
  2495. p
  2496. padding: 40px 90px
  2497. width: 500px
  2498. .items
  2499. display: flex
  2500. flex-wrap: wrap
  2501. width: 530px
  2502. margin-left: -2px
  2503. .item
  2504. width: 50%
  2505. height: 100px
  2506. display: flex
  2507. background-color: $accent
  2508. border: 2px solid #c3c3c3
  2509. font-size: 14px
  2510. color: #fff
  2511. padding: 0 20px
  2512. img
  2513. width: 30%
  2514. margin: auto
  2515. span
  2516. width: 70%
  2517. line-height: 1.4
  2518. margin: auto
  2519. margin-left: 20px
  2520. .text-2
  2521. width: 50%
  2522. background-color: #e6e6e6
  2523. padding: 40px 90px
  2524. p
  2525. font-size: 14px
  2526. width: 60%
  2527. .headline
  2528. font-size: 24px
  2529. .photos
  2530. width: 100%
  2531. display: flex
  2532. filter: grayscale(1)
  2533. img
  2534. width: 50%
  2535. height: 80%
  2536.  
  2537. .s-engineering-advantages-2
  2538. padding-left: 300px
  2539. display: flex
  2540. background-color: #373737
  2541. .left-pannel
  2542. height: 100%
  2543. width: 50%
  2544. color: darken(#fff, 10%)
  2545. padding: 50px 100px
  2546. p
  2547. font-size: 12px
  2548. font-weight: 500
  2549. font-weight: 400
  2550. strong
  2551. font-size: 13px
  2552. .headline
  2553. font-size: 24px
  2554. line-height: 1.3
  2555. font-weight: 500
  2556. .top
  2557. margin-top: 30px
  2558. font-size: 14px
  2559. font-weight: 500
  2560. .right
  2561. height: 100%
  2562. width: 50%
  2563. filter: grayscale(1)
  2564. img
  2565. display: block
  2566. height: 50%
  2567. width: 100%
  2568. .bottom
  2569. display: flex
  2570. width: 100%
  2571. img
  2572. width: 50%
  2573.  
  2574.  
  2575. .s-engineering-type
  2576. padding-left: 300px
  2577. display: flex
  2578. .type
  2579. height: 100%
  2580. width: 50%
  2581. .text
  2582. height: 400px
  2583. width: 100%
  2584. background-color: #e6e6e6
  2585. padding: 50px 100px
  2586. .headline
  2587. font-size: 30px
  2588. height: 60px
  2589. p
  2590. font-size: 14px
  2591. height: 130px
  2592. max-width: 500px
  2593. .options
  2594. display: flex
  2595. margin-top: 30px
  2596. .option
  2597. height: 80px
  2598. width: 35%
  2599. border-left: 2px solid rgba(#373737, .3)
  2600. padding-left: 20px
  2601. p
  2602. line-height: 1.2
  2603. height: 30px
  2604. font-weight: 600
  2605. span
  2606. font-size: 24px
  2607. color: $accent
  2608. img
  2609. display: block
  2610. height: 50%
  2611. width: 100%
  2612. filter: grayscale(1)
  2613. .type-2
  2614. .text
  2615. background-color: #c3c3c3
  2616.  
  2617. .s-engineering-stages
  2618. margin-left: 300px
  2619. background-color: #e6e6e6
  2620. padding: 3% 5%
  2621. .headline
  2622. font-size: 36px
  2623. .stages
  2624. display: flex
  2625. filter: grayscale(1)
  2626. .stage
  2627. margin: 25px
  2628. width: 33%
  2629. img
  2630. margin-top: 50px
  2631. width: 100%
  2632. height: auto
  2633.  
  2634. .s-kind-work
  2635. .s-kind-work-content
  2636. .right-col
  2637. width: 4%
  2638. position: relative
  2639. right: 0
  2640. left: -1px
  2641. background-color: #373737
  2642. padding-bottom: 50px
  2643. transition: all .5s ease
  2644. .right-pannel-arrow-1
  2645. position: relative
  2646. height: 50px
  2647. width: 50px
  2648. color: #fff
  2649. text-align: center
  2650. font-family: "minionpro"
  2651. font-size: 36px
  2652. cursor: pointer
  2653. transform: scaleX(-1)
  2654. transition: all .5s ease
  2655. right: 0
  2656. ul
  2657. padding-left: 150px
  2658. list-style-type: none
  2659. margin-bottom: 40px
  2660. width: 300px
  2661. color: #fff
  2662. text-transform: uppercase
  2663. margin-top: 10px
  2664. .active
  2665. background-color: $accent
  2666. li
  2667. margin-top: 10px
  2668. width: 300px
  2669. padding: 5px 10px
  2670. a
  2671. color: #fff
  2672. text-transform: none
  2673. font-size: 14px
  2674. .active
  2675. .left-col
  2676. width: 75%
  2677. .right-col
  2678. width: 25%
  2679. ul
  2680. padding-left: 50px
  2681. .right-pannel-arrow-1
  2682. transform: scaleX(1)
  2683. right: -87%
  2684. transition: all .5s ease
  2685.  
  2686. .s-gain-foundations-1
  2687. .s-gain-foundations-content-1
  2688. display: flex
  2689. padding-left: 300px
  2690. width: 100%
  2691. transition: all .5s ease
  2692. .left-col
  2693. width: 96%
  2694. transition: all .5s ease
  2695. background-repeat: no-repeat
  2696. background-size: cover
  2697. background-position: bottom right
  2698. .text
  2699. display: flex
  2700. margin: 3% 7% 5%
  2701. font-size: 36px
  2702. color: #fff
  2703. line-height: 1.2
  2704. .botton-space
  2705. color: $accent
  2706. .items
  2707. .item
  2708. display: flex
  2709. width: 270px
  2710. height: 100px
  2711. margin-top: 2px
  2712. background-color: $accent
  2713. color: #fff
  2714. img
  2715. margin: auto 25px
  2716. span
  2717. display: block
  2718. margin: auto 0
  2719. line-height: 1.2
  2720. .mouse
  2721. margin-top: 100px
  2722. margin-left: 50px
  2723. margin-bottom: 20px
  2724. .right-col
  2725. width: 4%
  2726. position: relative
  2727. right: 0
  2728. left: -1px
  2729. background-color: #373737
  2730. padding-bottom: 50px
  2731. transition: all .5s ease
  2732. .right-pannel-arrow-1
  2733. position: relative
  2734. height: 50px
  2735. width: 50px
  2736. color: #fff
  2737. text-align: center
  2738. font-family: "minionpro"
  2739. font-size: 36px
  2740. cursor: pointer
  2741. right: 0
  2742. transform: scaleX(-1)
  2743. transition: right .5s ease
  2744. transition: transform 0s ease
  2745.  
  2746. ul
  2747. padding-left: 150px
  2748. list-style-type: none
  2749. margin-bottom: 40px
  2750. width: 300px
  2751. color: #fff
  2752. text-transform: uppercase
  2753. margin-top: 10px
  2754. .active
  2755. background-color: $accent
  2756. li
  2757. margin-top: 10px
  2758. width: 300px
  2759. padding: 5px 10px
  2760. a
  2761. color: #fff
  2762. text-transform: none
  2763. font-size: 14px
  2764. .active
  2765. .left-col
  2766. width: 75%
  2767. .right-col
  2768. width: 25%
  2769. ul
  2770. padding-left: 50px
  2771. .right-pannel-arrow-1
  2772. transform: scaleX(1)
  2773. right: -87%
  2774. transition: right 0.5s ease
  2775. transition: transform 0s ease
  2776.  
  2777. .s-gain-foundations-steps
  2778. height: 980px
  2779. .left-col
  2780. .headline
  2781. font-size: 36px
  2782. font-weight: 500
  2783. padding: 3% 0 3% 7%
  2784. .space
  2785. color: $accent
  2786. .steps
  2787. display: flex
  2788. flex-wrap: wrap
  2789. padding-left: 7%
  2790. padding-right: 7%
  2791. .step
  2792. width: 50%
  2793. display: flex
  2794. flex-wrap: nowrap
  2795. background-color: rgba(#fff, .4)
  2796. height: 200px
  2797. overflow: hidden
  2798. .triangle
  2799. position: relative
  2800. height: 150px
  2801. width: 150px
  2802. background-color: #373737
  2803. transform: rotate(45deg)
  2804. right: 86px
  2805. top: 25px
  2806. text-align: right
  2807. .year
  2808. position: relative
  2809. color: #fff
  2810. transform: rotate(-45deg)
  2811. font-size: 60px
  2812. font-weight: 500
  2813. top: 36px
  2814. right: 10px
  2815. .first-triangle
  2816. background-color: $accent
  2817. .text
  2818. width: 200px
  2819. font-size: 16px
  2820. font-weight: 500
  2821. position: relative
  2822. margin: auto 0
  2823. color: #000
  2824. .step-2
  2825. background-color: rgba(#fff, .8)
  2826. .step-3
  2827. background-color: rgba(#fff, .8)
  2828. .step-4
  2829. background-color: rgba(#fff, .4)
  2830. .step-6
  2831. background-color: rgba(#fff, .8)
  2832. .button
  2833. height: 50px
  2834. position: relative
  2835. margin: auto
  2836. .s-gain-foundations-2
  2837. .s-gain-foundations-content-2
  2838. display: flex
  2839. padding-left: 300px
  2840. transition: all .5s ease
  2841. .left-col
  2842. width: 96%
  2843. transition: all .5s ease
  2844. background-repeat: no-repeat
  2845. background-size: cover
  2846. background-position: bottom right
  2847. .headline
  2848. font-size: 36px
  2849. font-weight: 500
  2850. padding: 3% 0 3% 7%
  2851. .space
  2852. color: $accent
  2853. .steps
  2854. display: flex
  2855. flex-wrap: wrap
  2856. padding-left: 7%
  2857. padding-right: 7%
  2858. margin-bottom: 30px
  2859. .step
  2860. width: 50%
  2861. display: flex
  2862. flex-wrap: nowrap
  2863. background-color: rgba(#fff, .4)
  2864. height: 200px
  2865. overflow: hidden
  2866. .triangle
  2867. position: relative
  2868. height: 150px
  2869. width: 150px
  2870. background-color: #373737
  2871. transform: rotate(45deg)
  2872. right: 86px
  2873. top: 25px
  2874. text-align: right
  2875. .year
  2876. position: relative
  2877. color: #fff
  2878. transform: rotate(-45deg)
  2879. font-size: 60px
  2880. font-weight: 500
  2881. top: 36px
  2882. right: 10px
  2883. .first-triangle
  2884. background-color: $accent
  2885. .text
  2886. width: 200px
  2887. font-size: 16px
  2888. font-weight: 500
  2889. position: relative
  2890. margin: auto 0
  2891. color: #000
  2892. .step-2
  2893. background-color: rgba(#fff, .8)
  2894. .step-3
  2895. background-color: rgba(#fff, .8)
  2896. .step-4
  2897. background-color: rgba(#fff, .4)
  2898. .step-6
  2899. background-color: rgba(#fff, .8)
  2900. .button
  2901. height: 50px
  2902. position: relative
  2903. margin: auto
  2904. .right-col
  2905. width: 4%
  2906. position: relative
  2907. right: 0
  2908. left: -1px
  2909. background-color: #373737
  2910. padding-bottom: 50px
  2911. transition: all .5s ease
  2912. .right-pannel-arrow-2
  2913. position: relative
  2914. height: 50px
  2915. width: 50px
  2916. color: #fff
  2917. text-align: center
  2918. font-family: "minionpro"
  2919. font-size: 36px
  2920. cursor: pointer
  2921. transform: scaleX(-1)
  2922. right: 0
  2923. transition: right .5s ease
  2924. transition: transform 0s ease
  2925. ul
  2926. padding-left: 150px
  2927. list-style-type: none
  2928. margin-bottom: 40px
  2929. width: 300px
  2930. color: #fff
  2931. text-transform: uppercase
  2932. margin-top: 10px
  2933. .active
  2934. background-color: $accent
  2935. li
  2936. margin-top: 10px
  2937. width: 300px
  2938. padding: 5px 10px
  2939. a
  2940. color: #fff
  2941. text-transform: none
  2942. font-size: 14px
  2943. .active
  2944. .left-col
  2945. width: 75%
  2946. .right-col
  2947. width: 25%
  2948. ul
  2949. padding-left: 50px
  2950. .right-pannel-arrow-2
  2951. transform: scaleX(1)
  2952. right: -87%
  2953. transition: right .5s ease
  2954. transition: transform 0s ease
  2955.  
  2956. .s-gain-foundations-3
  2957. .s-gain-foundations-content-3
  2958. display: flex
  2959. padding-left: 300px
  2960. width: 100%
  2961. transition: all .5s ease
  2962. .left-col
  2963. width: 96%
  2964. transition: all .5s ease
  2965. font-weight: 500
  2966. padding: 4%
  2967. background-color: #e6e6e6
  2968. p
  2969. font-size: 36px
  2970. .bottom-space
  2971. color: $accent
  2972. form
  2973. input
  2974. width: 390px
  2975. height: 50px
  2976. margin: 30px 10px
  2977. border-right: none
  2978. border-left: none
  2979. border-top: none
  2980. border-bottom: 2px solid rgba(#000, .3)
  2981. background-color: #e6e6e6
  2982. .button
  2983. display: block
  2984. border: none
  2985. margin-left: 10px
  2986. margin-top: 50px
  2987. textarea
  2988. margin-left: 10px
  2989. margin-top: 30px
  2990. border: none
  2991. .right-col
  2992. width: 4%
  2993. position: relative
  2994. right: 0
  2995. left: -1px
  2996. background-color: #373737
  2997. padding-bottom: 50px
  2998. transition: all .5s ease
  2999. .right-pannel-arrow-3
  3000. position: relative
  3001. height: 50px
  3002. width: 50px
  3003. color: #fff
  3004. text-align: center
  3005. font-family: "minionpro"
  3006. font-size: 36px
  3007. cursor: pointer
  3008. transform: scaleX(-1)
  3009. right: 0
  3010. transition: right .5s ease
  3011. transition: transform 0s ease
  3012. ul
  3013. padding-left: 150px
  3014. list-style-type: none
  3015. margin-bottom: 40px
  3016. width: 300px
  3017. color: #fff
  3018. text-transform: uppercase
  3019. margin-top: 10px
  3020. .active
  3021. background-color: $accent
  3022. li
  3023. margin-top: 10px
  3024. width: 300px
  3025. padding: 5px 10px
  3026. a
  3027. color: #fff
  3028. text-transform: none
  3029. font-size: 14px
  3030. .active
  3031. .left-col
  3032. width: 75%
  3033. .right-col
  3034. width: 25%
  3035. ul
  3036. padding-left: 50px
  3037. .right-pannel-arrow-3
  3038. transform: scaleX(1)
  3039. right: -87%
  3040. transition: right .5s ease
  3041. transition: transform 0s ease
  3042.  
  3043. .s-gain-foundations-4
  3044. .s-gain-foundations-content-4
  3045. display: flex
  3046. padding-left: 300px
  3047. width: 100%
  3048. transition: all .5s ease
  3049. .left-col
  3050. width: 96%
  3051. transition: all .5s ease
  3052. background-repeat: no-repeat
  3053. background-size: cover
  3054. background-position: bottom right
  3055. .text
  3056. padding: 3% 5%
  3057. .headline
  3058. font-size: 36px
  3059. span
  3060. color: $accent
  3061. .steps
  3062. display: flex
  3063. flex-wrap: wrap
  3064. .step
  3065. height: 290px
  3066. width: 31%
  3067. p
  3068. display: block
  3069. width: 235px
  3070. margin-top: 30px
  3071. position: absolute
  3072. z-index: 1
  3073. margin-left: 100px
  3074. transition: all .5s ease
  3075. .left
  3076. height: 290px
  3077. width: 145px
  3078. position: absolute
  3079. .right
  3080. width: 100%
  3081. height: 100%
  3082. .bottom
  3083. transform: skewX(-30deg)
  3084. height: 50%
  3085. width: 100%
  3086. .top
  3087. transform: skewX(30deg)
  3088. display: flex
  3089. width: 100%
  3090. height: 50%
  3091. .numb
  3092. background-color: $accent
  3093. height: 70px
  3094. width: 50px
  3095. transform: skewX(-50deg)
  3096. margin-left: 50px
  3097. span
  3098. display: block
  3099. transform: skewX(30deg)
  3100. color: #fff
  3101. font-size: 30px
  3102. margin: 10px 15px
  3103. .bottom
  3104. transform: skewX(-30deg)
  3105. height: 50%
  3106. width: 100%
  3107. .step-1
  3108. display: flex
  3109. p
  3110. display: block
  3111. color: #fff
  3112. width: 150px
  3113. margin-top: 55px
  3114. .left
  3115. background-color: #727272
  3116. .top
  3117. background-color: #727272
  3118. span
  3119. display: block
  3120. color: #fff
  3121. margin-left: 70px
  3122. margin-top: 100px
  3123. .bottom
  3124. background-color: #727272
  3125. .step-2
  3126. .top
  3127. background-color: rgba(#c7c7c7, .8)
  3128. .bottom
  3129. background-color: rgba(#c7c7c7, .8)
  3130. .step-3
  3131. .top
  3132. background-color: rgba(#dadada, .8)
  3133. .bottom
  3134. background-color: rgba(#dadada, .8)
  3135. .step-4
  3136. .left
  3137. background-color: #c7c7c7
  3138. .top
  3139. background-color: #c7c7c7
  3140. .bottom
  3141. background-color: #c7c7c7
  3142. .step-5
  3143. .top
  3144. background-color: rgba(#dadada, .8)
  3145. .bottom
  3146. background-color: rgba(#dadada, .8)
  3147. .step-6
  3148. .top
  3149. background-color: rgba(#c7c7c7, .8)
  3150. .bottom
  3151. background-color: rgba(#c7c7c7, .8)
  3152. img
  3153. margin-left: 50px
  3154. margin-top: 25px
  3155. margin-bottom: 20px
  3156. .right-col
  3157. width: 4%
  3158. position: relative
  3159. right: 0
  3160. left: -1px
  3161. background-color: #373737
  3162. padding-bottom: 50px
  3163. transition: all .5s ease
  3164. .right-pannel-arrow-4
  3165. position: relative
  3166. height: 50px
  3167. width: 50px
  3168. color: #fff
  3169. text-align: center
  3170. font-family: "minionpro"
  3171. font-size: 36px
  3172. cursor: pointer
  3173. transform: scaleX(-1)
  3174. right: 0
  3175. transition: right .5s ease
  3176. transition: transform 0s ease
  3177. ul
  3178. padding-left: 150px
  3179. list-style-type: none
  3180. margin-bottom: 40px
  3181. width: 300px
  3182. color: #fff
  3183. text-transform: uppercase
  3184. margin-top: 10px
  3185. .active
  3186. background-color: $accent
  3187. li
  3188. margin-top: 10px
  3189. width: 300px
  3190. padding: 5px 10px
  3191. a
  3192. color: #fff
  3193. text-transform: none
  3194. font-size: 14px
  3195. .active
  3196. .left-col
  3197. width: 75%
  3198. .right-col
  3199. width: 25%
  3200. ul
  3201. padding-left: 50px
  3202. .right-pannel-arrow-4
  3203. transform: scaleX(1)
  3204. right: -87%
  3205. transition: right .5s ease
  3206. transition: transform 0s ease
  3207.  
  3208.  
  3209. .s-gain-foundations-5
  3210. .s-gain-foundations-content-5
  3211. display: flex
  3212. padding-left: 300px
  3213. width: 100%
  3214. transition: all .5s ease
  3215. .left-col
  3216. width: 96%
  3217. transition: all .5s ease
  3218. background-color: #e6e6e6
  3219. .button
  3220. display: block
  3221. width: 172px
  3222. margin-top: -70px
  3223. margin-bottom: 15px
  3224. margin-left: 50%
  3225. left: -86px
  3226. background-color: rgba(#fff, .5)
  3227. border: 2px solid #000
  3228. .headline
  3229. padding: 50px 70px
  3230. font-size: 36px
  3231. display: flex
  3232. .bottom-space
  3233. color: $accent
  3234. p
  3235. padding-left: 70px
  3236. max-width: 1200px
  3237. .types
  3238. display: flex
  3239. .type
  3240. height: 100%
  3241. width: 50%
  3242. .text
  3243. width: 100%
  3244. padding: 10px 70px
  3245. p
  3246. padding: 0
  3247. img
  3248. display: block
  3249. height: 460px
  3250. width: 100%
  3251. filter: grayscale(1)
  3252. .right-col
  3253. width: 4%
  3254. position: relative
  3255. right: 0
  3256. left: -1px
  3257. background-color: #373737
  3258. padding-bottom: 50px
  3259. transition: all .5s ease
  3260. .right-pannel-arrow-5
  3261. position: relative
  3262. height: 50px
  3263. width: 50px
  3264. color: #fff
  3265. text-align: center
  3266. font-family: "minionpro"
  3267. font-size: 36px
  3268. cursor: pointer
  3269. transform: scaleX(-1)
  3270. right: 0
  3271. transition: right .5s ease
  3272. transition: transform 0s ease
  3273. ul
  3274. padding-left: 150px
  3275. list-style-type: none
  3276. margin-bottom: 40px
  3277. width: 300px
  3278. color: #fff
  3279. text-transform: uppercase
  3280. margin-top: 10px
  3281. .active
  3282. background-color: $accent
  3283. li
  3284. margin-top: 10px
  3285. width: 300px
  3286. padding: 5px 10px
  3287. a
  3288. color: #fff
  3289. text-transform: none
  3290. font-size: 14px
  3291. .active
  3292. .left-col
  3293. width: 75%
  3294. .right-col
  3295. width: 25%
  3296. ul
  3297. padding-left: 50px
  3298. .right-pannel-arrow-5
  3299. transform: scaleX(1)
  3300. right: -87%
  3301. transition: right .5s ease
  3302. transition: transform 0s ease
  3303.  
  3304. .s-gain-foundations-6
  3305. .s-gain-foundations-content-6
  3306. display: flex
  3307. padding-left: 300px
  3308. width: 100%
  3309. transition: all .5s ease
  3310. .left-col
  3311. width: 96%
  3312. transition: all .5s ease
  3313. .top
  3314. background-color: #c3c3c3
  3315. padding: 30px 70px
  3316. .headline
  3317. font-size: 36px
  3318. span
  3319. color: $accent
  3320. .items
  3321. display: flex
  3322. margin-top: 30px
  3323. flex-wrap: wrap
  3324. justify-content: center
  3325. .item
  3326. width: 20%
  3327. span
  3328. display: block
  3329. .bottom
  3330. display: flex
  3331. filter: grayscale(1)
  3332. height: 580px
  3333. .column-1
  3334. width: 33%
  3335. background-repeat: no-repeat
  3336. background-size: cover
  3337. padding: 30px
  3338. color: #fff
  3339. p
  3340. font-size: 20px
  3341. ul
  3342. font-size: 18px
  3343. list-style-type: decimal
  3344. li
  3345. font-size: 18px
  3346. margin-top: 15px
  3347. .column-2
  3348. width: 34%
  3349. background-color: #e6e6e6
  3350. padding: 30px
  3351. span
  3352. font-size: 20px
  3353. p
  3354. margin-top: 30px
  3355. .column-3
  3356. width: 33%
  3357. background-repeat: no-repeat
  3358. background-size: cover
  3359.  
  3360. .right-col
  3361. width: 4%
  3362. position: relative
  3363. right: 0
  3364. left: -1px
  3365. background-color: #373737
  3366. padding-bottom: 50px
  3367. transition: all .5s ease
  3368. .right-pannel-arrow-6
  3369. position: relative
  3370. height: 50px
  3371. width: 50px
  3372. color: #fff
  3373. text-align: center
  3374. font-family: "minionpro"
  3375. font-size: 36px
  3376. cursor: pointer
  3377. transform: scaleX(-1)
  3378. right: 0
  3379. transition: right .5s ease
  3380. transition: transform 0s ease
  3381. ul
  3382. padding-left: 150px
  3383. list-style-type: none
  3384. margin-bottom: 40px
  3385. width: 300px
  3386. color: #fff
  3387. text-transform: uppercase
  3388. margin-top: 10px
  3389. .active
  3390. background-color: $accent
  3391. li
  3392. margin-top: 10px
  3393. width: 300px
  3394. padding: 5px 10px
  3395. a
  3396. color: #fff
  3397. text-transform: none
  3398. font-size: 14px
  3399. .active
  3400. .left-col
  3401. width: 75%
  3402. .right-col
  3403. width: 25%
  3404. ul
  3405. padding-left: 50px
  3406. .right-pannel-arrow-6
  3407. transform: scaleX(1)
  3408. right: -87%
  3409. transition: right .5s ease
  3410. transition: transform 0s ease
  3411.  
  3412. .s-gain-foundations-7
  3413. .s-gain-foundations-content-7
  3414. display: flex
  3415. padding-left: 300px
  3416. width: 100%
  3417. transition: all .5s ease
  3418. .left-col
  3419. width: 96%
  3420. transition: all .5s ease
  3421. .carousel-2
  3422. background: #000
  3423. .carousel
  3424. width: 80%
  3425. margin: auto
  3426. .carousel-control-prev
  3427. left: -15%
  3428. .carousel-control-prev-icon
  3429. background-image: url(../img/projects/arrow-prev.png)
  3430. width: 24px
  3431. height: 72px
  3432. .carousel-control-next
  3433. right: -15%
  3434. .carousel-control-next-icon
  3435. background-image: url(../img/projects/arrow-next.png)
  3436. width: 24px
  3437. height: 72px
  3438. .carousel-inner
  3439. .carousel-item
  3440. margin: auto
  3441. .item-photo-1, .item-photo-3, .item-photo-4, .item-photo-5, .item-photo-6
  3442. filter: grayscale(1)
  3443. .item-photo-1, .item-photo-3, .item-photo-4, .item-photo-5, .item-photo-6, .item-photo-2
  3444. .item-photo
  3445. display: inline-block
  3446. width: 33%
  3447. overflow: hidden
  3448. height: 50%
  3449. margin: -4px -2px
  3450. .item-photo-2
  3451. display: inline-block
  3452. width: 33%
  3453. .item-photo-content-2
  3454. position: absolute
  3455. height: 50%
  3456. width: 33%
  3457. top: 0
  3458. padding: 3%
  3459. ul
  3460. position: relative
  3461. background-color: rgba(#000, .5)
  3462. height: 100%
  3463. color: #fff
  3464. list-style-type: none
  3465. font-size: 12px
  3466. font-weight: 500
  3467. padding: 20px 30px
  3468. li
  3469. margin: 10px 10px
  3470. .content-1
  3471. top: 10px
  3472. .content-2
  3473. font-size: 20px
  3474. margin-bottom: 30%
  3475. margin-top: 10%
  3476. .right-col
  3477. width: 4%
  3478. position: relative
  3479. right: 0
  3480. left: -1px
  3481. background-color: #373737
  3482. padding-bottom: 50px
  3483. transition: all .5s ease
  3484. .right-pannel-arrow-7
  3485. position: relative
  3486. height: 50px
  3487. width: 50px
  3488. color: #fff
  3489. text-align: center
  3490. font-family: "minionpro"
  3491. font-size: 36px
  3492. cursor: pointer
  3493. transform: scaleX(-1)
  3494. right: 0
  3495. transition: right .5s ease
  3496. transition: transform 0s ease
  3497. ul
  3498. padding-left: 150px
  3499. list-style-type: none
  3500. margin-bottom: 40px
  3501. width: 300px
  3502. color: #fff
  3503. text-transform: uppercase
  3504. margin-top: 10px
  3505. .active
  3506. background-color: $accent
  3507. li
  3508. margin-top: 10px
  3509. width: 300px
  3510. padding: 5px 10px
  3511. a
  3512. color: #fff
  3513. text-transform: none
  3514. font-size: 14px
  3515. .active
  3516. .left-col
  3517. width: 75%
  3518. .carousel-2
  3519. .carousel
  3520. width: 70%
  3521. .carousel-inner
  3522. .carousel-item
  3523. .item-photo-3, .item-photo-6
  3524. display: none
  3525. .item-photo-1, .item-photo-2, .item-photo-4, .item-photo-5
  3526. width: 50%
  3527. .item-photo-2
  3528. .item-photo-content-2
  3529. height: 50%
  3530. width: 50%
  3531. ul
  3532. .content-2
  3533. font-size: 26px
  3534. margin-bottom: 10%
  3535. .right-col
  3536. width: 25%
  3537. ul
  3538. padding-left: 50px
  3539. .right-pannel-arrow-7
  3540. transform: scaleX(1)
  3541. right: -87%
  3542. transition: right .5s ease
  3543. transition: transform 0s ease
  3544.  
  3545.  
  3546. .s-gain-engineering-5
  3547. .s-gain-foundations-content-5
  3548. display: flex
  3549. padding-left: 300px
  3550. width: 100%
  3551. transition: all .5s ease
  3552. .left-col
  3553. width: 96%
  3554. transition: all .5s ease
  3555. background-color: #e6e6e6
  3556. .button
  3557. display: block
  3558. width: 172px
  3559. margin-top: -70px
  3560. margin-bottom: 15px
  3561. margin-left: 50%
  3562. left: -86px
  3563. background-color: rgba(#fff, .5)
  3564. border: 2px solid #000
  3565. .headline
  3566. padding: 20px 70px
  3567. font-size: 36px
  3568. display: flex
  3569. .bottom-space
  3570. color: $accent
  3571. p
  3572. padding-left: 70px
  3573. max-width: 1200px
  3574. .types
  3575. display: flex
  3576. .type
  3577. height: 100%
  3578. width: 50%
  3579. .text
  3580. width: 100%
  3581. padding: 10px 70px
  3582. height: 260px
  3583. p
  3584. padding: 0
  3585. img
  3586. display: block
  3587. height: 460px
  3588. width: 100%
  3589. filter: grayscale(1)
  3590. .right-col
  3591. width: 4%
  3592. position: relative
  3593. right: 0
  3594. left: -1px
  3595. background-color: #373737
  3596. padding-bottom: 50px
  3597. transition: all .5s ease
  3598. .right-pannel-arrow-5
  3599. position: relative
  3600. height: 50px
  3601. width: 50px
  3602. color: #fff
  3603. text-align: center
  3604. font-family: "minionpro"
  3605. font-size: 36px
  3606. cursor: pointer
  3607. transform: scaleX(-1)
  3608. right: 0
  3609. transition: right .5s ease
  3610. transition: transform 0s ease
  3611. ul
  3612. padding-left: 150px
  3613. list-style-type: none
  3614. margin-bottom: 40px
  3615. width: 300px
  3616. color: #fff
  3617. text-transform: uppercase
  3618. margin-top: 10px
  3619. .active
  3620. background-color: $accent
  3621. li
  3622. margin-top: 10px
  3623. width: 300px
  3624. padding: 5px 10px
  3625. a
  3626. color: #fff
  3627. text-transform: none
  3628. font-size: 14px
  3629. .active
  3630. .left-col
  3631. width: 75%
  3632. .right-col
  3633. width: 25%
  3634. ul
  3635. padding-left: 50px
  3636. .right-pannel-arrow-5
  3637. transform: scaleX(1)
  3638. right: -87%
  3639. transition: right .5s ease
  3640. transition: transform 0s ease
  3641.  
  3642. .s-gain-engineering-6
  3643. .s-gain-foundations-content-6
  3644. display: flex
  3645. padding-left: 300px
  3646. width: 100%
  3647. transition: all .5s ease
  3648. .left-col
  3649. width: 96%
  3650. transition: all .5s ease
  3651. .top
  3652. background-color: #c3c3c3
  3653. padding: 30px 70px
  3654. .headline
  3655. font-size: 36px
  3656. span
  3657. color: $accent
  3658. .items
  3659. display: flex
  3660. margin-top: 30px
  3661. flex-wrap: wrap
  3662. justify-content: center
  3663. .item
  3664. width: 20%
  3665. span
  3666. display: block
  3667. .bottom
  3668. display: flex
  3669. filter: grayscale(1)
  3670. height: 580px
  3671. .column-1
  3672. width: 33%
  3673. background-repeat: no-repeat
  3674. background-size: cover
  3675. padding: 30px
  3676. color: #fff
  3677. p
  3678. font-size: 20px
  3679. ul
  3680. font-size: 18px
  3681. list-style-type: decimal
  3682. li
  3683. font-size: 18px
  3684. margin-top: 15px
  3685. .column-2
  3686. width: 34%
  3687. background-color: #e6e6e6
  3688. padding: 30px
  3689. span
  3690. font-size: 20px
  3691. p
  3692. margin-top: 30px
  3693. .column-3
  3694. width: 33%
  3695. background-repeat: no-repeat
  3696. background-size: cover
  3697.  
  3698. .right-col
  3699. width: 4%
  3700. position: relative
  3701. right: 0
  3702. left: -1px
  3703. background-color: #373737
  3704. padding-bottom: 50px
  3705. transition: all .5s ease
  3706. .right-pannel-arrow-6
  3707. position: relative
  3708. height: 50px
  3709. width: 50px
  3710. color: #fff
  3711. text-align: center
  3712. font-family: "minionpro"
  3713. font-size: 36px
  3714. cursor: pointer
  3715. transform: scaleX(-1)
  3716. right: 0
  3717. transition: right .5s ease
  3718. transition: transform 0s ease
  3719. ul
  3720. padding-left: 150px
  3721. list-style-type: none
  3722. margin-bottom: 40px
  3723. width: 300px
  3724. color: #fff
  3725. text-transform: uppercase
  3726. margin-top: 10px
  3727. .active
  3728. background-color: $accent
  3729. li
  3730. margin-top: 10px
  3731. width: 300px
  3732. padding: 5px 10px
  3733. a
  3734. color: #fff
  3735. text-transform: none
  3736. font-size: 14px
  3737. .active
  3738. .left-col
  3739. width: 75%
  3740. .right-col
  3741. width: 25%
  3742. ul
  3743. padding-left: 50px
  3744. .right-pannel-arrow-6
  3745. transform: scaleX(1)
  3746. right: -87%
  3747. transition: right .5s ease
  3748. transition: transform 0s ease
  3749.  
  3750. @import "media" // Always at the end
Add Comment
Please, Sign In to add comment
Public Pastes
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!