Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

1037 wiersze
17 KiB

  1. @charset "utf-8";
  2. /* CSS Document */
  3. /******************************
  4. COLOR PALETTE
  5. [Table of Contents]
  6. 1. Fonts
  7. 2. Body and some general stuff
  8. 3. Header
  9. ******************************/
  10. /***********
  11. 1. Fonts
  12. ***********/
  13. @import url('https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400,600,700,800');
  14. /*********************************
  15. 2. Body and some general stuff
  16. *********************************/
  17. *
  18. {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. body
  23. {
  24. font-family: 'Open Sans', sans-serif;
  25. font-size: 15px;
  26. line-height: 2;
  27. font-weight: 400;
  28. background: #FFFFFF;
  29. color: #6e6e6e;
  30. }
  31. div
  32. {
  33. display: block;
  34. position: relative;
  35. -webkit-box-sizing: border-box;
  36. -moz-box-sizing: border-box;
  37. box-sizing: border-box;
  38. }
  39. ul
  40. {
  41. list-style: none;
  42. margin-bottom: 0px;
  43. }
  44. p
  45. {
  46. font-family: 'Open Sans', sans-serif;
  47. font-size: 15px;
  48. line-height: 2;
  49. font-weight: 400;
  50. color: #6e6e6e;
  51. -webkit-font-smoothing: antialiased;
  52. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  53. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  54. }
  55. p a
  56. {
  57. display: inline;
  58. position: relative;
  59. color: inherit;
  60. border-bottom: solid 1px #ffa07f;
  61. -webkit-transition: all 200ms ease;
  62. -moz-transition: all 200ms ease;
  63. -ms-transition: all 200ms ease;
  64. -o-transition: all 200ms ease;
  65. transition: all 200ms ease;
  66. }
  67. a, a:hover, a:visited, a:active, a:link
  68. {
  69. text-decoration: none;
  70. -webkit-font-smoothing: antialiased;
  71. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  72. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  73. }
  74. p a:active
  75. {
  76. position: relative;
  77. color: #FF6347;
  78. }
  79. p a:hover
  80. {
  81. color: #FFFFFF;
  82. background: #ffa07f;
  83. }
  84. p a:hover::after
  85. {
  86. opacity: 0.2;
  87. }
  88. ::selection
  89. {
  90. background: #fde0db;
  91. color: #ff4200;
  92. }
  93. p::selection
  94. {
  95. background: #fde0db;
  96. }
  97. h1{font-size: 48px;}
  98. h2{font-size: 30px;}
  99. h3{font-size: 18px;}
  100. h4{font-size: 14px;}
  101. h5{font-size: 11px;}
  102. h1, h2, h3, h4, h5, h6
  103. {
  104. color: #282828;
  105. -webkit-font-smoothing: antialiased;
  106. -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
  107. text-shadow: rgba(0,0,0,.01) 0 0 1px;
  108. }
  109. h1::selection,
  110. h2::selection,
  111. h3::selection,
  112. h4::selection,
  113. h5::selection,
  114. h6::selection
  115. {
  116. }
  117. ::-webkit-input-placeholder
  118. {
  119. font-size: 16px !important;
  120. font-weight: 500;
  121. color: #777777 !important;
  122. }
  123. :-moz-placeholder /* older Firefox*/
  124. {
  125. font-size: 16px !important;
  126. font-weight: 500;
  127. color: #777777 !important;
  128. }
  129. ::-moz-placeholder /* Firefox 19+ */
  130. {
  131. font-size: 16px !important;
  132. font-weight: 500;
  133. color: #777777 !important;
  134. }
  135. :-ms-input-placeholder
  136. {
  137. font-size: 16px !important;
  138. font-weight: 500;
  139. color: #777777 !important;
  140. }
  141. ::input-placeholder
  142. {
  143. font-size: 16px !important;
  144. font-weight: 500;
  145. color: #777777 !important;
  146. }
  147. .form-control
  148. {
  149. color: #db5246;
  150. }
  151. section
  152. {
  153. display: block;
  154. position: relative;
  155. box-sizing: border-box;
  156. }
  157. .clear
  158. {
  159. clear: both;
  160. }
  161. .clearfix::before, .clearfix::after
  162. {
  163. content: "";
  164. display: table;
  165. }
  166. .clearfix::after
  167. {
  168. clear: both;
  169. }
  170. .clearfix
  171. {
  172. zoom: 1;
  173. }
  174. .float_left
  175. {
  176. float: left;
  177. }
  178. .float_right
  179. {
  180. float: right;
  181. }
  182. .trans_200
  183. {
  184. -webkit-transition: all 200ms ease;
  185. -moz-transition: all 200ms ease;
  186. -ms-transition: all 200ms ease;
  187. -o-transition: all 200ms ease;
  188. transition: all 200ms ease;
  189. }
  190. .trans_300
  191. {
  192. -webkit-transition: all 300ms ease;
  193. -moz-transition: all 300ms ease;
  194. -ms-transition: all 300ms ease;
  195. -o-transition: all 300ms ease;
  196. transition: all 300ms ease;
  197. }
  198. .trans_400
  199. {
  200. -webkit-transition: all 400ms ease;
  201. -moz-transition: all 400ms ease;
  202. -ms-transition: all 400ms ease;
  203. -o-transition: all 400ms ease;
  204. transition: all 400ms ease;
  205. }
  206. .trans_500
  207. {
  208. -webkit-transition: all 500ms ease;
  209. -moz-transition: all 500ms ease;
  210. -ms-transition: all 500ms ease;
  211. -o-transition: all 500ms ease;
  212. transition: all 500ms ease;
  213. }
  214. .fill_height
  215. {
  216. height: 100%;
  217. }
  218. .super_container
  219. {
  220. width: 100%;
  221. overflow: hidden;
  222. padding-left: 45px;
  223. padding-right: 45px;
  224. }
  225. .button
  226. {
  227. width: 187px;
  228. height: 66px;
  229. background: #ff4200;
  230. overflow: hidden;
  231. }
  232. .line_button
  233. {
  234. border: solid 1px #FFFFFF;
  235. }
  236. .button a
  237. {
  238. display: block;
  239. width: 100%;
  240. color: #FFFFFF;
  241. font-size: 11px;
  242. font-weight: 300;
  243. line-height: 66px;
  244. text-transform: uppercase;
  245. letter-spacing: 6.7px;
  246. }
  247. .button a img
  248. {
  249. display: inline-block;
  250. width: 13px !important;
  251. height: 7px;
  252. margin-left: 4px;
  253. }
  254. .button a::after
  255. {
  256. display: block;
  257. position: absolute;
  258. top: -50%;
  259. left: -70px;
  260. width: 60px;
  261. height: 200%;
  262. background: rgba(255,255,255,0.1);
  263. content: '';
  264. -webkit-transform: rotate(12.5deg);
  265. -moz-transform: rotate(12.5deg);
  266. -ms-transform: rotate(12.5deg);
  267. -o-transform: rotate(12.5deg);
  268. transform: rotate(12.5deg);
  269. -webkit-transition: all 400ms ease;
  270. -moz-transition: all 400ms ease;
  271. -ms-transition: all 400ms ease;
  272. -o-transition: all 400ms ease;
  273. transition: all 400ms ease;
  274. z-index: 0;
  275. }
  276. .button a:hover::after
  277. {
  278. left: calc(100% + 70px);
  279. }
  280. .prlx_parent
  281. {
  282. overflow: hidden;
  283. }
  284. .prlx
  285. {
  286. height: 130% !important;
  287. }
  288. /*********************************
  289. 3. Header
  290. *********************************/
  291. .header
  292. {
  293. position: fixed;
  294. top: 0;
  295. left: 0;
  296. width: 100%;
  297. height: 110px;
  298. padding-left: 48px;
  299. padding-right: 48px;
  300. z-index: 20;
  301. background: #FFFFFF;
  302. -webkit-transition: all 300ms ease;
  303. -moz-transition: all 300ms ease;
  304. -ms-transition: all 300ms ease;
  305. -o-transition: all 300ms ease;
  306. transition: all 300ms ease;
  307. }
  308. /*********************************
  309. 3.1 Logo
  310. *********************************/
  311. .logo_container
  312. {
  313. flex-basis: 50%;
  314. }
  315. .logo
  316. {
  317. margin-left: 7px;
  318. }
  319. .logo a
  320. {
  321. font-family: 'Montserrat', sans-serif;
  322. font-size: 30px;
  323. font-weight: 700;
  324. color: #171717;
  325. text-transform: uppercase;
  326. }
  327. .logo span:first-of-type
  328. {
  329. position: absolute;
  330. top: 0;
  331. left: -5px;
  332. color: #ff4200;
  333. z-index: -1;
  334. }
  335. .logo span:last-of-type
  336. {
  337. color: #ff4200;
  338. }
  339. /*********************************
  340. 3.2 Main Navigation
  341. *********************************/
  342. .main_nav
  343. {
  344. margin-right: -3px;
  345. height: 100%;
  346. flex-basis: 200%;
  347. text-align: right;
  348. }
  349. .nav_items
  350. {
  351. height: 100%;
  352. }
  353. .nav_items li
  354. {
  355. display: inline-block;
  356. margin-left: 35px;
  357. height: 100%;
  358. }
  359. .nav_items li a
  360. {
  361. font-size: 12px;
  362. font-weight: 600;
  363. text-transform: uppercase;
  364. color: #0b1033;
  365. letter-spacing: 3.5px;
  366. height: 100%;
  367. display: -webkit-box;
  368. display: -moz-box;
  369. display: -ms-flexbox;
  370. display: -webkit-flex;
  371. display: flex;
  372. flex-direction: column;
  373. justify-content: center;
  374. align-items: center;
  375. padding-left: 14px;
  376. padding-right: 10px;
  377. }
  378. .nav_items li.active
  379. {
  380. background: #ff4200;
  381. }
  382. .nav_items li.active a
  383. {
  384. color: #FFFFFF;
  385. }
  386. .nav_items li:hover
  387. {
  388. background: #ff4200;
  389. }
  390. .nav_items li:hover a
  391. {
  392. color: #FFFFFF;
  393. }
  394. /*********************************
  395. 3.3 Hamburger Menu
  396. *********************************/
  397. .hamburger_container
  398. {
  399. display: none;
  400. cursor: pointer;
  401. padding: 10px;
  402. margin-right: -10px;
  403. flex-basis: 50%;
  404. text-align: right;
  405. }
  406. .hamburger_text
  407. {
  408. display: inline-block;
  409. margin-right: 7px;
  410. font-weight: 400;
  411. color: #171717;
  412. }
  413. .hamburger_icon
  414. {
  415. position: relative;
  416. display: inline-block;
  417. width: 22px;
  418. height: 3px;
  419. background: #171717;
  420. margin-bottom: 4px;
  421. }
  422. .hamburger_icon::before,
  423. .hamburger_icon::after
  424. {
  425. display: block;
  426. position: absolute;
  427. left: 0;
  428. width: 22px;
  429. height: 3px;
  430. background: #171717;
  431. content: '';
  432. -webkit-transition: all 200ms ease;
  433. -moz-transition: all 200ms ease;
  434. -ms-transition: all 200ms ease;
  435. -o-transition: all 200ms ease;
  436. transition: all 200ms ease;
  437. }
  438. .hamburger_icon.active
  439. {
  440. background: transparent;
  441. }
  442. .hamburger_icon.active::before
  443. {
  444. top: -9px;
  445. transform: translateY(9px) rotate(45deg);
  446. }
  447. .hamburger_icon.active::after
  448. {
  449. top: 9px;
  450. transform: translateY(-9px) rotate(-45deg);
  451. }
  452. .hamburger_icon::before
  453. {
  454. top: -6px;
  455. }
  456. .hamburger_icon::after
  457. {
  458. top: 6px;
  459. }
  460. .hamburger_container:hover .hamburger_icon::before
  461. {
  462. top: -8px;
  463. }
  464. .hamburger_container:hover .hamburger_icon::after
  465. {
  466. top: 8px;
  467. }
  468. .hamburger_container:hover .hamburger_icon.active::before
  469. {
  470. -webkit-transform: none;
  471. -moz-transform: none;
  472. -ms-transform: none;
  473. -o-transform: none;
  474. transform: none;
  475. top: 0;
  476. }
  477. .hamburger_container:hover .hamburger_icon.active::after
  478. {
  479. -webkit-transform: none;
  480. -moz-transform: none;
  481. -ms-transform: none;
  482. -o-transform: none;
  483. transform: none;
  484. top: 0;
  485. }
  486. /*********************************
  487. 3.4 Full Screen Menu
  488. *********************************/
  489. .fs_menu_container
  490. {
  491. position: fixed;
  492. top: -100vh;
  493. left: 0;
  494. width: 100vw;
  495. height: 100vh;
  496. background: #FFFFFF;
  497. z-index: 19;
  498. -webkit-transition: all 1s 0s cubic-bezier(1,0,0,1);
  499. -moz-transition: all 1s 0s cubic-bezier(1,0,0,1);
  500. -ms-transition: all 1s 0s cubic-bezier(1,0,0,1);
  501. -o-transition: all 1s 0s cubic-bezier(1,0,0,1);
  502. transition: all 1s 0s cubic-bezier(1,0,0,1);
  503. padding-left: 48px;
  504. padding-right: 63px;
  505. padding-top: 150px;
  506. text-align: right;
  507. }
  508. .fs_menu_shapes
  509. {
  510. position: absolute;
  511. bottom: 32px;
  512. left: -70px;
  513. width: 25%;
  514. }
  515. .fs_menu_shapes img
  516. {
  517. width: 100%;
  518. }
  519. .fs_menu_container.active
  520. {
  521. top: 0;
  522. }
  523. .fs_menu_list
  524. {
  525. display: inline-block;
  526. }
  527. .fs_menu_list li
  528. {
  529. overflow: hidden;
  530. }
  531. .fs_menu_list li a
  532. {
  533. display: inline-block;
  534. font-size: 62px;
  535. font-weight: 700;
  536. color: #171717;
  537. line-height: 1.4;
  538. -webkit-transform: translateY(-100%);
  539. -moz-transform: translateY(-100%);
  540. -ms-transform: translateY(-100%);
  541. -o-transform: translateY(-100%);
  542. transform: translateY(-100%);
  543. -webkit-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  544. -moz-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  545. -ms-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  546. -o-transition: all 600ms 600ms cubic-bezier(.19,1,.22,1);
  547. transition: all 1600ms cubic-bezier(.19,1,.22,1);
  548. }
  549. .fs_menu_list li:first-child a {transition-delay: 600ms;}
  550. .fs_menu_list li:nth-child(2) a {transition-delay: 670ms;}
  551. .fs_menu_list li:nth-child(3) a {transition-delay: 740ms;}
  552. .fs_menu_list li:nth-child(4) a {transition-delay: 810ms;}
  553. .fs_menu_list li:nth-child(5) a {transition-delay: 880ms;}
  554. .fs_menu_list li:nth-child(6) a {transition-delay: 950ms;}
  555. .fs_menu_list li:nth-child(7) a {transition-delay: 900ms;}
  556. .fs_menu_list li:nth-child(8) a {transition-delay: 950ms;}
  557. .fs_menu_list li:nth-child(9) a {transition-delay: 1000ms;}
  558. .fs_menu_list li:nth-child(10) a {transition-delay: 1050ms;}
  559. .fs_menu_container.active .fs_menu_list li a
  560. {
  561. transform: none;
  562. }
  563. .fs_menu_list li a span
  564. {
  565. position: relative;
  566. }
  567. .fs_menu_list li a span span
  568. {
  569. position: absolute;
  570. top: -1px;
  571. left: -5px;
  572. color: #ff4200;
  573. z-index: -1;
  574. }
  575. .fs_menu_list li a > span::after
  576. {
  577. display: block;
  578. position: absolute;
  579. bottom: 4px;
  580. left: 0;
  581. width: 0%;
  582. height: 3px;
  583. background: #171717;
  584. content: '';
  585. -webkit-transition: all 600ms cubic-bezier(.19,1,.22,1);
  586. -moz-transition: all 600ms cubic-bezier(.19,1,.22,1);
  587. -ms-transition: all 600ms cubic-bezier(.19,1,.22,1);
  588. -o-transition: all 600ms cubic-bezier(.19,1,.22,1);
  589. transition: all 600ms cubic-bezier(.19,1,.22,1);
  590. }
  591. .fs_menu_list li a:hover span::after
  592. {
  593. width: 100%;
  594. }
  595. .fs_social_container
  596. {
  597. position: absolute;
  598. bottom: 0px;
  599. right: 63px;
  600. width: auto;
  601. height: 74px;
  602. z-index: 11;
  603. }
  604. .fs_social li
  605. {
  606. display: inline-block;
  607. margin-left: 10px;
  608. }
  609. .fs_social li a
  610. {
  611. width: 100%;
  612. height: 100%;
  613. padding: 10px;
  614. }
  615. .fs_social li i
  616. {
  617. font-size: 13px;
  618. color: rgba(255,66,0,0.6);
  619. }
  620. .fs_social li:hover i
  621. {
  622. color: rgba(255,66,0,1);
  623. }
  624. /*********************************
  625. 5. Home Social
  626. *********************************/
  627. .home_social_container
  628. {
  629. position: absolute;
  630. top: 110px;
  631. right: 0px;
  632. width: auto;
  633. height: 74px;
  634. background: #ff4200;
  635. z-index: 11;
  636. padding-right: 38px;
  637. padding-left: 45px;
  638. }
  639. .home_social li
  640. {
  641. display: inline-block;
  642. margin-left: 10px;
  643. }
  644. .home_social li a
  645. {
  646. width: 100%;
  647. height: 100%;
  648. padding: 10px;
  649. }
  650. .home_social li i
  651. {
  652. font-size: 13px;
  653. color: rgba(255,255,255,0.6);
  654. }
  655. .home_social li:hover i
  656. {
  657. color: rgba(255,255,255,1);
  658. }
  659. /*********************************
  660. 7. Section Title
  661. *********************************/
  662. .section_title h2
  663. {
  664. display: inline-block;
  665. position: relative;
  666. font-weight: 600;
  667. letter-spacing: 0.2em;
  668. text-transform: uppercase;
  669. color: #FFFFFF;
  670. line-height: 1.35;
  671. margin-bottom: 116px;
  672. }
  673. .section_title h2 span
  674. {
  675. display: block;
  676. position: absolute;
  677. top: 50%;
  678. left: 50%;
  679. -webkit-transform: translate(-50%, -50px);
  680. -moz-transform: translate(-50%, -50px);
  681. -ms-transform: translate(-50%, -50px);
  682. -o-transform: translate(-50%, -50px);
  683. transform: translate(-50%, -50px);
  684. font-size: 72px;
  685. font-weight: 900;
  686. color: #ff0000;
  687. opacity: 0.32;
  688. }
  689. .section_title h2::before
  690. {
  691. display: block;
  692. position: absolute;
  693. bottom: 61px;
  694. left: 50%;
  695. -webkit-transform: translateX(-50%);
  696. -moz-transform: translateX(-50%);
  697. -ms-transform: translateX(-50%);
  698. -o-transform: translateX(-50%);
  699. transform: translateX(calc(-50% - 4px));
  700. width: 2px;
  701. height: 45px;
  702. content: '';
  703. background: #FFFFFF;
  704. }
  705. /*********************************
  706. 9. Page Top
  707. *********************************/
  708. .home
  709. {
  710. width: 100%;
  711. height: 386px;
  712. margin-top: 110px;
  713. }
  714. .home_background
  715. {
  716. position: absolute;
  717. top: 0;
  718. left: 0;
  719. width: 100%;
  720. height: 100%;
  721. background-repeat: no-repeat;
  722. background-size: cover;
  723. background-position: center center;
  724. }
  725. .services_page_shapes
  726. {
  727. position: absolute;
  728. top: 0;
  729. left: 0;
  730. width: 100%;
  731. height: 100%;
  732. background-repeat: no-repeat;
  733. background-size: cover;
  734. background-position: center center;
  735. pointer-events: none;
  736. }
  737. .home_content
  738. {
  739. margin-top: 154px;
  740. }
  741. .home_content h1
  742. {
  743. font-weight: 300;
  744. color: #FFFFFF;
  745. margin-bottom: 2px;
  746. }
  747. .home_content span
  748. {
  749. font-size: 12px;
  750. font-weight: 600;
  751. color: #FFFFFF;
  752. letter-spacing: 1em;
  753. text-transform: uppercase;
  754. padding-left: 3px;
  755. }
  756. /*********************************
  757. 9. Services
  758. *********************************/
  759. .services
  760. {
  761. padding-top: 120px;
  762. padding-bottom: 120px;
  763. }
  764. .services_background
  765. {
  766. position: absolute;
  767. top: 0;
  768. left: 0;
  769. width: 100%;
  770. height: 100%;
  771. background-repeat: no-repeat;
  772. background-size: cover;
  773. background-position: center center;
  774. }
  775. .services_shapes
  776. {
  777. position: absolute;
  778. top: 116px;
  779. right: 0;
  780. }
  781. .service_item
  782. {
  783. margin-bottom: 30px;
  784. }
  785. .service_item h3
  786. {
  787. color: #1c1c1c;
  788. font-weight: 600;
  789. text-transform: uppercase;
  790. letter-spacing: 0.2em;
  791. margin-bottom: 31px;
  792. }
  793. .service_item p
  794. {
  795. color: #6e6e6e;
  796. max-width: 100%;
  797. }
  798. .icon_container
  799. {
  800. height: 41px;
  801. width: auto;
  802. margin-bottom: 35px;
  803. }
  804. .services_button
  805. {
  806. margin-top: 66px;
  807. margin-left: auto;
  808. margin-right: auto;
  809. }
  810. /*********************************
  811. 9. Cards
  812. *********************************/
  813. .zeta_cards
  814. {
  815. width: 100%;
  816. }
  817. .zeta_card
  818. {
  819. padding-top: 208px;
  820. padding-bottom: 195px;
  821. padding-left: 134px;
  822. padding-right: 100px;
  823. }
  824. .zeta_card_content
  825. {
  826. }
  827. .zeta_card_content h2
  828. {
  829. font-size: 24px;
  830. letter-spacing: 0.2em;
  831. color: #FFFFFF;
  832. text-transform: uppercase;
  833. margin-bottom: 27px;
  834. }
  835. .zeta_card_content p
  836. {
  837. color: #FFFFFF;
  838. }
  839. .zeta_card_button
  840. {
  841. margin-top: 46px;
  842. }
  843. .zeta_card_background
  844. {
  845. position: absolute;
  846. top: 0;
  847. left: 0;
  848. width: 100%;
  849. height: 100%;
  850. z-index: -1;
  851. background-repeat: no-repeat;
  852. background-size: cover;
  853. background-position: center center;
  854. }
  855. /*********************************
  856. 11. Picture Boxes
  857. *********************************/
  858. .picture_boxes
  859. {
  860. padding-top: 132px;
  861. padding-bottom: 118px;
  862. }
  863. .card
  864. {
  865. border: none;
  866. }
  867. .pic_box_title
  868. {
  869. text-transform: uppercase;
  870. font-weight: 600;
  871. letter-spacing: 0.2em;
  872. margin-top: 40px;
  873. margin-bottom: 31px;
  874. }
  875. .pic_box_link
  876. {
  877. font-size: 12px;
  878. font-weight: 600;
  879. letter-spacing: 0.2em;
  880. color: #ff4200;
  881. text-transform: uppercase;
  882. margin-top: 11px;
  883. -webkit-transition: all 200ms ease;
  884. -moz-transition: all 200ms ease;
  885. -ms-transition: all 200ms ease;
  886. -o-transition: all 200ms ease;
  887. transition: all 200ms ease;
  888. }
  889. .pic_box_link svg
  890. {
  891. margin-left: 3px;
  892. }
  893. .arrow_poly
  894. {
  895. -webkit-transition: all 200ms ease;
  896. -moz-transition: all 200ms ease;
  897. -ms-transition: all 200ms ease;
  898. -o-transition: all 200ms ease;
  899. transition: all 200ms ease;
  900. }
  901. .pic_box_link:hover
  902. {
  903. color: #fd9672;
  904. }
  905. .pic_box_link:hover .arrow_poly
  906. {
  907. fill: #fd9672;
  908. }
  909. /*********************************
  910. 11. Contact
  911. *********************************/
  912. .contact
  913. {
  914. padding-top: 192px;
  915. padding-bottom: 120px;
  916. }
  917. .contact_background
  918. {
  919. position: absolute;
  920. top: 0;
  921. left: 0;
  922. width: 100%;
  923. height: 100%;
  924. background-repeat: no-repeat;
  925. background-size: cover;
  926. background-position: center center;
  927. }
  928. .contact_shapes
  929. {
  930. position: absolute;
  931. bottom: 0;
  932. left: 50%;
  933. -webkit-transform: translateX(-50%);
  934. -moz-transform: translateX(-50%);
  935. -ms-transform: translateX(-50%);
  936. -o-transform: translateX(-50%);
  937. transform: translateX(calc(-50% - 40px));
  938. }
  939. .contact_title h2
  940. {
  941. margin-bottom: 54px;
  942. }
  943. .contact_text p
  944. {
  945. color: #FFFFFF;
  946. }
  947. .contact_button
  948. {
  949. margin-left: auto;
  950. margin-right: auto;
  951. margin-top: 60px;
  952. }
  953. /*********************************
  954. 12. Footer
  955. *********************************/
  956. .footer
  957. {
  958. background: #111111;
  959. }
  960. .footer_content
  961. {
  962. height: 96px;
  963. }
  964. .footer_social_container
  965. {
  966. display: inline-block;
  967. }
  968. .footer_social li
  969. {
  970. display: inline-block;
  971. margin-left: 6px;
  972. }
  973. .footer_social li:first-child
  974. {
  975. margin-left: 0px;
  976. }
  977. .footer_social li a
  978. {
  979. width: 100%;
  980. height: 100%;
  981. padding: 10px;
  982. }
  983. .footer_social li i
  984. {
  985. font-size: 14px;
  986. color: rgba(110,110,110,0.6);
  987. }
  988. .footer_social li:hover i
  989. {
  990. color: rgba(255,255,255,1);
  991. }
  992. .cr p
  993. {
  994. margin-bottom: 0px;
  995. }