Адаптация под responsive design, тексты переписаны под обладателей клипового мышления.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1555 lines
29KB

  1. //$font-primary: 'Oxygen', sans-serif;
  2. $font-primary: 'Exo2';
  3. $font-secondary: 'Source Sans Pro', sans-serif;
  4. // Overrides
  5. $grid-gutter-width: 40px !default;
  6. $border-radius-base: 4px !default;
  7. $padding-base-vertical: 14px !default;
  8. //$brand-primary: #66D37E !default;
  9. $brand-primary: #006699 !default;
  10. $brand-secondary: #007CB9 !default;
  11. $brand-white: #fff;
  12. $brand-black: #000;
  13. $brand-darker: #333;
  14. $brand-gray: #aaa;
  15. $brand-lighter: #d9d9d9;
  16. $brand-body-color: #e8e8e8;
  17. $brand-selection-color: #f9f6f0;
  18. $brand-overlay-color: #4c4a8a;
  19. $brand-bg-color: $brand-white;
  20. $input-border-focus: $brand-primary !default;
  21. $form-group-margin-bottom: 30px !default;
  22. // Mixin
  23. @mixin translateX($translatex) {
  24. -moz-transform: translateX($translatex);
  25. -webkit-transform: translateX($translatex);
  26. -ms-transform: translateX($translatex);
  27. -o-transform: translateX($translatex);
  28. transform: translateX($translatex);
  29. }
  30. @mixin transition($transition) {
  31. -moz-transition: all $transition ease;
  32. -o-transition: all $transition ease;
  33. -webkit-transition: all $transition ease;
  34. -ms-transition: all $transition ease;
  35. transition: all $transition ease;
  36. }
  37. @mixin inline-block() {
  38. display:-moz-inline-stack;
  39. display:inline-block;
  40. zoom:1;
  41. *display:inline;
  42. }
  43. @mixin border-radius($radius) {
  44. -webkit-border-radius: $radius;
  45. -moz-border-radius: $radius;
  46. -ms-border-radius: $radius;
  47. border-radius: $radius;
  48. }
  49. @mixin flex() {
  50. display: -webkit-box;
  51. display: -moz-box;
  52. display: -ms-flexbox;
  53. display: -webkit-flex;
  54. display: flex;
  55. }
  56. @mixin flexwrap() {
  57. flex-wrap: wrap;
  58. -webkit-flex-wrap: wrap;
  59. -moz-flex-wrap: wrap;
  60. }
  61. @font-face {
  62. font-family: 'exo2';
  63. src:url('../fonts/exo2.ttf');
  64. }
  65. @font-face {
  66. font-family: 'icomoon';
  67. src:url('../fonts/icomoon/icomoon.eot?srf3rx');
  68. src:url('../fonts/icomoon/icomoon.eot?srf3rx#iefix') format('embedded-opentype'),
  69. url('../fonts/icomoon/icomoon.ttf?srf3rx') format('truetype'),
  70. url('../fonts/icomoon/icomoon.woff?srf3rx') format('woff'),
  71. url('../fonts/icomoon/icomoon.svg?srf3rx#icomoon') format('svg');
  72. font-weight: normal;
  73. font-style: normal;
  74. }
  75. @mixin icomoon() {
  76. font-family: 'icomoon';
  77. speak: none;
  78. font-style: normal;
  79. font-weight: normal;
  80. font-variant: normal;
  81. text-transform: none;
  82. line-height: 1;
  83. /* Better Font Rendering =========== */
  84. -webkit-font-smoothing: antialiased;
  85. -moz-osx-font-smoothing: grayscale;
  86. }
  87. // Import
  88. @import 'bootstrap/mixins';
  89. @import 'bootstrap/variables';
  90. /* =======================================================
  91. *
  92. * Template Style
  93. *
  94. * ======================================================= */
  95. body {
  96. font-family: $font-primary;
  97. font-weight: 300;
  98. font-size: 14px;
  99. line-height: 1.7;
  100. color: lighten($brand-black,50%);
  101. background: $brand-body-color;
  102. }
  103. #page {
  104. position: relative;
  105. overflow-x: hidden;
  106. width: 100%;
  107. height: 100%;
  108. @include transition(.5s);
  109. .offcanvas & {
  110. overflow: hidden;
  111. position: absolute;
  112. &:after {
  113. @include transition(2s);
  114. position: absolute;
  115. top: 0;
  116. right: 0;
  117. bottom: 0;
  118. left: 0;
  119. z-index: 101;
  120. background: rgba(0,0,0,.7);
  121. content: "";
  122. }
  123. }
  124. }
  125. a {
  126. color: $brand-primary;
  127. @include transition(.5s);
  128. &:hover, &:active, &:focus {
  129. color: $brand-primary;
  130. outline: none;
  131. text-decoration: none;
  132. }
  133. }
  134. p {
  135. margin-bottom: 20px;
  136. }
  137. h1, h2, h3, h4, h5, h6, figure {
  138. color: $brand-black;
  139. font-family: $font-secondary;
  140. font-weight: 400;
  141. margin: 0 0 20px 0;
  142. }
  143. ::-webkit-selection {
  144. color: $brand-white;
  145. background: $brand-primary;
  146. }
  147. ::-moz-selection {
  148. color: $brand-white;
  149. background: $brand-primary;
  150. }
  151. ::selection {
  152. color: $brand-white;
  153. background: $brand-primary;
  154. }
  155. .container-wrap{
  156. max-width: 1060px;
  157. margin: 0 auto;
  158. margin-bottom: 1em;
  159. background: $brand-white;
  160. @media screen and (max-width: $screen-sm ) {
  161. width: 100%;
  162. }
  163. }
  164. .fh5co-nav {
  165. margin: 5em 0 0 0;
  166. @media screen and (max-width: $screen-sm ) {
  167. margin: 0;
  168. }
  169. .top-menu{
  170. padding: 34px 30px;
  171. @media screen and (max-width: $screen-sm ) {
  172. padding: 28px 1em;
  173. }
  174. }
  175. #fh5co-logo {
  176. font-size: 24px;
  177. margin: 0;
  178. padding: 0;
  179. text-transform: uppercase;
  180. font-weight: 600;
  181. font-family: $font-secondary;
  182. a{
  183. span{
  184. color: $brand-primary;
  185. }
  186. }
  187. }
  188. a {
  189. padding: 5px 10px;
  190. color: $brand-black;
  191. }
  192. .menu-1 {
  193. @media screen and (max-width: $screen-sm ) {
  194. display: none;
  195. }
  196. }
  197. ul {
  198. padding: 0;
  199. margin: 5px 0 0 0;
  200. li {
  201. font-family: $font-secondary;
  202. padding: 0;
  203. margin: 0;
  204. list-style: none;
  205. display: inline;
  206. text-transform: uppercase;
  207. letter-spacing: 1px;
  208. font-weight: 600;
  209. a {
  210. position: relative;
  211. font-size: 13px;
  212. padding: 30px 12px;
  213. color: rgba(0,0,0,.3);
  214. @include transition(.5s);
  215. &:after{
  216. position: absolute;
  217. bottom: 25px;
  218. left: 0;
  219. right: 0;
  220. content: '';
  221. width: 58%;
  222. height: 2px;
  223. background: $brand-primary;
  224. margin: 0 auto;
  225. opacity: 0;
  226. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  227. transition: transform 0.3s, opacity 0.3s;
  228. -webkit-transform: translate3d(0, -10px, 0);
  229. transform: translate3d(0, -10px, 0);
  230. }
  231. &:hover{
  232. color: $brand-black;
  233. &:after{
  234. opacity: 1;
  235. -webkit-transform: translate3d(0, 0, 0);
  236. transform: translate3d(0, 0, 0);
  237. }
  238. }
  239. }
  240. &.has-dropdown {
  241. position: relative;
  242. .dropdown {
  243. width: 140px;
  244. -webkit-box-shadow: 0px 14px 33px -9px rgba(0,0,0,0.75);
  245. -moz-box-shadow: 0px 14px 33px -9px rgba(0,0,0,0.75);
  246. box-shadow: 0px 14px 33px -9px rgba(0,0,0,0.75);
  247. z-index: 1002;
  248. visibility: hidden;
  249. opacity: 0;
  250. position: absolute;
  251. top: 40px;
  252. left: 0;
  253. text-align: left;
  254. background: $brand-black;
  255. padding: 20px;
  256. @include border-radius(4px);
  257. @include transition(.0s);
  258. &:before {
  259. bottom: 100%;
  260. left: 40px;
  261. border: solid transparent;
  262. content: " ";
  263. height: 0;
  264. width: 0;
  265. position: absolute;
  266. pointer-events: none;
  267. border-bottom-color: #000;
  268. border-width: 8px;
  269. margin-left: -8px;
  270. }
  271. li {
  272. display: block;
  273. margin-bottom: 7px;
  274. &:last-child {
  275. margin-bottom: 0;
  276. }
  277. a {
  278. padding: 2px 0;
  279. display: block;
  280. color: lighten($brand-black, 60%);
  281. line-height: 1.2;
  282. text-transform: none;
  283. font-size: 13px;
  284. letter-spacing: 0;
  285. &:hover {
  286. color: $brand-white;
  287. }
  288. }
  289. }
  290. }
  291. &:hover, &:focus {
  292. a {
  293. color: $brand-black;
  294. }
  295. .dropdown {
  296. // visibility: visible;
  297. // opacity: 1;
  298. }
  299. }
  300. }
  301. &.btn-cta {
  302. a {
  303. padding: 30px 0px !important;
  304. color: $brand-white;
  305. span {
  306. background: rgba($brand-primary,1);
  307. padding: 4px 10px;
  308. @include inline-block;
  309. @include transition(.3s);
  310. @include border-radius(100px);
  311. }
  312. &:hover {
  313. span {
  314. -webkit-box-shadow: 0px 14px 20px -9px rgba(0,0,0,0.75);
  315. -moz-box-shadow: 0px 14px 20px -9px rgba(0,0,0,0.75);
  316. box-shadow: 0px 14px 20px -9px rgba(0,0,0,0.75);
  317. }
  318. }
  319. }
  320. }
  321. &.active {
  322. > a {
  323. color: $brand-black!important;
  324. position: relative;
  325. &:after{
  326. opacity: 1;
  327. -webkit-transform: translate3d(0, 0, 0);
  328. transform: translate3d(0, 0, 0);
  329. }
  330. }
  331. }
  332. }
  333. }
  334. }
  335. #fh5co-counter,
  336. .fh5co-bg{
  337. background-size: cover;
  338. background-position: top center;
  339. background-repeat: no-repeat;
  340. position: relative;
  341. }
  342. .fh5co-video {
  343. overflow: hidden;
  344. @media screen and (max-width: $screen-md){
  345. height: 450px;
  346. }
  347. a {
  348. z-index: 1001;
  349. position: absolute;
  350. top: 50%;
  351. left: 50%;
  352. margin-top: -45px;
  353. margin-left: -45px;
  354. width: 90px;
  355. height: 90px;
  356. display: table;
  357. text-align: center;
  358. background: $brand-white;
  359. -webkit-box-shadow: 0px 14px 30px -15px rgba(0,0,0,0.75);
  360. -moz-box-shadow: 0px 14px 30px -15px rgba(0,0,0,0.75);
  361. -ms-box-shadow: 0px 14px 30px -15px rgba(0,0,0,0.75);
  362. -o-box-shadow: 0px 14px 30px -15px rgba(0,0,0,0.75);
  363. box-shadow: 0px 14px 30px -15px rgba(0,0,0,0.75);
  364. @include border-radius(50%);
  365. i {
  366. text-align: center;
  367. display: table-cell;
  368. vertical-align: middle;
  369. font-size: 40px;
  370. }
  371. }
  372. .overlay {
  373. position: absolute;
  374. top: 0;
  375. left: 0;
  376. right: 0;
  377. bottom: 0;
  378. background: rgba(0, 0, 0, .3);
  379. @include transition(.5s);
  380. }
  381. &:hover {
  382. .overlay {
  383. background: rgba(0, 0, 0, .7);
  384. }
  385. a {
  386. -webkit-transform: scale(1.1);
  387. -moz-transform: scale(1.1);
  388. -ms-transform: scale(1.1);
  389. -o-transform: scale(1.1);
  390. transform: scale(1.1);
  391. }
  392. }
  393. }
  394. #fh5co-hero {
  395. min-height: 500px;
  396. background: $brand-white url(../images/loader.gif) no-repeat center center;
  397. width: 100%;
  398. float: left;
  399. .btn {
  400. font-size: 24px;
  401. &.btn-primary {
  402. padding: 14px 30px!important;
  403. }
  404. }
  405. .flexslider {
  406. border: none;
  407. z-index: 1;
  408. margin-bottom: 0;
  409. .slides {
  410. position: relative;
  411. overflow: hidden;
  412. li {
  413. background-repeat: no-repeat;
  414. background-size: cover;
  415. background-position: bottom center;
  416. min-height: 500px;
  417. position: relative;
  418. }
  419. }
  420. .flex-control-nav {
  421. bottom: 80px;
  422. z-index: 1000;
  423. right: 20px;
  424. float: right;
  425. width: auto;
  426. li {
  427. display: block;
  428. margin-bottom: 10px;
  429. a {
  430. background: rgba(255,255,255,.8);
  431. box-shadow: none;
  432. width: 12px;
  433. height: 12px;
  434. cursor: pointer;
  435. &.flex-active {
  436. cursor: pointer;
  437. background: transparent;
  438. border: 2px solid $brand-primary;
  439. }
  440. }
  441. }
  442. }
  443. .flex-direction-nav {
  444. display: none;
  445. }
  446. .slider-text{
  447. display: table;
  448. opacity: 0;
  449. min-height: 500px;
  450. z-index: 9;
  451. > .slider-text-inner {
  452. display: table-cell;
  453. vertical-align: middle;
  454. min-height: 700px;
  455. padding: 2em;
  456. @media screen and (max-width: $screen-sm ) {
  457. text-align: center;
  458. }
  459. h1, h2 {
  460. margin: 0;
  461. padding: 0;
  462. color: white;
  463. font-family: $font-primary;
  464. }
  465. h1 {
  466. margin-bottom: 20px;
  467. font-size: 30px;
  468. line-height: 1.3;
  469. font-weight: 300;
  470. @media screen and (max-width: $screen-sm) {
  471. font-size: 28px;
  472. }
  473. }
  474. h2 {
  475. font-size: 18px;
  476. line-height: 1.5;
  477. margin-bottom: 30px;
  478. a{
  479. color: rgba($brand-primary,.8);
  480. border-bottom: 1px solid rgba($brand-primary,.7)
  481. }
  482. }
  483. .heading-section{
  484. font-size: 50px;
  485. @media screen and (max-width: $screen-sm){
  486. font-size: 30px;
  487. }
  488. }s
  489. .fh5co-lead{
  490. font-size: 20px;
  491. color: $brand-white;
  492. .icon-heart {
  493. color: $brand-danger;
  494. }
  495. }
  496. .btn{
  497. font-size: 12px;
  498. text-transform: uppercase;
  499. letter-spacing: 2px;
  500. color: $brand-black;
  501. padding: 20px 30px !important;
  502. border: none;
  503. &.btn-learn{
  504. background: $brand-white;
  505. }
  506. @media screen and (max-width: $screen-sm ) {
  507. width: 100%;
  508. }
  509. }
  510. }
  511. }
  512. }
  513. }
  514. .fh5co-light-grey{
  515. background: lighten($brand-black,98%);
  516. }
  517. #fh5co-about,
  518. #fh5co-services,
  519. #fh5co-contact,
  520. #fh5co-work,
  521. #fh5co-blog,
  522. #fh5co-counter,
  523. #fh5co-footer {
  524. padding: 6em 3em;
  525. clear: both;
  526. @media screen and (max-width: $screen-sm) {
  527. padding: 3em 1em;
  528. }
  529. }
  530. //SERVICES
  531. .services{
  532. position: relative;
  533. @include transition(.3s);
  534. h3{
  535. font-size: 13px;
  536. font-family: $font-secondary;
  537. text-transform: uppercase;
  538. letter-spacing: 1px;
  539. font-weight: 700;
  540. a{
  541. color: $brand-black;
  542. }
  543. }
  544. .icon {
  545. // width: 90px;
  546. // height: 90px;
  547. // background: $brand-primary;
  548. display: table;
  549. text-align: center;
  550. margin:0 auto;
  551. margin-bottom: 30px;
  552. @include border-radius(50%);
  553. @include transition(.3s);
  554. @media screen and (max-width: $screen-md){
  555. margin: 0 auto 30px auto;
  556. }
  557. i {
  558. display: table-cell;
  559. vertical-align: middle;
  560. // height: 90px;
  561. font-size: 40px;
  562. line-height: 40px;
  563. color: $brand-black;
  564. }
  565. }
  566. }
  567. // WORK
  568. .work{
  569. background-size: cover;
  570. background-position: center center;
  571. background-repeat: no-repeat;
  572. position: relative;
  573. height: 270px;
  574. width: 100%;
  575. display: table;
  576. overflow: hidden;
  577. margin-bottom: 30px;
  578. @media screen and(max-width: $screen-sm){
  579. height: 400px;
  580. }
  581. @media screen and(max-width: $screen-xs){
  582. height: 270px;
  583. }
  584. .desc{
  585. display: table-cell;
  586. vertical-align: middle;
  587. height: 270px;
  588. background: $brand-white;
  589. opacity: 0;
  590. @include transition(.3s);
  591. h3{
  592. font-size: 14px;
  593. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  594. transition: transform 0.3s, opacity 0.3s;
  595. -webkit-transform: translate3d(0, -15px, 0);
  596. transform: translate3d(0, -15px, 0);
  597. }
  598. span{
  599. display: block;
  600. color: lighten($brand-black,60%);
  601. font-size: 12px;
  602. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  603. transition: transform 0.3s, opacity 0.3s;
  604. -webkit-transform: translate3d(0, 15px, 0);
  605. transform: translate3d(0, 15px, 0);
  606. }
  607. @media screen and(max-width: $screen-sm){
  608. opacity: 1;
  609. background: transparent !important;
  610. h3{
  611. -webkit-transform: translate3d(0, 0, 0);
  612. transform: translate3d(0, 0, 0);
  613. }
  614. span{
  615. -webkit-transform: translate3d(0, 0, 0);
  616. transform: translate3d(0, 0, 0);
  617. }
  618. }
  619. }
  620. &:hover{
  621. .desc{
  622. opacity: 1;
  623. h3{
  624. -webkit-transform: translate3d(0, 0, 0);
  625. transform: translate3d(0, 0, 0);
  626. }
  627. span{
  628. -webkit-transform: translate3d(0, 0, 0);
  629. transform: translate3d(0, 0, 0);
  630. }
  631. }
  632. }
  633. }
  634. // Counters
  635. .fh5co-counters {
  636. padding: 3em 0;
  637. background-size: cover;
  638. background-attachment: fixed;
  639. background-position: center center;
  640. .counter-wrap{
  641. border: 1px solid red !important;
  642. }
  643. .fh5co-counter {
  644. font-size: 40px;
  645. display: block;
  646. color: rgba($brand-black,1);
  647. // font-family: $font-primary;
  648. width: 100%;
  649. font-weight: 400;
  650. margin-bottom: .3em;
  651. font-family: $font-secondary;
  652. }
  653. .fh5co-counter-label {
  654. font-size: 12px;
  655. margin-bottom: 2em;
  656. display: block;
  657. text-transform: uppercase;
  658. letter-spacing: 1px;
  659. font-family: $font-secondary;
  660. font-weight: 600;
  661. color: lighten($brand-black,50%);
  662. }
  663. }
  664. // BLOG
  665. .fh5co-blog{
  666. width: 100%;
  667. float: left;
  668. margin-bottom: 30px;
  669. @media screen and (max-width: $screen-sm) {
  670. width: 100%;
  671. }
  672. .blog-bg{
  673. display: block;
  674. width: 100%;
  675. background-size: cover;
  676. background-position: center center;
  677. background-repeat: no-repeat;
  678. position: relative;
  679. height: 270px;
  680. @media screen and(max-width: $screen-sm){
  681. height: 300px;
  682. }
  683. }
  684. .blog-text {
  685. position: relative;
  686. width: 100%;
  687. padding: 30px;
  688. float: left;
  689. border: 1px solid rgba($brand-black,.05);
  690. @include transition(.3s);
  691. span{
  692. display: inline-block;
  693. margin-bottom: 20px;
  694. font-size: 14px !important;
  695. color: rgba($brand-black,.3);
  696. }
  697. .stuff{
  698. margin: 0;
  699. padding: 0;
  700. border-top: 1px solid rgba($brand-black,.05);
  701. padding-top: 20px;
  702. li{
  703. list-style: none;
  704. display: inline-block;
  705. margin-left: 10px;
  706. &:first-child{
  707. margin-left: 0;
  708. }
  709. &:last-child{
  710. float: right;
  711. i{
  712. padding-right: 0;
  713. padding-left: 10px;
  714. }
  715. }
  716. i{
  717. font-size: 14px;
  718. padding-right: 5px;
  719. }
  720. }
  721. }
  722. h3{
  723. font-size: 13px;
  724. margin-bottom: 20px;
  725. line-height: 1.5;
  726. font-weight: 700;
  727. letter-spacing: 1px;
  728. text-transform: uppercase;
  729. font-family: $font-secondary;
  730. a{
  731. color: rgba($brand-black,1);
  732. }
  733. }
  734. }
  735. }
  736. .blog-flex{
  737. @include flex();
  738. @include flexwrap();
  739. width: 100%;
  740. padding: 0 !important;
  741. .featured-blog, .blog-entry{
  742. width: 50%;
  743. @media screen and (max-width: $screen-sm) {
  744. width: 100%;
  745. }
  746. }
  747. .featured-blog{
  748. padding: 2em;
  749. width: 50%;
  750. background-size: cover;
  751. background-position: center center;
  752. background-repeat: no-repeat;
  753. position: relative;
  754. @include flex();
  755. @include flexwrap();
  756. @media screen and (max-width: $screen-sm) {
  757. width: 100%;
  758. }
  759. &:before{
  760. position: absolute;
  761. top: 15px;
  762. bottom: 15px;
  763. left: 15px;
  764. right: 15px;
  765. content: '';
  766. border: 1px solid rgba($brand-white,.4);
  767. }
  768. .desc-t{
  769. display: table;
  770. min-height: 430px;
  771. padding: 2em;
  772. z-index: 1;
  773. .desc-tc{
  774. display: table-cell;
  775. vertical-align: middle;
  776. height: inherit;
  777. z-index: 1;
  778. }
  779. .featured-head{
  780. display: block;
  781. margin-bottom: 30px;
  782. font-size: 18px !important;
  783. color: rgba($brand-white,.8);
  784. }
  785. h3{
  786. font-weight: 700;
  787. font-family: $font-primary;
  788. font-size: 30px;
  789. margin-bottom: 10px;
  790. line-height: 40px;
  791. margin-bottom: 30px;
  792. @media screen and (max-width: $screen-sm) {
  793. font-size: 24px;
  794. }
  795. a{
  796. color: $brand-white;
  797. }
  798. }
  799. p{
  800. font-size: 16px;
  801. color: rgba($brand-white,.8)
  802. }
  803. .read-button{
  804. text-transform: uppercase;
  805. letter-spacing: 2px;
  806. font-weight: 600;
  807. font-size: 14px;
  808. font-family: $font-secondary;
  809. color: rgba($brand-white,1);
  810. border: 1px solid red;
  811. padding: 10px 15px;
  812. border: 1px solid rgba($brand-white,1);
  813. color: $brand-white;
  814. }
  815. }
  816. }
  817. ///////////
  818. .blog-entry{
  819. padding: 4em;
  820. @media screen and (max-width: $screen-sm) {
  821. padding: 4em 1em;
  822. }
  823. h2{
  824. display: block;
  825. font-size: 13px;
  826. text-transform: uppercase;
  827. letter-spacing: 1px;
  828. font-weight: 700;
  829. margin-bottom: 40px;
  830. color: rgba($brand-black,.4)
  831. }
  832. .blog-post{
  833. margin-bottom: 2.5em;
  834. display: block;
  835. position: relative;
  836. .desc{
  837. padding-left: 110px;
  838. h3{
  839. font-weight: 300;
  840. font-family: $font-primary;
  841. font-size: 16px;
  842. line-height: 30px;
  843. margin-bottom: 10px;
  844. }
  845. span{
  846. font-size: 13px;
  847. color: lighten($brand-black,70%);
  848. }
  849. }
  850. .img{
  851. position: absolute;
  852. top: 0;
  853. left: 0;
  854. display: block;
  855. width: 90px;
  856. height: 90px;
  857. background-size: cover;
  858. background-position: center center;
  859. background-repeat: no-repeat;
  860. border: 4px solid $brand-white;
  861. @include border-radius(50%);
  862. }
  863. }
  864. }
  865. }
  866. // Contact
  867. .contact-info{
  868. margin-bottom: 4em;
  869. padding: 0;
  870. li{
  871. // font-size: 16px;
  872. list-style: none;
  873. margin: 0 0 20px 0;
  874. position: relative;
  875. padding-left: 40px;
  876. color: $brand-black;
  877. i{
  878. position: absolute;
  879. top: .3em;
  880. left: 0;
  881. font-size: 18px;
  882. color: rgba($brand-black,.3);
  883. }
  884. a{
  885. color: $brand-black;
  886. }
  887. }
  888. }
  889. .form-control {
  890. -webkit-box-shadow: none;
  891. -moz-box-shadow: none;
  892. -ms-box-shadow: none;
  893. -o-box-shadow: none;
  894. box-shadow: none;
  895. border: none;
  896. font-size: 13px !important;
  897. font-weight: 300;
  898. @include border-radius(0px);
  899. &:focus, &:active {
  900. box-shadow: none;
  901. border: 2px solid rgba(0,0,0,.8);
  902. }
  903. }
  904. input[type="text"] {
  905. height: 50px;
  906. }
  907. .form-group {
  908. margin-bottom: 30px;
  909. .btn-modify{
  910. font-family: $font-secondary;
  911. text-transform: uppercase;
  912. letter-spacing: 1px;
  913. font-weight: 700;
  914. font-size: 13px;
  915. padding: 10px 15px;
  916. }
  917. }
  918. .fh5co-social-icons {
  919. margin: 0;
  920. padding: 0;
  921. li {
  922. margin: 0;
  923. padding: 0;
  924. list-style: none;
  925. @include inline-block;
  926. a {
  927. @include inline-block;
  928. color: $brand-primary;
  929. padding-left: 10px;
  930. padding-right: 10px;
  931. i {
  932. font-size: 20px;
  933. }
  934. }
  935. }
  936. }
  937. .fh5co-heading {
  938. margin-bottom: 5em;
  939. &.fh5co-heading-sm {
  940. margin-bottom: 2em;
  941. }
  942. h2 {
  943. font-size: 13px;
  944. margin-bottom: 20px;
  945. line-height: 1.5;
  946. font-weight: 700;
  947. font-family: $font-secondary;
  948. letter-spacing: 1px;
  949. text-transform: uppercase;
  950. color: $brand-black;
  951. }
  952. span{
  953. display: block;
  954. margin-bottom: 10px;
  955. text-transform: uppercase;
  956. font-size: 12px;
  957. letter-spacing: 2px;
  958. }
  959. }
  960. #fh5co-footer {
  961. margin-top: 20px !important;
  962. .fh5co-footer-links {
  963. padding: 0;
  964. margin: 0;
  965. @media screen and(max-width: $screen-sm){
  966. margin-bottom: 30px;
  967. }
  968. li {
  969. padding: 0;
  970. margin: 0 0 10px 0;
  971. list-style: none;
  972. display: block;
  973. a {
  974. color: rgba($brand-black,.5);
  975. text-decoration: none;
  976. &:hover {
  977. text-decoration: underline;
  978. }
  979. }
  980. }
  981. }
  982. h4 {
  983. margin-bottom: 15px;
  984. font-weight: 700;
  985. font-size: 13px;
  986. letter-spacing: 1px;
  987. text-transform: uppercase;
  988. }
  989. .copyright {
  990. display: block;
  991. margin-top: 3em;
  992. .block {
  993. display: block;
  994. }
  995. }
  996. }
  997. // off canvas
  998. #fh5co-offcanvas {
  999. position: absolute;
  1000. z-index: 1901;
  1001. width: 270px;
  1002. background: lighten($brand-black, 0%);
  1003. top: 0;
  1004. right: 0;
  1005. top: 0;
  1006. bottom: 0;
  1007. padding: 75px 40px 40px 40px;
  1008. overflow-y: auto;
  1009. display: none;
  1010. @include translateX(270px);
  1011. @include transition(.5s);
  1012. @media screen and(max-width: $screen-sm){
  1013. display: block;
  1014. }
  1015. .offcanvas & {
  1016. @include translateX(0px);
  1017. }
  1018. a {
  1019. color: rgba(255,255,255,.5);
  1020. &:hover {
  1021. color: rgba(255,255,255,.8);
  1022. }
  1023. }
  1024. ul {
  1025. padding: 0;
  1026. margin: 0;
  1027. li {
  1028. padding: 0;
  1029. margin: 0;
  1030. list-style: none;
  1031. > ul {
  1032. padding-left: 20px;
  1033. display: none;
  1034. }
  1035. &.offcanvas-has-dropdown {
  1036. > a {
  1037. display: block;
  1038. position: relative;
  1039. &:after {
  1040. position: absolute;
  1041. right: 0px;
  1042. @include icomoon;
  1043. content: "\e0c5";
  1044. font-size: 20px;
  1045. color: rgba(255,255,255,.2);
  1046. @include transition(.5s);
  1047. }
  1048. }
  1049. &.active {
  1050. a {
  1051. &:after {
  1052. -webkit-transform: rotate(-180deg);
  1053. -moz-transform: rotate(-180deg);
  1054. -ms-transform: rotate(-180deg);
  1055. -o-transform: rotate(-180deg);
  1056. transform: rotate(-180deg);
  1057. }
  1058. }
  1059. }
  1060. }
  1061. }
  1062. }
  1063. }
  1064. .gototop {
  1065. position: fixed;
  1066. bottom: 20px;
  1067. right: 20px;
  1068. z-index: 999;
  1069. opacity: 0;
  1070. visibility: hidden;
  1071. @include transition(.5s);
  1072. &.active {
  1073. opacity: 1;
  1074. visibility: visible;
  1075. }
  1076. a {
  1077. width: 50px;
  1078. height: 50px;
  1079. display: table;
  1080. background: rgba(0,0,0,.5);
  1081. color: $brand-white;
  1082. text-align: center;
  1083. @include border-radius(4px);
  1084. i {
  1085. height: 50px;
  1086. display: table-cell;
  1087. vertical-align: middle;
  1088. }
  1089. &:hover, &:active, &:focus {
  1090. text-decoration: none;
  1091. outline: none;
  1092. }
  1093. }
  1094. }
  1095. // Burger Menu
  1096. .fh5co-nav-toggle {
  1097. width:25px;
  1098. height:25px;
  1099. cursor: pointer;
  1100. text-decoration: none;
  1101. top: 25px !important;
  1102. &.active i {
  1103. &::before, &::after {
  1104. background: $brand-darker;
  1105. }
  1106. }
  1107. &:hover, &:focus, &:active {
  1108. outline: none;
  1109. border-bottom: none!important;
  1110. }
  1111. i {
  1112. position: relative;
  1113. display: inline-block;
  1114. width: 25px;
  1115. height: 2px;
  1116. color: #252525;
  1117. font:bold 14px/.4 Helvetica;
  1118. text-transform: uppercase;
  1119. text-indent:-55px;
  1120. background: #252525;
  1121. transition: all .2s ease-out;
  1122. &::before, &::after {
  1123. content:'';
  1124. width: 25px;
  1125. height: 2px;
  1126. background: #252525;
  1127. position: absolute;
  1128. left:0;
  1129. transition:all .2s ease-out;
  1130. }
  1131. }
  1132. &.fh5co-nav-white {
  1133. > i {
  1134. color:$brand-white;
  1135. background: $brand-black;
  1136. &::before, &::after {
  1137. background: $brand-black;
  1138. }
  1139. }
  1140. }
  1141. }
  1142. .fh5co-nav-toggle i::before {
  1143. top: -7px;
  1144. }
  1145. .fh5co-nav-toggle i::after {
  1146. bottom: -7px;
  1147. }
  1148. .fh5co-nav-toggle:hover i::before {
  1149. top: -10px;
  1150. }
  1151. .fh5co-nav-toggle:hover i::after {
  1152. bottom: -10px;
  1153. }
  1154. .fh5co-nav-toggle.active i {
  1155. background: transparent;
  1156. }
  1157. .fh5co-nav-toggle.active i::before {
  1158. top:0;
  1159. -webkit-transform: rotateZ(45deg);
  1160. -moz-transform: rotateZ(45deg);
  1161. -ms-transform: rotateZ(45deg);
  1162. -o-transform: rotateZ(45deg);
  1163. transform: rotateZ(45deg);
  1164. background: $brand-white;
  1165. }
  1166. .fh5co-nav-toggle.active i::after {
  1167. bottom:0;
  1168. -webkit-transform: rotateZ(-45deg);
  1169. -moz-transform: rotateZ(-45deg);
  1170. -ms-transform: rotateZ(-45deg);
  1171. -o-transform: rotateZ(-45deg);
  1172. transform: rotateZ(-45deg);
  1173. background: $brand-white;
  1174. }
  1175. .fh5co-nav-toggle {
  1176. position: absolute;
  1177. right: 0px;
  1178. top: 65px;
  1179. z-index: 21;
  1180. padding: 6px 0 0 0;
  1181. display: block;
  1182. margin: 0 auto;
  1183. display: none;
  1184. // background: #f86942;
  1185. height: 44px;
  1186. width: 44px;
  1187. z-index: 2001;
  1188. border-bottom: none!important;
  1189. @media screen and (max-width: $screen-sm) {
  1190. display: block;
  1191. }
  1192. }
  1193. // Buttons
  1194. .btn {
  1195. margin-right: 4px;
  1196. margin-bottom: 4px;
  1197. font-family: $font-primary;
  1198. font-size: 16px;
  1199. font-weight: 400;
  1200. @include border-radius(1px);
  1201. @include transition(.5s);
  1202. padding: 8px 20px;
  1203. &.btn-md {
  1204. padding: 8px 20px!important;
  1205. }
  1206. &.btn-lg {
  1207. padding: 18px 36px!important;
  1208. }
  1209. &:hover, &:active, &:focus {
  1210. box-shadow: none!important;
  1211. outline: none!important;
  1212. }
  1213. }
  1214. .btn-primary {
  1215. background: $brand-primary;
  1216. color: $brand-white;
  1217. border: 2px solid $brand-primary;
  1218. &:hover, &:focus, &:active {
  1219. background: lighten($brand-primary, 5%)!important;
  1220. border-color: lighten($brand-primary, 5%)!important;
  1221. }
  1222. &.btn-outline {
  1223. background: transparent;
  1224. color: $brand-primary;
  1225. border: 2px solid $brand-primary;
  1226. &:hover, &:focus, &:active {
  1227. background: $brand-primary;
  1228. color: $brand-white;
  1229. }
  1230. }
  1231. }
  1232. .btn-success {
  1233. background: $brand-success;
  1234. color: $brand-white;
  1235. border: 2px solid $brand-success;
  1236. &:hover, &:focus, &:active {
  1237. background: darken($brand-success, 5%)!important;
  1238. border-color: darken($brand-success, 5%)!important;
  1239. }
  1240. &.btn-outline {
  1241. background: transparent;
  1242. color: $brand-success;
  1243. border: 2px solid $brand-success;
  1244. &:hover, &:focus, &:active {
  1245. background: $brand-success;
  1246. color: $brand-white;
  1247. }
  1248. }
  1249. }
  1250. .btn-info {
  1251. background: $brand-info;
  1252. color: $brand-white;
  1253. border: 2px solid $brand-info;
  1254. &:hover, &:focus, &:active {
  1255. background: darken($brand-info, 5%)!important;
  1256. border-color: darken($brand-info, 5%)!important;
  1257. }
  1258. &.btn-outline {
  1259. background: transparent;
  1260. color: $brand-info;
  1261. border: 2px solid $brand-info;
  1262. &:hover, &:focus, &:active {
  1263. background: $brand-info;
  1264. color: $brand-white;
  1265. }
  1266. }
  1267. }
  1268. .btn-warning {
  1269. background: $brand-warning;
  1270. color: $brand-white;
  1271. border: 2px solid $brand-warning;
  1272. &:hover, &:focus, &:active {
  1273. background: darken($brand-warning, 5%)!important;
  1274. border-color: darken($brand-warning, 5%)!important;
  1275. }
  1276. &.btn-outline {
  1277. background: transparent;
  1278. color: $brand-warning;
  1279. border: 2px solid $brand-warning;
  1280. &:hover, &:focus, &:active {
  1281. background: $brand-warning;
  1282. color: $brand-white;
  1283. }
  1284. }
  1285. }
  1286. .btn-danger {
  1287. background: $brand-danger;
  1288. color: $brand-white;
  1289. border: 2px solid $brand-danger;
  1290. &:hover, &:focus, &:active {
  1291. background: darken($brand-danger, 5%)!important;
  1292. border-color: darken($brand-danger, 5%)!important;
  1293. }
  1294. &.btn-outline {
  1295. background: transparent;
  1296. color: $brand-danger;
  1297. border: 2px solid $brand-danger;
  1298. &:hover, &:focus, &:active {
  1299. background: $brand-danger;
  1300. color: $brand-white;
  1301. }
  1302. }
  1303. }
  1304. .btn-outline {
  1305. background: none;
  1306. border: 2px solid lighten($brand-black, 50%);
  1307. font-size: 16px;
  1308. @include transition(.3s);
  1309. &:hover, &:focus, &:active {
  1310. box-shadow: none;
  1311. }
  1312. }
  1313. .btn.with-arrow {
  1314. position: relative;
  1315. @include transition(.3s);
  1316. i {
  1317. visibility: hidden;
  1318. opacity: 0;
  1319. position: absolute;
  1320. right: 0px;
  1321. top: 50%;
  1322. margin-top: -8px;
  1323. @include transition(.2s);
  1324. }
  1325. &:hover {
  1326. padding-right: 50px;
  1327. i {
  1328. color: $brand-white;
  1329. right: 18px;
  1330. visibility: visible;
  1331. opacity: 1;
  1332. }
  1333. }
  1334. }
  1335. // Form Input Field
  1336. .form-control {
  1337. box-shadow: none;
  1338. background: transparent;
  1339. border: 2px solid rgba(0, 0, 0, 0.1);
  1340. height: 54px;
  1341. font-size: 18px;
  1342. font-weight: 300;
  1343. &:active, &:focus {
  1344. outline: none;
  1345. box-shadow: none;
  1346. border-color: $brand-primary;
  1347. }
  1348. }
  1349. .row-pb-md {
  1350. padding-bottom: 4em!important;
  1351. }
  1352. .row-pb-sm {
  1353. padding-bottom: 2em!important;
  1354. }
  1355. .nopadding {
  1356. padding: 0 !important;
  1357. margin: 0 !important;
  1358. }
  1359. .fh5co-loader {
  1360. position: fixed;
  1361. left: 0px;
  1362. top: 0px;
  1363. width: 100%;
  1364. height: 100%;
  1365. z-index: 9999;
  1366. background: url(../images/loader.gif) center no-repeat #fff;
  1367. }
  1368. .animate-box {
  1369. .js & {
  1370. opacity: 0;
  1371. }
  1372. }
  1373. .img-portfolio-detail {
  1374. margin-bottom: 20px;
  1375. float: left;
  1376. }
  1377. .fh5co-project-detail {
  1378. .fh5co-project-title {
  1379. font-size: 20px;
  1380. margin-bottom: 5px;
  1381. }
  1382. .fh5co-project-sub {
  1383. color: rgba(0, 0, 0, .3);
  1384. margin-bottom: 20px;
  1385. display: block;
  1386. font-weight: 400;
  1387. }
  1388. .fh5co-project-service {
  1389. h3 {
  1390. font-size: 18px;
  1391. margin-bottom: 5px;
  1392. }
  1393. ul {
  1394. li, & {
  1395. padding: 0;
  1396. margin: 0;
  1397. }
  1398. li {
  1399. color: ligthen($brand-black, 70%);
  1400. list-style: none;
  1401. color: rgba(0, 0, 0, .3);
  1402. font-weight: 400;
  1403. }
  1404. }
  1405. }
  1406. }
  1407. .blurred-card {
  1408. width: 100%;
  1409. height: 100%;
  1410. position: relative;
  1411. box-shadow: 2px 2px 9px 2px black;
  1412. overflow: hidden;
  1413. color: white;
  1414. padding: 20px;
  1415. }
  1416. .blurred-card > .background-faker {
  1417. position: absolute;
  1418. top: 0;
  1419. left: 0;
  1420. background: black;
  1421. width: 100%;
  1422. height: 100%;
  1423. }
  1424. .blurred-card > .background-faker > div {
  1425. width: calc(100vw - 15px);
  1426. height: 500px;
  1427. position: absolute;
  1428. top: 50%;
  1429. left: 50%;
  1430. transform: translate(-50%, -50%);
  1431. background-repeat: no-repeat;
  1432. background-position: bottom center;
  1433. background-size: cover;
  1434. filter: blur(10px);
  1435. opacity: 0.6;
  1436. max-width: 1060px;
  1437. }
  1438. .col-md-pull-3 .blurred-card > .background-faker > div {
  1439. left: calc(-1 * (15px + 2em));
  1440. right: auto;
  1441. transform: translate(0, -50%);
  1442. }
  1443. .col-md-push-3 .blurred-card > .background-faker > div {
  1444. right: calc(-1 * (15px + 2em));
  1445. left: auto;
  1446. transform: translate(0, -50%);
  1447. }
  1448. @media screen and (max-width: 992px) {
  1449. .col-md-push-3 .blurred-card > .background-faker > div,
  1450. .col-md-pull-3 .blurred-card > .background-faker > div
  1451. {
  1452. right: auto;
  1453. left: calc(-1 * (15px + 2em));
  1454. transform: translate(0, -50%);
  1455. }
  1456. }
  1457. .blurred-card > .card-content {
  1458. position: absolute;
  1459. width: 100%;
  1460. height: 100%;
  1461. top: 0;
  1462. left: 0;
  1463. padding: 20px;
  1464. }