Advertisement
Guest User

Untitled

a guest
May 22nd, 2014
33
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.25 KB | None | 0 0
  1. /* Hide Defaults */
  2.  
  3.  
  4. /* Main Elemeents */
  5. html,
  6. body {
  7. margin: 0;
  8. padding: 0;
  9. height: 100%;
  10. }
  11. a {
  12. -webkit-transition: all 0.2s linear;
  13. transition: all 0.2s linear;
  14. color: #00a3cc;
  15. }
  16. a:hover {
  17. color: #007a99;
  18. text-decoration: none;
  19. }
  20. img {
  21. max-width: 100%;
  22. }
  23. p,
  24. ul,
  25. ol,
  26. address {
  27. margin: 0;
  28. }
  29. hr {
  30. border-color: #f0f0f0;
  31. margin: 30px 0;
  32. }
  33. img {
  34. padding:1px;
  35. border:1px solid #021a40;
  36. background-color:#ff0;
  37. }
  38.  
  39. /* Preloader */
  40. #preloader {
  41. position: fixed;
  42. top: 0;
  43. left: 0;
  44. right: 0;
  45. bottom: 0;
  46. background-color: #e1e1e1;
  47. z-index: 9999;
  48. }
  49. #status {
  50. width: 200px;
  51. height: 200px;
  52. position: absolute;
  53. left: 50%;
  54. top: 50%;
  55. background-image: url(../img/misc/loading.gif);
  56. background-repeat: no-repeat;
  57. background-position: center;
  58. margin: -100px 0 0 -100px;
  59. }
  60.  
  61. /* Typography */
  62. body {
  63. font-family: 'Muli', sans-serif;
  64. color: #202020;
  65. font-size: 16px;
  66. font-weight: 300;
  67. line-height: 180%;
  68. background: #000000;
  69. }
  70. h1,
  71. h2,
  72. h3,
  73. h4,
  74. h5,
  75. h6,
  76. .hfont {
  77. font-family: 'Raleway', sans-serif;
  78. color: #202020;
  79. font-weight: 300;
  80. line-height: 160%;
  81. margin: 0;
  82. }
  83. h1 {
  84. font-size: 40px;
  85. }
  86. h2 {
  87. font-size: 36px;
  88. }
  89. h3 {
  90. font-size: 32px;
  91. }
  92. h4 {
  93. font-size: 28px;
  94. }
  95. h5 {
  96. font-size: 24px;
  97. }
  98. h6 {
  99. font-size: 20px;
  100. }
  101. address {
  102. line-height: 180%;
  103. }
  104.  
  105. /* Helpers */
  106. .hidden {
  107. display: none;
  108. }
  109. .small {
  110. font-size: 80%;
  111. }
  112. .white,
  113. .white > * {
  114. color: #FFFFFF !important;
  115. }
  116. .sidebar-left .main-column {
  117. float: right;
  118. }
  119.  
  120. /* Overlays */
  121. .overlay:after {
  122. content: '';
  123. display: block;
  124. width: 100%;
  125. height: 100%;
  126. position: absolute;
  127. top: 0;
  128. z-index: 0;
  129. }
  130. .overlay-grid:after {
  131. background: url(../img/misc/overlay-grid.png);
  132. }
  133. .overlay-grid-2:after {
  134. background: url(../img/misc/overlay-grid-2.png);
  135. }
  136. .overlay-dark-25:after {
  137. background-color: rgba(0, 0, 0, 0.25);
  138. }
  139. .overlay-dark-50:after {
  140. background-color: rgba(0, 0, 0, 0.5);
  141. }
  142. .overlay-dark-75:after {
  143. background-color: rgba(0, 0, 0, 0.75);
  144. }
  145. .overlay-light-25:after {
  146. background-color: rgba(255, 255, 255, 0.25);
  147. }
  148. .overlay-light-50:after {
  149. background-color: rgba(255, 255, 255, 0.5);
  150. }
  151. .overlay-light-75:after {
  152. background-color: rgba(255, 255, 255, 0.75);
  153. }
  154.  
  155. /* Clearfix */
  156. .cf:before,
  157. .cf:after {
  158. content: ' ';
  159. display: table;
  160. }
  161. .cf:after {
  162. clear: both;
  163. }
  164. .cf {
  165. *zoom: 1;
  166. }
  167. /* Responsive */
  168. @media (max-width: 991px) {
  169. .sidebar-left .main-column {
  170. float: none;
  171. }
  172. }
  173.  
  174. /* Header */
  175. #top {
  176. background-color: #ffffff;
  177. width: 100%;
  178. height: 100px;
  179. position: absolute;
  180. top: 0;
  181. z-index: 1;
  182. -webkit-transition: all 0.2s linear;
  183. transition: all 0.2s linear;
  184. }
  185. #top.shadow {
  186. box-shadow: 0px 0px 20px -10px #000000;
  187. }
  188. .sidebar-open #top.shadow,
  189. #top.portfolio-open {
  190. box-shadow: none !important;
  191. }
  192.  
  193. /* Sidebar */
  194. #sidebar-button {
  195. width: 27px;
  196. height: 21px;
  197. background: url("../img/svg/menu-icon.svg") no-repeat;
  198. position: absolute;
  199. left: 40px;
  200. top: 50%;
  201. margin-top: -10px;
  202. }
  203. #sidebar-button.open {
  204. -ms-transform: rotate(90deg);
  205. -webkit-transform: rotate(90deg);
  206. transform: rotate(90deg);
  207. }
  208.  
  209. /* Logo */
  210. #logo {
  211. text-align: center;
  212. position: absolute;
  213. top: 50%;
  214. left: 50%;
  215. text-transform: uppercase;
  216. -ms-transform: translate(-50%, -50%);
  217. -webkit-transform: translate(-50%, -50%);
  218. transform: translate(-50%, -50%);
  219. }
  220. #logo h1 {
  221. letter-spacing: 5px;
  222. font-size: 26px;
  223. }
  224. #logo h2 {
  225. letter-spacing: 8px;
  226. font-size: 13px;
  227. opacity: 0.5;
  228. }
  229.  
  230. /* Slider nav arrows */
  231. #nav-arrows {
  232. width: 35px;
  233. height: 21px;
  234. position: absolute;
  235. right: 40px;
  236. top: 50%;
  237. -ms-transform: translateY(-50%);
  238. -webkit-transform: translateY(-50%);
  239. transform: translateY(-50%);
  240. }
  241. #nav-arrows a {
  242. width: 11px;
  243. height: 100%;
  244. background-repeat: no-repeat;
  245. }
  246. #nav-arrows a.nav-left {
  247. background-image: url("../img/svg/nav-left.svg");
  248. margin-right: 13px;
  249. float: left;
  250. }
  251. #nav-arrows a.nav-right {
  252. background-image: url("../img/svg/nav-right.svg");
  253. float: right;
  254. }
  255.  
  256. /* Close Entry */
  257. #portfolio-close {
  258. width: 21px;
  259. height: 21px;
  260. background: url("../img/svg/close-icon.svg") no-repeat;
  261. position: absolute;
  262. right: 40px;
  263. top: -21px;
  264. opacity: 1;
  265. }
  266. .portfolio-open #portfolio-close {
  267. opacity: 1;
  268. top: 50%;
  269. margin-top: -10px;
  270. }
  271.  
  272. /* Main Wrapper */
  273. #main-wrapper {
  274. width: 100%;
  275. height: 100%;
  276. top: 0;
  277. padding-top: 100px;
  278. z-index: 0;
  279. position: relative;
  280. overflow: hidden;
  281. }
  282.  
  283. /* Content */
  284. #content {
  285. position: relative;
  286. left: 0;
  287. z-index: 9999;
  288. height: 100%;
  289. -webkit-transition: -webkit-transform 0.5s;
  290. transition: transform 0.5s;
  291. background-color: #e1e1e1;
  292. background-size: cover;
  293. background-position: center center;
  294. background-attachment: fixed;
  295. background-image: none;
  296. overflow: auto;
  297. -webkit-overflow-scrolling: touch;
  298. }
  299. .sidebar-open #content {
  300. -ms-transform: translate(300px, 0);
  301. -webkit-transform: translate(300px, 0);
  302. transform: translate(300px, 0);
  303. }
  304.  
  305. /* Sidebar responsive */
  306. @media (max-width: 991px) {
  307. .sidebar-column {
  308. margin-top: 40px;
  309. }
  310. }
  311.  
  312. /* Content overlay */
  313. #overlay {
  314. position: fixed;
  315. top: 0;
  316. left: 0;
  317. width: 0;
  318. height: 0;
  319. background: rgba(0, 0, 0, 0.5);
  320. opacity: 0;
  321. -webkit-transition: initial;
  322. transition: initial;
  323. }
  324. .sidebar-open #overlay {
  325. width: 100%;
  326. height: 100%;
  327. top: 100px;
  328. left: 300px;
  329. opacity: 1;
  330. z-index: 9999;
  331. -webkit-transition: opacity 0.5s 0.5s;
  332. transition: opacity 0.5s 0.5s;
  333. }
  334.  
  335. /* Overlay responsive */
  336. @media (max-width: 991px) {
  337. .sidebar-open #content {
  338. -ms-transform: translate(100%, 0);
  339. -webkit-transform: translate(100%, 0);
  340. transform: translate(100%, 0);
  341. }
  342. .sidebar-open #overlay {
  343. left: 100%;
  344. }
  345. }
  346.  
  347. /* Sidebar menu */
  348. #sidebar {
  349. position: absolute;
  350. top: 0;
  351. left: 0;
  352. visibility: hidden;
  353. width: 300px;
  354. height: 100%;
  355. background: #ffffff;
  356. -webkit-transition: all 0.5s;
  357. transition: all 0.5s;
  358. z-index: 1;
  359. opacity: 1;
  360. -webkit-transform: translate3d(0, -100%, 0);
  361. transform: translate3d(0, -100%, 0);
  362. padding-top: 160px;
  363. }
  364. .sidebar-open #sidebar {
  365. visibility: visible;
  366. -webkit-transition-timing-function: ease-in-out;
  367. transition-timing-function: ease-in-out;
  368. -webkit-transition-property: -webkit-transform;
  369. transition-property: transform;
  370. -webkit-transform: translate3d(0, 0, 0);
  371. transform: translate3d(0, 0, 0);
  372. -webkit-transition-speed: 0.2s;
  373. transition-speed: 0.2s;
  374. }
  375. #sidebar:after {
  376. position: absolute;
  377. top: 0;
  378. right: 0;
  379. width: 100%;
  380. height: 100%;
  381. content: '';
  382. opacity: 1;
  383. -webkit-transition: opacity 0.5s;
  384. transition: opacity 0.5s;
  385. }
  386. .sidebar-open #sidebar:after {
  387. width: 0;
  388. height: 0;
  389. opacity: 0;
  390. -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  391. transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  392. }
  393. #widgets {
  394. max-height: 100%;
  395. position: relative;
  396. overflow: auto;
  397. -webkit-overflow-scrolling: touch;
  398. bottom: 60px;
  399. }
  400.  
  401. /* Sidebar menu responsive */
  402. @media (max-width: 991px) {
  403. #sidebar {
  404. width: 100%;
  405. background: #f2f2f2;
  406. }
  407. }
  408.  
  409. /* Nav menu */
  410. #mainmenu ul {
  411. margin: 0;
  412. }
  413. #mainmenu ul li a {
  414. padding: 0 40px;
  415. width: 100%;
  416. line-height: 60px;
  417. display: inline-block;
  418. color: #202020;
  419. text-decoration: none;
  420. }
  421. #mainmenu ul li a:hover,
  422. #mainmenu ul li a.active {
  423. background: #e1e1e1;
  424. }
  425. #mainmenu ul li.expandable > a:after {
  426. content: '[+]';
  427. float: right;
  428. }
  429. #mainmenu ul li.expandable.expanded > a:after {
  430. content: '[-]';
  431. }
  432.  
  433. /* Submenu */
  434. #mainmenu ul li > ul {
  435. display: none;
  436. overflow: hidden;
  437. border-left: 1px solid #e1e1e1;
  438. margin-left: 40px;
  439. }
  440. #mainmenu ul li > ul li {
  441. position: relative;
  442. }
  443. #mainmenu ul li > ul li:after {
  444. content: '';
  445. position: absolute;
  446. top: 30px;
  447. left: 0;
  448. width: 20px;
  449. height: 1px;
  450. background: #e1e1e1;
  451. }
  452. #mainmenu ul li > ul li a {
  453. background: none !important;
  454. }
  455.  
  456. /* Menu responsive */
  457. @media (max-width: 991px) {
  458. #mainmenu ul li a {
  459. text-align: center;
  460. }
  461. #mainmenu ul li.expandable > a:after {
  462. float: none;
  463. margin-left: 5px;
  464. }
  465. #mainmenu ul li > ul {
  466. border-left: none;
  467. margin-left: 0;
  468. border-top: 1px solid #e1e1e1;
  469. border-bottom: 1px solid #e1e1e1;
  470. }
  471. #mainmenu ul li > ul li:after {
  472. display: none;
  473. }
  474. #mainmenu ul li > ul li a {
  475. opacity: 0.5;
  476. }
  477. }
  478.  
  479. /* Footer */
  480. .copyright {
  481. width: 100%;
  482. margin: 0;
  483. line-height: 60px;
  484. position: fixed;
  485. bottom: 0;
  486. font-size: 12px;
  487. opacity: 0.5;
  488. padding: 0 40px;
  489. }
  490.  
  491. /* Footer responsive */
  492. @media (max-width: 991px) {
  493. .copyright {
  494. text-align: center;
  495. background: #ffffff;
  496. }
  497. }
  498.  
  499. /* Heading */
  500. #heading {
  501. margin-top: -20px;
  502. margin-bottom: 60px;
  503. text-transform: uppercase;
  504. }
  505. #heading header {
  506. margin-bottom: 0;
  507. }
  508. #heading h1 {
  509. font-size: 48px;
  510. letter-spacing: 5px;
  511. display: inline-block;
  512. color: #202020;
  513. }
  514. #heading h2 {
  515. font-size: 16px;
  516. letter-spacing: 3px;
  517. display: inline-block;
  518. opacity: 0.5;
  519. margin-left: 10px;
  520. color: #202020;
  521. }
  522. #heading h2:before {
  523. content: '// ';
  524. }
  525. #heading h2 a {
  526. color: #202020;
  527. }
  528. #heading h2 a:hover {
  529. color: #00a3cc;
  530. }
  531. #heading h2 span:after {
  532. content: ' / ';
  533. }
  534. #heading h2 span:last-child:after {
  535. content: '';
  536. }
  537.  
  538. /* Heading resopnsive */
  539. @media (max-width: 991px) {
  540. #heading {
  541. margin-top: 20px;
  542. }
  543. #heading > div {
  544. margin-bottom: 0;
  545. text-align: center;
  546. }
  547. #heading h1 {
  548. display: block;
  549. font-size: 36px;
  550. }
  551. #heading h2 {
  552. display: block;
  553. font-size: 14px;
  554. margin-left: 0;
  555. }
  556. #heading h2:before {
  557. content: '';
  558. }
  559. }
  560.  
  561. /* Notebook */
  562. article.portfolio .image {
  563. display: block;
  564. position: relative;
  565. }
  566. article.portfolio .image:before {
  567. position: absolute;
  568. width: 32px;
  569. height: 28px;
  570. top: 40%;
  571. left: 50%;
  572. margin: -14px 0 0 -16px;
  573. background: url(../img/svg/icon-fullscreen.svg) no-repeat;
  574. content: '';
  575. opacity: 0;
  576. z-index: 1;
  577. -webkit-transition: all 0.3s linear;
  578. transition: all 0.3s linear;
  579. }
  580. article.portfolio .image:hover:before {
  581. top: 50%;
  582. opacity: 1;
  583. }
  584. article.portfolio .image:after {
  585. position: absolute;
  586. width: 100%;
  587. height: 100%;
  588. top: 0;
  589. background: rgba(0, 0, 0, 0.5);
  590. content: '';
  591. opacity: 0;
  592. -webkit-transition: all 0.3s linear;
  593. transition: all 0.3s linear;
  594. }
  595. article.portfolio .image:hover:after {
  596. opacity: 1;
  597. }
  598. article.portfolio .inner {
  599. padding: 20px 40px;
  600. }
  601. article.portfolio h3 {
  602. font-size: 24px;
  603. }
  604. @media (max-width: 991px) {
  605. article.portfolio .inner {
  606. text-align: center;
  607. }
  608. }
  609.  
  610. /* Notebook full */
  611. .portfolio-full {
  612. position: absolute;
  613. width: 100%;
  614. height: 100%;
  615. top: 0;
  616. left: 0;
  617. padding-top: 100px;
  618. background: #ffffff;
  619. z-index: 9999;
  620. }
  621. .portfolio-full .portfolio-description {
  622. float: left;
  623. width: 500px;
  624. max-height: 100%;
  625. padding: 40px;
  626. overflow: auto;
  627. -webkit-overflow-scrolling: touch;
  628. }
  629. .portfolio-full .portfolio-description > * {
  630. margin-bottom: 30px;
  631. }
  632. .portfolio-full .portfolio-description > *:last-child {
  633. margin-bottom: 0;
  634. }
  635. .portfolio-full .swiper-container {
  636. overflow: hidden;
  637. width: auto;
  638. }
  639. .portfolio-full .swiper-slide {
  640. width: 100%;
  641. height: 100%;
  642. }
  643.  
  644. /* Sliding animation */
  645. .portfolio-full-slidedown > * {
  646. opacity: 0;
  647. transition: all 0.5s linear;
  648. -webkit-transition: all 0.5s linear;
  649. -moz-transition: all 0.5s linear;
  650. -o-transition: all 0.5s linear;
  651. }
  652. .portfolio-full-slidedown.portfolio-open > * {
  653. opacity: 1;
  654. -webkit-transition-delay: 0.5s;
  655. transition-delay: 0.5s;
  656. }
  657. .portfolio-full-slidedown {
  658. visibility: hidden;
  659. -webkit-transform: translateY(-100%);
  660. transform: translateY(-100%);
  661. -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
  662. transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
  663. }
  664. .portfolio-full-slidedown.portfolio-open {
  665. visibility: visible;
  666. -webkit-transform: translateY(0%);
  667. transform: translateY(0%);
  668. -webkit-transition: -webkit-transform 0.4s ease-in-out;
  669. transition: transform 0.4s ease-in-out;
  670. }
  671.  
  672. /* Animation responsive */
  673. @media (max-width: 991px) {
  674. .portfolio-full {
  675. overflow-y: scroll;
  676. -webkit-overflow-scrolling: touch;
  677. }
  678. .portfolio-full .portfolio-description {
  679. float: none;
  680. width: 100%;
  681. }
  682. }
  683.  
  684. /* Profiles */
  685. .personal-profiles {
  686. margin-top: -40px;
  687. }
  688. .personal-profiles > article {
  689. margin-top: 40px;
  690. width:33%;
  691. }
  692. #content .personal-profiles > article.personal-profile:nth-child(3n 1) > .image {
  693. float:right;
  694. }
  695. article.personal-profile > div {
  696. height: 350px;
  697. width: 50%;
  698. }
  699. article.personal-profile .image {
  700. float: left;
  701. position: relative;
  702. padding-top: 0;
  703. background-position:center;
  704. }
  705. .personal-profiles > article.personal-profile:nth-child(4n+3) > .image,
  706. .personal-profiles > article.personal-profile:nth-child(4n+4) > .image {
  707. float: right;
  708. }
  709. article.personal-profile .image:after {
  710. position: absolute;
  711. top: 0;
  712. width: 100%;
  713. height: 100%;
  714. background: rgba(0, 0, 0, 0.5);
  715. content: '';
  716. opacity: 0;
  717. -webkit-transition: all 0.3s linear;
  718. transition: all 0.3s linear;
  719. }
  720. article.personal-profile .image:hover:after {
  721. opacity: 1;
  722. }
  723. article.personal-profile .image .icons {
  724. position: absolute;
  725. width: 100%;
  726. height: 40px;
  727. text-align: center;
  728. font-size: 36px;
  729. line-height: 40px;
  730. top: 40%;
  731. left: 0;
  732. margin-top: -25px;
  733. opacity: 0;
  734. z-index: 1;
  735. -webkit-transition: all 0.3s linear;
  736. transition: all 0.3s linear;
  737. }
  738. article.personal-profile .image:hover .icons {
  739. opacity: 1;
  740. top: 50%;
  741. }
  742. article.personal-profile .image .icons a {
  743. width: 40px;
  744. text-align: center;
  745. font-size: 36px;
  746. line-height: 50px;
  747. color: #FFFFFF;
  748. opacity: 0.5;
  749. }
  750. article.personal-profile .image .icons a:hover {
  751. opacity: 1;
  752. }
  753. article.personal-profile .inner {
  754. overflow-y: auto;
  755. -webkit-overflow-scrolling: touch;
  756. line-height:1.5em;
  757. padding:20px;
  758. }
  759. article.personal-profile .inner h4 {
  760. font-size: 16px;
  761. opacity: 0.5;
  762. margin-top: 10px;
  763. }
  764. /* Responsive */
  765. @media (max-width: 991px) {
  766. article.personal-profile > div {
  767. height: auto;
  768. width: 100%;
  769. }
  770. article.personal-profile .image {
  771. float: none;
  772. padding-top: 100%;
  773. }
  774. }
  775.  
  776. /* Safety */
  777. .services {
  778. margin-top: -40px;
  779. }
  780. .services > article {
  781. margin-top: 40px;
  782. position: relative;
  783. }
  784. .service-box .image {
  785. background: #ffffff;
  786. position: absolute;
  787. width: 300px;
  788. padding-top: 0;
  789. height: 100%;
  790. top: 0;
  791. }
  792. .service-box:nth-child(2n) .image {
  793. right: 20px;
  794. }
  795. .service-box .image i {
  796. position: absolute;
  797. font-size: 96px;
  798. top: 50%;
  799. left: 50%;
  800. -ms-transform: translate(-50%, -50%);
  801. -webkit-transform: translate(-50%, -50%);
  802. transform: translate(-50%, -50%);
  803. }
  804. .service-box .inner {
  805. margin-left: 260px;
  806. }
  807. .service-box:nth-child(2n) .inner {
  808. margin-left: 0;
  809. margin-right: 260px;
  810. text-align: right;
  811. }
  812.  
  813. /* Safety responsive */
  814. @media (max-width: 991px) {
  815. .service-box .image {
  816. position: relative;
  817. width: 100%;
  818. height: auto;
  819. text-align: center;
  820. padding-top: 40px;
  821. }
  822. .service-box:nth-child(2n) .image {
  823. right: auto;
  824. }
  825. .service-box .image i {
  826. position: relative;
  827. top: 0;
  828. left: 0;
  829. -ms-transform: translate(0, 0);
  830. -webkit-transform: translate(0, 0);
  831. transform: translate(0, 0);
  832. }
  833. .service-box .inner {
  834. margin: 0 !important;
  835. text-align: center !important;
  836. }
  837. }
  838.  
  839. /* Comments */
  840. .comments {
  841. margin-top: 40px;
  842. }
  843. .comments h3 {
  844. color: #202020;
  845. }
  846. .comment-list {
  847. list-style: none;
  848. }
  849. .comment-list li {
  850. position: relative;
  851. }
  852. .comment-list li > .comment-list {
  853. border-left: 1px solid #c8c8c8;
  854. }
  855. .comment-list li > .comment-list li {
  856. padding-left: 10%;
  857. }
  858. .comment-list li > .comment-list > li:after {
  859. position: absolute;
  860. width: 5%;
  861. height: 1px;
  862. content: '';
  863. background: #c8c8c8;
  864. top: 70px;
  865. left: 0;
  866. }
  867. .comment {
  868. margin-top: 40px;
  869. }
  870. .comment .inner {
  871. position: relative;
  872. }
  873. .comment .avatar {
  874. width: 60px;
  875. float: left;
  876. margin-right: 40px;
  877. }
  878. .comment .content {
  879. overflow: hidden;
  880. }
  881. .comment .content .vcard address {
  882. overflow: hidden;
  883. color: #00a3cc;
  884. }
  885. .comment .content .vcard .date {
  886. float: right;
  887. margin-left: 40px;
  888. opacity: 0.5;
  889. font-size: 80%;
  890. }
  891. .comment .content .text {
  892. margin-top: 15px;
  893. }
  894. .comment .reply {
  895. position: absolute;
  896. right: 0;
  897. bottom: 0;
  898. }
  899. #post-comment {
  900. margin-top: 40px;
  901. }
  902. #post-comment label {
  903. margin-bottom: 5px;
  904. }
  905. @media (max-width: 991px) {
  906. .comment .avatar {
  907. width: 100%;
  908. float: none;
  909. margin-right: 0;
  910. text-align: center;
  911. }
  912. .comment .content .vcard {
  913. text-align: center;
  914. }
  915. .comment .content .vcard .date {
  916. float: none;
  917. margin-left: 0;
  918. }
  919. .comment .content .text {
  920. margin-top: 30px;
  921. }
  922. }
  923.  
  924. /* Wiggle Room */
  925. .widget {
  926. padding: 40px;
  927. margin-bottom: 40px;
  928. }
  929. .widget:last-child {
  930. margin-bottom: 0;
  931. }
  932. .widget h4 {
  933. margin-bottom: 30px;
  934. }
  935.  
  936. /* Info container */
  937. .widget-post-info address {
  938. line-height: inherit;
  939. display: inline;
  940. }
  941. .widget-post-info .icons a {
  942. display: block;
  943. margin-top: 10px;
  944. color: #202020;
  945. opacity: 0.75;
  946. }
  947. .widget-post-info .icons a:hover {
  948. color: #007a99;
  949. opacity: 1;
  950. }
  951. .widget-post-info .icons a i {
  952. margin-right: 5px;
  953. }
  954. .widget-post-info .icons a.liked i {
  955. color: #C41D0B;
  956. }
  957. .widget-post-info .tags {
  958. margin-top: -5px;
  959. }
  960. .widget-post-info .tags a {
  961. float: left;
  962. font-size: 80%;
  963. background: #00a3cc;
  964. color: #ffffff;
  965. padding: 0 10px;
  966. margin: 5px 5px 0 0;
  967. }
  968. .widget-post-info .tags a:hover {
  969. background: #007a99;
  970. }
  971.  
  972. /* Categories */
  973. .widget ul {
  974. list-style: none;
  975. }
  976. .widget ul li {
  977. line-height: 60px;
  978. border-top: 1px solid #f0f0f0;
  979. }
  980. .widget ul li a {
  981. color: #202020;
  982. }
  983. .widget ul li a:hover {
  984. color: #007a99;
  985. }
  986.  
  987. /* Recent sort */
  988. .widget-recent-tabs .nav-tabs {
  989. margin: -40px -40px 40px -40px !important;
  990. }
  991. .widget-recent-tabs .nav-tabs li {
  992. width: 50%;
  993. border-top: none;
  994. }
  995. .widget-recent-tabs .nav-tabs li a {
  996. margin: 0;
  997. background: #f0f0f0;
  998. text-align: center;
  999. padding: 30px 0;
  1000. font-size: 24px;
  1001. line-height: 100%;
  1002. }
  1003. .widget-recent-tabs .nav-tabs > li.active > a,
  1004. .widget-recent-tabs .nav-tabs > li.active > a:hover,
  1005. .widget-recent-tabs .nav-tabs > li.active > a:focus {
  1006. background: #ffffff;
  1007. }
  1008. .widget-recent-tabs .nav-tabs li a i {
  1009. opacity: 0.5;
  1010. }
  1011. .widget-recent-tabs .tab-content {
  1012. padding: 0;
  1013. }
  1014.  
  1015. /* Swiper preferences */
  1016. .swiper-container {
  1017. overflow: hidden;
  1018. background: #000000;
  1019. }
  1020. .swiper-slide {
  1021. position: relative;
  1022. overflow: hidden;
  1023. background-size: cover;
  1024. background-position: center center;
  1025. }
  1026. .swiper-slide video {
  1027. position: absolute;
  1028. }
  1029.  
  1030. /* Swiper arrows */
  1031. .swiper-container .nav-arrow {
  1032. position: absolute;
  1033. top: 50%;
  1034. font-size: 24px;
  1035. margin-top: -20px;
  1036. color: #202020;
  1037. width: 30px;
  1038. height: 40px;
  1039. line-height: 40px;
  1040. text-align: center;
  1041. z-index: 2;
  1042. color: #FFFFFF;
  1043. background-position: center center;
  1044. background-repeat: no-repeat;
  1045. }
  1046. .swiper-container .nav-left {
  1047. background-image: url(../img/svg/white/nav-left.svg);
  1048. left: 0;
  1049. }
  1050. .swiper-container .nav-right {
  1051. background-image: url(../img/svg/white/nav-right.svg);
  1052. right: 0;
  1053. }
  1054.  
  1055. /* Captions */
  1056. #fullscreen-slider .swiper-slide h1 {
  1057. width: 100%;
  1058. padding: 0 40px;
  1059. text-align: center;
  1060. position: absolute;
  1061. font-size: 42px;
  1062. line-height: 76px;
  1063. text-transform: uppercase;
  1064. letter-spacing: 5px;
  1065. color: #ffffff;
  1066. z-index: 1;
  1067. left: 0;
  1068. top: 50%;
  1069. -ms-transform: translateY(-50%);
  1070. -webkit-transform: translateY(-50%);
  1071. transform: translateY(-50%);
  1072. -webkit-transition: opacity 1.5s linear;
  1073. transition: opacity 1.5s linear;
  1074. opacity: 0;
  1075. }
  1076. #fullscreen-slider .swiper-slide-active h1 {
  1077. opacity: 1;
  1078. }
  1079.  
  1080. /* Captions responsive */
  1081. @media (max-width: 991px) {
  1082. #fullscreen-slider .swiper-slide h1 {
  1083. font-size: 16px;
  1084. line-height: inherit;
  1085. }
  1086. }
  1087.  
  1088. /* Tabs */
  1089. .nav-tabs {
  1090. border-bottom: none;
  1091. margin-bottom: 0 !important;
  1092. }
  1093. .nav-tabs > li {
  1094. margin-bottom: 0;
  1095. }
  1096. .nav-tabs > li > a {
  1097. border-radius: 0;
  1098. border: none;
  1099. color: #202020 !important;
  1100. }
  1101. .nav-tabs > li > a:hover,
  1102. .nav-tabs > li.active > a,
  1103. .nav-tabs > li.active > a:hover,
  1104. .nav-tabs > li.active > a:focus {
  1105. border: none;
  1106. background: #f0f0f0;
  1107. }
  1108. .tab-content {
  1109. padding: 15px;
  1110. }
  1111.  
  1112. /* Accordian */
  1113. .panel {
  1114. border-radius: 0 !important;
  1115. box-shadow: none !important;
  1116. border: none !important;
  1117. background: transparent !important;
  1118. }
  1119. .panel-default > .panel-heading {
  1120. background: #f0f0f0;
  1121. padding: 0;
  1122. border-radius: 0 !important;
  1123. border: none !important;
  1124. }
  1125. .panel-default > .panel-heading a {
  1126. width: 100%;
  1127. height: 100%;
  1128. padding: 10px 15px;
  1129. display: inline-block;
  1130. color: #202020 !important;
  1131. }
  1132. .panel-default > .panel-heading a:after {
  1133. content: '[-]';
  1134. float: right;
  1135. }
  1136. .panel-default > .panel-heading a.collapsed:after {
  1137. content: '[+]';
  1138. }
  1139. .panel-body {
  1140. border-top: none !important;
  1141. }
  1142.  
  1143. /* Buttons */
  1144. .btn {
  1145. border-radius: 0;
  1146. border: none !important;
  1147. background: #f0f0f0;
  1148. -webkit-transition: all 0.3s linear;
  1149. transition: all 0.3s linear;
  1150. color: #202020 !important;
  1151. margin-left: 0 !important;
  1152. margin-right: 0 !important;
  1153. }
  1154. .btn:hover {
  1155. background: #d7d7d7;
  1156. }
  1157. .btn:active,
  1158. .btn.active,
  1159. .btn:focus,
  1160. .btn:active:focus,
  1161. .btn.active:focus {
  1162. box-shadow: none;
  1163. outline: none;
  1164. }
  1165. .btn i,
  1166. .btn span {
  1167. margin-right: 12px;
  1168. }
  1169. .btn-lg i,
  1170. .btn-lg span {
  1171. margin-right: 12px;
  1172. }
  1173. .btn-icon-only i,
  1174. .btn-icon-only span {
  1175. margin-right: 0;
  1176. }
  1177. .btn-invert {
  1178. background: #202020;
  1179. color: #ffffff !important;
  1180. }
  1181. .btn-invert:hover {
  1182. background: #060606;
  1183. }
  1184. .btn-color {
  1185. background: #00a3cc;
  1186. color: #ffffff !important;
  1187. }
  1188. .btn-color:hover {
  1189. background: #007a99;
  1190. }
  1191. .input-group .form-control {
  1192. padding: 6px 12px;
  1193. height: 34px;
  1194. }
  1195. .input-group .btn {
  1196. border: 1px solid transparent !important;
  1197. }
  1198.  
  1199. /* Alerts */
  1200. .alert {
  1201. border-radius: 0px;
  1202. border: none;
  1203. border-left: 2px solid;
  1204. text-align: center;
  1205. }
  1206. .alert i {
  1207. font-size: 24px;
  1208. line-height: 100%;
  1209. margin: 10px 0;
  1210. }
  1211. .alert-success {
  1212. background: #CCFFCC;
  1213. border-color: #73B073;
  1214. color: #3C763D;
  1215. }
  1216. .alert-info {
  1217. background: #B9F1FF;
  1218. border-color: #008DB0;
  1219. color: #00809F;
  1220. }
  1221. .alert-warning {
  1222. background: #FFFFC4;
  1223. border-color: #D5C975;
  1224. color: #8A6D3B;
  1225. }
  1226. .alert-danger {
  1227. background: #FFC1C1;
  1228. border-color: #D87876;
  1229. color: #A94442;
  1230. }
  1231.  
  1232. /* Icons */
  1233. .icon-text {
  1234. margin-bottom: 10px !important;
  1235. }
  1236. .icon-text:last-child {
  1237. margin-bottom: 0 !important;
  1238. }
  1239. .icon-text i {
  1240. float: left;
  1241. width: 45px;
  1242. line-height: 180%;
  1243. }
  1244. .icon-text p {
  1245. overflow: hidden;
  1246. }
  1247.  
  1248. /* Lists */
  1249. .default-ul {
  1250. margin-left: 40px;
  1251. }
  1252. .fa-li {
  1253. line-height: inherit;
  1254. top: 0;
  1255. }
  1256.  
  1257. /* Form */
  1258. label {
  1259. font-weight: inherit;
  1260. }
  1261. label.error {
  1262. font-size: 80%;
  1263. }
  1264. label .form-required {
  1265. color: red;
  1266. }
  1267. .form-control {
  1268. background: #f0f0f0;
  1269. border: none;
  1270. box-shadow: none !important;
  1271. border-radius: 0;
  1272. padding: 10px 15px;
  1273. max-width: 100%;
  1274. height: auto;
  1275. }
  1276. input.half {
  1277. width: 50%;
  1278. }
  1279. /* Responsive */
  1280. @media (max-width: 991px) {
  1281. input.half {
  1282. width: 100%;
  1283. }
  1284. }
  1285.  
  1286. /* Pagination */
  1287. .pag {
  1288. text-align: center;
  1289. list-style: none;
  1290. margin-top: 40px;
  1291. }
  1292. .pag li {
  1293. display: inline-block;
  1294. }
  1295. .pag li a {
  1296. background: #ffffff;
  1297. color: #202020;
  1298. padding: 8px 15px;
  1299. }
  1300. .pag li a:hover,
  1301. .pag li.active a {
  1302. background: #00a3cc;
  1303. color: #ffffff;
  1304. }
  1305.  
  1306. /* Map */
  1307. iframe {
  1308. margin-bottom: 0 !important;
  1309. border: none !important;
  1310. display: block;
  1311. }
  1312.  
  1313. /* Masonry */
  1314. .masonry {
  1315. margin-top: -40px;
  1316. }
  1317. .masonry > article {
  1318. margin-top: 40px;
  1319. }
  1320.  
  1321. /* Masonry responsive */
  1322. @media (max-width: 991px) {
  1323. .masonry > article {
  1324. width: 100%;
  1325. }
  1326. }
  1327.  
  1328. /* Isotype */
  1329. .isotope-container {
  1330. overflow-y: scroll !important;
  1331. -webkit-overflow-scrolling: touch;
  1332. }
  1333. .isotope {
  1334. margin-top: -40px;
  1335. }
  1336. .isotope > article {
  1337. margin-top: 40px;
  1338. }
  1339. .isotope-item {
  1340. z-index: 2;
  1341. }
  1342. .isotope-hidden.isotope-item {
  1343. pointer-events: none;
  1344. z-index: 1;
  1345. }
  1346.  
  1347. /* Transitions */
  1348. .isotope,
  1349. .isotope .isotope-item {
  1350. -webkit-transition-duration: 0.8s;
  1351. -moz-transition-duration: 0.8s;
  1352. -ms-transition-duration: 0.8s;
  1353. -o-transition-duration: 0.8s;
  1354. transition-duration: 0.8s;
  1355. }
  1356. .isotope {
  1357. -webkit-transition-property: height, width;
  1358. -moz-transition-property: height, width;
  1359. -ms-transition-property: height, width;
  1360. -o-transition-property: height, width;
  1361. transition-property: height, width;
  1362. }
  1363. .isotope .isotope-item {
  1364. -webkit-transition-property: -webkit-transform, opacity;
  1365. -moz-transition-property: -moz-transform, opacity;
  1366. -ms-transition-property: -ms-transform, opacity;
  1367. -o-transition-property: -o-transform, opacity;
  1368. transition-property: transform, opacity;
  1369. }
  1370.  
  1371. /* Filters */
  1372. .filter {
  1373. padding-right: 290px !important;
  1374. }
  1375. .filter-dropdown {
  1376. background: #ffffff;
  1377. width: 250px;
  1378. height: 50px;
  1379. position: absolute;
  1380. right: 20px;
  1381. top: 50%;
  1382. margin-top: -25px;
  1383. padding: 0 20px;
  1384. text-transform: none;
  1385. z-index: 3;
  1386. cursor: pointer;
  1387. }
  1388. .filter-dropdown .selected {
  1389. line-height: 50px;
  1390. padding-right: 50px;
  1391. }
  1392. .filter-dropdown .selected span.name {
  1393. opacity: 0.5;
  1394. }
  1395. .filter-dropdown .arrow {
  1396. line-height: 40px;
  1397. position: absolute;
  1398. right: 0;
  1399. top: 5px;
  1400. width: 50px;
  1401. border-left: 1px solid #f0f0f0;
  1402. text-align: center;
  1403. }
  1404. .filter-dropdown .arrow:before {
  1405. content: '\25BC';
  1406. opacity: 0.5;
  1407. font-size: 12px;
  1408. }
  1409. .filter-dropdown.open .arrow:before {
  1410. content: '\25B2';
  1411. }
  1412. .filter-dropdown ul {
  1413. position: absolute;
  1414. margin: 0;
  1415. padding: 0;
  1416. list-style: none;
  1417. top: 50px;
  1418. left: 0;
  1419. width: 100%;
  1420. margin-top: 3px;
  1421. opacity: 0;
  1422. height: 0px;
  1423. overflow: hidden;
  1424. -webkit-transition: all 0.2s linear;
  1425. transition: all 0.2s linear;
  1426. }
  1427. .filter-dropdown.open ul {
  1428. opacity: 1;
  1429. height: auto;
  1430. }
  1431. .filter-dropdown ul li {
  1432. line-height: 50px;
  1433. background: #ffffff;
  1434. width: 100%;
  1435. padding: 0 20px;
  1436. cursor: pointer;
  1437. }
  1438. .filter-dropdown ul li:hover {
  1439. background: #f2f2f2;
  1440. }
  1441.  
  1442. /* Filters responsive */
  1443. @media (max-width: 991px) {
  1444. .isotope > article {
  1445. width: 100% !important;
  1446. }
  1447. .filter {
  1448. padding-right: 20px !important;
  1449. }
  1450. .filter-dropdown {
  1451. width: 100%;
  1452. position: relative;
  1453. right: 0;
  1454. top: 0;
  1455. margin-top: 40px;
  1456. text-align: left;
  1457. }
  1458. }
  1459.  
  1460. /* Grid */
  1461. .container-fluid {
  1462. margin-right: auto;
  1463. margin-left: auto;
  1464. padding: 40px;
  1465. }
  1466. .row {
  1467. margin-left: -20px;
  1468. margin-right: -20px;
  1469. }
  1470.  
  1471. /* Spacing */
  1472. .inner {
  1473. padding: 40px;
  1474. background: #ffffff;
  1475. }
  1476. .inner > * {
  1477. margin-bottom: 30px;
  1478. }
  1479. .inner > *:last-child {
  1480. margin-bottom: 0;
  1481. }
  1482. .inner .row {
  1483. margin-bottom: 0 !important;
  1484. }
  1485. .inner .row > div > * {
  1486. margin-bottom: 30px;
  1487. }
  1488. .inner .row:last-child > div:last-child > *:last-child {
  1489. margin-bottom: 0;
  1490. }
  1491. .col-1,
  1492. .col-2,
  1493. .col-3,
  1494. .col-4,
  1495. .col-5,
  1496. .col-6,
  1497. .col-7,
  1498. .col-8,
  1499. .col-9,
  1500. .col-10,
  1501. .col-11,
  1502. .col-12 {
  1503. position: relative;
  1504. min-height: 1px;
  1505. padding-left: 20px;
  1506. padding-right: 20px;
  1507. }
  1508.  
  1509. /* Spacing responsive */
  1510. @media (min-width: 992px) {
  1511. .container-fluid {
  1512. padding: 80px;
  1513. }
  1514. .inner .row:last-child > div > *:last-child {
  1515. margin-bottom: 0;
  1516. }
  1517. .col-1,
  1518. .col-2,
  1519. .col-3,
  1520. .col-4,
  1521. .col-5,
  1522. .col-6,
  1523. .col-7,
  1524. .col-8,
  1525. .col-9,
  1526. .col-10,
  1527. .col-11,
  1528. .col-12 {
  1529. float: left;
  1530. }
  1531. .col-12 {
  1532. width: 100%;
  1533. }
  1534. .col-11 {
  1535. width: 91.66666667%;
  1536. }
  1537. .col-10 {
  1538. width: 83.33333333%;
  1539. }
  1540. .col-9 {
  1541. width: 75%;
  1542. }
  1543. .col-8 {
  1544. width: 66.66666667%;
  1545. }
  1546. .col-7 {
  1547. width: 58.33333333%;
  1548. }
  1549. .col-6 {
  1550. width: 50%;
  1551. }
  1552. .col-5 {
  1553. width: 41.66666667%;
  1554. }
  1555. .col-4 {
  1556. width: 33.33333333%;
  1557. }
  1558. .col-3 {
  1559. width: 25%;
  1560. }
  1561. .col-2 {
  1562. width: 16.66666667%;
  1563. }
  1564. .col-1 {
  1565. width: 8.33333333%;
  1566. }
  1567. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement