Site for my Call of Duty: Mobile clan. http://codm.ataraxy.tk
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.

2365 lines
38 KiB

  1. /*
  2. Template Name: Meghna Responsive HTML5/CSS3 Business Template
  3. Author: Themefisher
  4. Author URI: www.Themefisher.com
  5. Description: Meghna Responsive HTML5/CSS3 Portfolio Template
  6. Version: 1.3
  7. Tags: one-page, single-page, portfolio, custom-colors, post-formats, responsive, html5, css3
  8. */
  9. /*=== MEDIA QUERY ===*/
  10. @import url("https://fonts.googleapis.com/css?family=Anaheim|Quattrocento+Sans:400,700");
  11. @import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300,400,600");
  12. html {
  13. background-color: #353b43;
  14. color: #737f8a;
  15. }
  16. body {
  17. background-color: #353b43;
  18. font-family: "Anaheim", sans-serif;
  19. color: #737f8a;
  20. -webkit-font-smoothing: antialiased;
  21. }
  22. h1,
  23. h2,
  24. h3,
  25. h4,
  26. h5,
  27. h6 {
  28. font-weight: 400;
  29. font-family: "Quattrocento Sans", sans-serif;
  30. color: #afbac4;
  31. }
  32. p {
  33. font-family: "Quattrocento Sans", sans-serif;
  34. }
  35. [scroll-behavior=smooth] {
  36. scroll-behavior: smooth;
  37. }
  38. pre {
  39. color: #afbac4;
  40. }
  41. /*=================================================================
  42. Basic Setup
  43. ==================================================================*/
  44. ::-moz-selection {
  45. /* Code for Firefox */
  46. color: #fff;
  47. background: #57cbcc;
  48. }
  49. ::selection {
  50. color: #fff;
  51. background: #57cbcc;
  52. }
  53. hr {
  54. border-top: 1px solid rgba(255,255,255,.1);
  55. }
  56. figure {
  57. margin: 0;
  58. }
  59. a {
  60. color: #fff;
  61. transition: all .3s ease-in 0s;
  62. }
  63. iframe {
  64. border: 0;
  65. }
  66. a,
  67. a:focus,
  68. a:hover {
  69. text-decoration: none;
  70. outline: 0;
  71. }
  72. a:focus,
  73. a:hover {
  74. color: #6CB670;
  75. }
  76. .kill-margin-bottom {
  77. margin-bottom: 0 !important;
  78. }
  79. .padding-0 {
  80. padding: 0 !important;
  81. }
  82. .mb-50{
  83. margin-bottom: 50px;
  84. }
  85. .btn {
  86. background-color: transparent;
  87. color: #fff;
  88. padding: 10px 30px;
  89. border-radius: 0;
  90. transition: all .3s ease-in 0s;
  91. }
  92. .btn:focus {
  93. color: #ddd;
  94. }
  95. .btn-transparent {
  96. border: 1px solid #4e595f;
  97. }
  98. .btn-transparent:hover,
  99. .btn-transparent:focus {
  100. background-color: #57cbcc;
  101. border: 1px solid transparent;
  102. color: #fff;
  103. }
  104. #loading-mask {
  105. background: #333439;
  106. height: 100%;
  107. left: 0;
  108. opacity: 1;
  109. filter: alpha(opacity=100);
  110. position: fixed;
  111. text-align: center;
  112. top: 0;
  113. width: 100%;
  114. z-index: 999999999;
  115. }
  116. .loading-img {
  117. height: 100%;
  118. left: 0;
  119. position: fixed;
  120. top: 50%;
  121. width: 100%;
  122. }
  123. .border-meghna {
  124. border-top: 2px solid rgba(236, 239, 241, 0.07);
  125. height: 1px;
  126. margin: 15px auto 0;
  127. position: relative;
  128. width: 30%;
  129. }
  130. .border-meghna:before {
  131. background-color: #fff;
  132. content: '';
  133. height: 6px;
  134. left: 50%;
  135. margin-left: -20px;
  136. position: absolute;
  137. top: -4px;
  138. width: 50px;
  139. background-color: #57cbcc;
  140. }
  141. .color {
  142. color: #6CB670;
  143. }
  144. .sub-title {
  145. padding: 0 0 50px;
  146. }
  147. .sub-title>h3 {
  148. border-left: 3px solid #ddd;
  149. border-right: 3px solid #ddd;
  150. display: inline-block;
  151. padding: 5px 25px;
  152. text-transform: uppercase;
  153. }
  154. .btn.active:focus,
  155. .btn:active:focus,
  156. .btn:focus {
  157. outline: 0;
  158. }
  159. .bg-one {
  160. background-color: #353b43;
  161. }
  162. .bg-dark {
  163. background: #242930;
  164. }
  165. .parallax-section {
  166. background-attachment: fixed !important;
  167. background-position: center center;
  168. background-repeat: no-repeat;
  169. background-size: cover;
  170. }
  171. .no-padding {
  172. padding: 0 !important;
  173. }
  174. .inline-block {
  175. display: inline-block;
  176. }
  177. figure {
  178. margin: 0;
  179. }
  180. a {
  181. transition: all .2s ease-in 0s;
  182. }
  183. iframe {
  184. border: 0;
  185. }
  186. a,
  187. a:focus,
  188. a:hover {
  189. text-decoration: none;
  190. outline: 0;
  191. }
  192. a:focus,
  193. a:hover {
  194. color: #57cbcc;
  195. }
  196. .btn-main {
  197. background: #57cbcc;
  198. color: #fff;
  199. display: inline-block;
  200. font-size: 14px;
  201. letter-spacing: 1px;
  202. padding: 10px 35px;
  203. text-transform: uppercase;
  204. }
  205. .btn-main:hover {
  206. background: #2c9091;
  207. color: #fff;
  208. }
  209. .mt-20 {
  210. margin-top: 20px;
  211. }
  212. .section {
  213. padding: 100px 0;
  214. }
  215. @media (max-width: 480px) {
  216. .section {
  217. padding: 50px 0;
  218. }
  219. }
  220. @media (max-width: 768px) {
  221. .section {
  222. padding: 80px 0;
  223. }
  224. }
  225. .section-sm {
  226. padding: 70px 0;
  227. }
  228. .section-xs {
  229. padding: 50px 0;
  230. }
  231. .btn:focus {
  232. color: #ddd;
  233. }
  234. #home {
  235. position: relative;
  236. }
  237. .btn.active:focus,
  238. .btn:active:focus,
  239. .btn:focus {
  240. outline: 0;
  241. }
  242. .parallax-section {
  243. background-attachment: fixed;
  244. background-position: center center;
  245. background-repeat: no-repeat;
  246. background-size: cover;
  247. }
  248. #preloader {
  249. position: fixed;
  250. top: 0;
  251. left: 0;
  252. right: 0;
  253. bottom: 0;
  254. background-color: #fff;
  255. z-index: 999;
  256. display: flex;
  257. align-items: center;
  258. justify-content: center;
  259. }
  260. .sk-cube-grid {
  261. width: 40px;
  262. height: 40px;
  263. margin: 100px auto;
  264. }
  265. .sk-cube-grid .sk-cube {
  266. width: 33%;
  267. height: 33%;
  268. background-color: #57cbcc;
  269. float: left;
  270. -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  271. animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  272. }
  273. .sk-cube-grid .sk-cube1 {
  274. -webkit-animation-delay: 0.2s;
  275. animation-delay: 0.2s;
  276. }
  277. .sk-cube-grid .sk-cube2 {
  278. -webkit-animation-delay: 0.3s;
  279. animation-delay: 0.3s;
  280. }
  281. .sk-cube-grid .sk-cube3 {
  282. -webkit-animation-delay: 0.4s;
  283. animation-delay: 0.4s;
  284. }
  285. .sk-cube-grid .sk-cube4 {
  286. -webkit-animation-delay: 0.1s;
  287. animation-delay: 0.1s;
  288. }
  289. .sk-cube-grid .sk-cube5 {
  290. -webkit-animation-delay: 0.2s;
  291. animation-delay: 0.2s;
  292. }
  293. .sk-cube-grid .sk-cube6 {
  294. -webkit-animation-delay: 0.3s;
  295. animation-delay: 0.3s;
  296. }
  297. .sk-cube-grid .sk-cube7 {
  298. -webkit-animation-delay: 0s;
  299. animation-delay: 0s;
  300. }
  301. .sk-cube-grid .sk-cube8 {
  302. -webkit-animation-delay: 0.1s;
  303. animation-delay: 0.1s;
  304. }
  305. .sk-cube-grid .sk-cube9 {
  306. -webkit-animation-delay: 0.2s;
  307. animation-delay: 0.2s;
  308. }
  309. @-webkit-keyframes sk-cubeGridScaleDelay {
  310. 0%,
  311. 70%,
  312. 100% {
  313. -webkit-transform: scale3D(1, 1, 1);
  314. transform: scale3D(1, 1, 1);
  315. }
  316. 35% {
  317. -webkit-transform: scale3D(0, 0, 1);
  318. transform: scale3D(0, 0, 1);
  319. }
  320. }
  321. @keyframes sk-cubeGridScaleDelay {
  322. 0%,
  323. 70%,
  324. 100% {
  325. -webkit-transform: scale3D(1, 1, 1);
  326. transform: scale3D(1, 1, 1);
  327. }
  328. 35% {
  329. -webkit-transform: scale3D(0, 0, 1);
  330. transform: scale3D(0, 0, 1);
  331. }
  332. }
  333. .title {
  334. padding-bottom: 60px;
  335. }
  336. .title h2 {
  337. text-transform: capitalize;
  338. font-weight: 700;
  339. font-size: 38px;
  340. color: #fff;
  341. }
  342. .title h2 span {
  343. color: #57cbcc;
  344. }
  345. .title p {
  346. color: #666;
  347. }
  348. .title.title-white h2 {
  349. color: #fff;
  350. }
  351. .bg-gray {
  352. background: #f9f9f9;
  353. }
  354. .section-bg {
  355. background: #292F36;
  356. }
  357. .overly {
  358. position: relative;
  359. }
  360. .overly:before {
  361. content: '';
  362. background: rgba(0, 0, 0, 0.096);
  363. position: absolute;
  364. top: 0;
  365. right: 0;
  366. bottom: 0;
  367. left: 0;
  368. }
  369. .header-bradcrumb {
  370. background: transparent;
  371. }
  372. .header-bradcrumb a,
  373. .header-bradcrumb .active {
  374. color: #cfcfcf;
  375. font-weight: 200;
  376. font-family: "Quattrocento Sans", sans-serif;
  377. }
  378. .header-bradcrumb a:hover {
  379. color: #57cbcc;
  380. }
  381. .slick-slide {
  382. outline: none;
  383. }
  384. /* CSS mfp-with-zoom class */
  385. .mfp-with-zoom .mfp-container,
  386. .mfp-with-zoom.mfp-bg {
  387. opacity: 0;
  388. transition: all 0.3s ease-out;
  389. }
  390. .mfp-with-zoom.mfp-ready .mfp-container {
  391. opacity: 1;
  392. }
  393. .mfp-with-zoom.mfp-ready.mfp-bg {
  394. opacity: 0.8;
  395. }
  396. .mfp-with-zoom.mfp-removing .mfp-container,
  397. .mfp-with-zoom.mfp-removing.mfp-bg {
  398. opacity: 0;
  399. }
  400. .logo {
  401. margin-top: 10px;
  402. display: inline-block;
  403. }
  404. .single-page-header {
  405. background-image: url("../images/about/about-header.jpg");
  406. background-size: cover;
  407. padding: 140px 0 70px;
  408. text-align: center;
  409. color: #fff;
  410. position: relative;
  411. }
  412. .single-page-header:before {
  413. background: rgba(0, 0, 0, 0.5);
  414. position: absolute;
  415. content: '';
  416. top: 0;
  417. right: 0;
  418. left: 0;
  419. bottom: 0;
  420. }
  421. /*=================================================================
  422. Navigation
  423. ==================================================================*/
  424. .navigation {
  425. background-color: #1d2024;
  426. width: 100%;
  427. margin-bottom: 0;
  428. }
  429. .navigation .logo {
  430. padding: 0;
  431. }
  432. .navigation .navigation-menu li a.active {
  433. color: #57cbcc;
  434. }
  435. .navigation .navigation-menu li a {
  436. font-size: 16px;
  437. color: #737f8a;
  438. }
  439. .navigation .navigation-menu li a:hover,
  440. .navigation .navigation-menu li a:focus {
  441. background: transparent;
  442. color: #57cbcc;
  443. }
  444. .navigation .navbar-toggler {
  445. color: rgba(255,255,255,.5);
  446. border-color: rgba(255,255,255,.1);
  447. border-radius: 0;
  448. }
  449. .navigation .navbar-collapse {
  450. padding: 10px;
  451. box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  452. border-top: 5px solid transparent;
  453. }
  454. @media (min-width: 768px) {
  455. .navigation .navbar-collapse {
  456. box-shadow: none;
  457. border-top: none;
  458. }
  459. }
  460. .navbar-toggler:focus {
  461. outline-color: #57cbcc;
  462. }
  463. .bg-1 {
  464. background-repeat: no-repeat;
  465. background-size: cover;
  466. }
  467. .bg-2 {
  468. background-repeat: no-repeat;
  469. background-size: cover;
  470. background-attachment: fixed;
  471. }
  472. .hero-area {
  473. background-size: cover;
  474. height: 100vh;
  475. position: relative;
  476. display: flex;
  477. justify-content: center;
  478. align-items: center;
  479. }
  480. .hero-area:before {
  481. content: '';
  482. background: rgba(0, 0, 0, 0.63);
  483. position: absolute;
  484. top: 0;
  485. right: 0;
  486. bottom: 0;
  487. left: 0;
  488. }
  489. .hero-area .block {
  490. text-align: center;
  491. z-index: 99;
  492. }
  493. .hero-area .block .video-button {
  494. background: #fff;
  495. color: #57cbcc;
  496. display: inline-block;
  497. height: 60px;
  498. width: 60px;
  499. border-radius: 50px;
  500. }
  501. .hero-area .block .video-button i {
  502. line-height: 60px;
  503. font-size: 20px;
  504. margin-left: 3px;
  505. }
  506. .hero-area .block h1 {
  507. font-size: 90px;
  508. color: #fff;
  509. text-transform: capitalize;
  510. font-weight: 700;
  511. margin-bottom: 20px;
  512. }
  513. @media (max-width: 480px) {
  514. .hero-area .block h1 {
  515. font-size: 60px;
  516. }
  517. }
  518. .hero-area .block p {
  519. color: #fff;
  520. font-size: 20px;
  521. width: 70%;
  522. margin: 0 auto;
  523. }
  524. .hero-area .block .btn-transparent {
  525. margin-top: 40px;
  526. border-color: #fff;
  527. padding: 14px 50px;
  528. font-size: 18px;
  529. font-size: 16px;
  530. font-weight: bold;
  531. letter-spacing: 1px;
  532. }
  533. .hero-area-video {
  534. height: 100vh;
  535. position: inherit !important;
  536. display: flex;
  537. justify-content: center;
  538. align-items: center;
  539. }
  540. .hero-area-video .block {
  541. color: #fff;
  542. text-align: center;
  543. }
  544. .hero-area-video .block h1 {
  545. font-size: 60px;
  546. font-weight: 700;
  547. margin-bottom: 20px;
  548. }
  549. .hero-area-video .block p {
  550. color: #fff;
  551. text-transform: uppercase;
  552. font-size: 12px;
  553. letter-spacing: 3px;
  554. margin-bottom: 20px;
  555. }
  556. .hero-area-video .block .btn-main {
  557. margin-top: 20px;
  558. }
  559. .dark-bg {
  560. background: rgba(0, 0, 0, 0.7);
  561. height: 100%;
  562. width: 100%;
  563. position: absolute;
  564. z-index: -1;
  565. }
  566. /*=================================================================
  567. About us section
  568. ==================================================================*/
  569. .about .block {
  570. background: #242930;
  571. padding: 30px;
  572. border-bottom: 2px solid transparent;
  573. transition: .5s all;
  574. margin-bottom: 20px;
  575. }
  576. .about .block:hover {
  577. border-bottom: 2px solid #57cbcc;
  578. }
  579. .about .block:hover .icon-box {
  580. -webkit-transform: translateY(-10px);
  581. transform: translateY(-10px);
  582. }
  583. .about .block .icon-box {
  584. position: relative;
  585. width: 160px;
  586. height: 92.38px;
  587. background-color: transparent;
  588. margin: 46.19px auto 60px;
  589. padding: 20px 0;
  590. border-left: 2px solid rgba(236, 239, 241, 0.07);
  591. border-right: 2px solid rgba(236, 239, 241, 0.07);
  592. font-size: 50px;
  593. -webkit-transform: translateZ(0px);
  594. transform: translateZ(0px);
  595. transition-duration: 0.3s;
  596. transition-property: -webkit-transform;
  597. transition-property: transform;
  598. transition-property: transform, -webkit-transform;
  599. }
  600. .about .block .icon-box:after,
  601. .about .block .icon-box:before {
  602. content: "";
  603. position: absolute;
  604. z-index: 1;
  605. width: 113.14px;
  606. height: 113.14px;
  607. background-color: inherit;
  608. left: 20.4315px;
  609. -webkit-transform: scaleY(0.5774) rotate(-45deg);
  610. transform: scaleY(0.5774) rotate(-45deg);
  611. }
  612. .about .block .icon-box:before {
  613. top: -56.5685px;
  614. border-top: 2px solid rgba(236, 239, 241, 0.07);
  615. border-right: 2px solid rgba(236, 239, 241, 0.07);
  616. }
  617. .about .block .icon-box:after {
  618. bottom: -56.5685px;
  619. border-bottom: 2px solid rgba(236, 239, 241, 0.07);
  620. border-left: 2px solid rgba(236, 239, 241, 0.07);
  621. }
  622. .about .block .icon-box h3 {
  623. color: #afbac4;
  624. }
  625. /*=================================================================
  626. About us 2 section
  627. ==================================================================*/
  628. .about-2 .content-block {
  629. padding: 40px;
  630. }
  631. .about-2 .content-block .media {
  632. margin-top: 25px;
  633. }
  634. .about-2 .content-block .media .pull-left {
  635. padding-right: 15px;
  636. }
  637. .about-2 .content-block .media i {
  638. font-size: 30px;
  639. color: #57cbcc;
  640. }
  641. .about-2 .content-block .media h4 {
  642. font-size: 16px;
  643. font-weight: 600;
  644. }
  645. /*=================================================================
  646. Call To Action 1
  647. ==================================================================*/
  648. .call-to-action {
  649. background-attachment: fixed;
  650. }
  651. .call-to-action h2 {
  652. font-weight: 700;
  653. color: #444;
  654. }
  655. .call-to-action p {
  656. font-size: 16px;
  657. color: #666;
  658. }
  659. .call-to-action .btn-main {
  660. margin-top: 20px;
  661. }
  662. /*=================================================================
  663. Call To Action 2
  664. ==================================================================*/
  665. .call-to-action-2 {
  666. padding: 100px 0;
  667. background-image: url("../images/call-to-action/call-to-action-bg.jpg");
  668. background-size: cover;
  669. color: #fff;
  670. }
  671. .call-to-action-2 h2 {
  672. line-height: 1.5;
  673. }
  674. .call-to-action-2 p {
  675. color: #fff;
  676. }
  677. .call-to-action-2 .btn-main {
  678. margin-top: 20px;
  679. }
  680. .contact-us {
  681. padding-top: 50px;
  682. }
  683. @media (max-width: 768px)
  684. {
  685. .contact-us {
  686. padding-top: 80px;
  687. }
  688. }
  689. .contact-form {
  690. margin-bottom: 60px;
  691. }
  692. .form-meghna .form-control {
  693. background-color: transparent;
  694. border-radius: 0;
  695. padding: 5px 10px;
  696. color: #ddd;
  697. border: 1px solid rgba(236, 239, 241, 0.07);
  698. }
  699. .form-meghna .form-control:focus
  700. {
  701. border-color: none;
  702. box-shadow: none;
  703. }
  704. .form-meghna input:hover,
  705. .form-meghna textarea:hover,
  706. #contact-submit:hover {
  707. border-color: #57cbcc;
  708. }
  709. .form-meghna ::placeholder
  710. {
  711. color: #ddd !important;
  712. }
  713. #contact-submit {
  714. border: 1px solid rgba(236, 239, 241, 0.07);
  715. background: #57cbcc;
  716. padding: 12px 0;
  717. width: 100%;
  718. margin: 0;
  719. }
  720. .google-map #map-canvas {
  721. height: 400px;
  722. }
  723. .contact-info p {
  724. margin-bottom: 25px;
  725. }
  726. .con-info {
  727. margin-bottom: 20px;
  728. }
  729. .con-info i,
  730. .con-info span {
  731. padding-right: 5px;
  732. }
  733. .error {
  734. display: none;
  735. padding: 10px;
  736. color: #D8000C;
  737. border-radius: 4px;
  738. font-size: 13px;
  739. background-color: #FFBABA;
  740. }
  741. .success {
  742. background-color: #6cb670;
  743. border-radius: 4px;
  744. color: #fff;
  745. display: none;
  746. font-size: 13px;
  747. padding: 10px;
  748. }
  749. #map {
  750. height: 370px;
  751. width: 100%;
  752. }
  753. /*=================================================================
  754. Item counter section
  755. ==================================================================*/
  756. .counters-item {
  757. padding: 25px 0;
  758. margin-bottom: 10px;
  759. background: #292F36;
  760. }
  761. .counters-item i {
  762. margin-bottom: 10px;
  763. font-size: 40px;
  764. display: inline-block;
  765. }
  766. .counters-item span {
  767. display: block;
  768. font-weight: bold;
  769. font-size: 35px;
  770. line-height: 50px;
  771. }
  772. .counters-item h3 {
  773. font-size: 20px;
  774. margin: 0;
  775. }
  776. /*=================================================================
  777. Pricing section
  778. ==================================================================*/
  779. .price-item {
  780. border: 1px solid rgba(236, 239, 241, 0.07);
  781. padding-bottom: 30px;
  782. margin-bottom: 15px;
  783. }
  784. .price-title {
  785. background-color: #292F36;
  786. padding: 30px 0 20px;
  787. }
  788. .price-title h3 {
  789. color: #57cbcc;
  790. margin: 0 0 10px;
  791. text-transform: uppercase;
  792. }
  793. .price-title p {
  794. font-size: 18px;
  795. font-weight: 400;
  796. }
  797. .price-title .value {
  798. color: #57cbcc;
  799. font-size: 30px;
  800. }
  801. .pricing ul, .skill-bar {
  802. list-style-type: none;
  803. margin: 0;
  804. padding: 0;
  805. }
  806. .pricing li {
  807. padding: 10px 0;
  808. }
  809. .pricing li:last-child {
  810. border-bottom: 1px solid rgba(236, 239, 241, 0.07);
  811. margin-bottom: 20px;
  812. }
  813. .pricing li:nth-child(2n) {
  814. background-color: #292F36;
  815. }
  816. .pricing li .btn {
  817. text-transform: uppercase;
  818. margin: 20px 0;
  819. }
  820. /*=================================================================
  821. Portfolio section
  822. ==================================================================*/
  823. .portfolio-filter {
  824. margin-bottom: 40px;
  825. text-align: center;
  826. }
  827. .portfolio-filter button {
  828. border: none;
  829. outline: none;
  830. border: 1px solid rgba(236, 239, 241, 0.07);
  831. background: transparent;
  832. display: inline-block;
  833. font-size: 16px;
  834. padding: 6px 20px;
  835. font-weight: 700;
  836. color: #737f8a;
  837. transition: .3s all;
  838. }
  839. .portfolio-filter button.mixitup-control-active {
  840. border: 1px solid #57cbcc;
  841. color: #57cbcc;
  842. }
  843. .portfolio-items-wrapper .mix {
  844. padding: 5px;
  845. }
  846. .portfolio-block {
  847. position: relative;
  848. }
  849. .portfolio-block:before {
  850. transition: all 0.3s ease-in-out;
  851. background: white;
  852. opacity: 0;
  853. top: 20px;
  854. right: 20px;
  855. bottom: 20px;
  856. left: 20px;
  857. position: absolute;
  858. content: '';
  859. }
  860. .portfolio-block img {
  861. width: 100%;
  862. height: auto;
  863. }
  864. .portfolio-block:hover:before {
  865. opacity: 1;
  866. }
  867. .portfolio-block:hover .caption h4 {
  868. top: 45%;
  869. }
  870. .portfolio-block:hover .caption {
  871. opacity: 1;
  872. top: 55%;
  873. }
  874. .portfolio-block .caption {
  875. position: absolute;
  876. top: 50%;
  877. left: 50%;
  878. opacity: 0;
  879. -webkit-transform: translate(-50%, -50%);
  880. transform: translate(-50%, -50%);
  881. z-index: 9;
  882. transition: all 0.2s ease-in-out;
  883. text-align: center;
  884. }
  885. .portfolio-block .caption h4 {
  886. font-size: 16px;
  887. font-weight: 600;
  888. }
  889. .portfolio-block .caption h4 a {
  890. color: #555;
  891. }
  892. .portfolio-block .caption .search-icon {
  893. background: #57cbcc;
  894. width: 50px;
  895. height: 50px;
  896. color: #fff;
  897. display: inline-block;
  898. font-size: 20px;
  899. border-radius: 30px;
  900. }
  901. .portfolio-block .caption .search-icon i {
  902. line-height: 50px;
  903. }
  904. /*=================================================================
  905. Services section
  906. ==================================================================*/
  907. .service-block {
  908. padding: 60px 20px;
  909. border-left: 1px solid rgba(236, 239, 241, 0.07);
  910. border-top: 1px solid rgba(236, 239, 241, 0.07);
  911. margin-bottom: 40px;
  912. box-shadow: 2px 2px 5px rgba(44, 44, 44, 0.3), 13px 13px 0 rgba(255, 255, 255, 0.7);
  913. }
  914. .service-block .service-icon {
  915. margin-bottom: 10px;
  916. font-size: 50px;
  917. }
  918. /*=================================================================
  919. Services section 2
  920. ==================================================================*/
  921. .service-2 .service-item {
  922. border: 1px solid #eee;
  923. margin-bottom: 30px;
  924. padding: 50px 20px;
  925. transition: all 0.3s ease 0s;
  926. }
  927. .service-2 .service-item:hover {
  928. box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  929. -webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  930. }
  931. .service-2 .service-item:hover i {
  932. background: #fff;
  933. color: #57cbcc;
  934. }
  935. .service-2 .service-item i {
  936. font-size: 30px;
  937. display: inline-block;
  938. background: #57cbcc none repeat scroll 0 0;
  939. border-radius: 30px;
  940. box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  941. color: #fff;
  942. height: 55px;
  943. line-height: 55px;
  944. margin-bottom: 20px;
  945. width: 55px;
  946. transition: all 0.3s ease 0s;
  947. }
  948. /*=================================================================
  949. Our skills
  950. ==================================================================*/
  951. .skill-bar p {
  952. font-size: 18px;
  953. margin-bottom: 0;
  954. }
  955. .skill-bar p span {
  956. font-style: italic;
  957. font-size: 30px;
  958. color: rgba(187, 187, 187, 0.34);
  959. display: inline-block;
  960. vertical-align: middle;
  961. }
  962. .skill-bar .progress {
  963. height: 6px;
  964. border-radius: 0;
  965. }
  966. .skill-bar .progress .progress-bar {
  967. background: #57cbcc;
  968. }
  969. /*=================================================================
  970. Our Team
  971. ==================================================================*/
  972. .team-member {
  973. background-color: #292F36;
  974. margin-bottom: 10px;
  975. }
  976. .team-member:hover .mask {
  977. cursor: pointer;
  978. opacity: 1;
  979. filter: alpha(opacity=100);
  980. -webkit-transform: rotateY(0deg) scale(1, 1);
  981. transform: rotateY(0deg) scale(1, 1);
  982. }
  983. .member-photo {
  984. overflow: hidden;
  985. position: relative;
  986. }
  987. @media (max-width: 768px) {
  988. .member-photo {
  989. text-align: center;
  990. }
  991. }
  992. /* .member-photo:hover img { */
  993. /* -webkit-transform: scale(1.2); */
  994. /* transform: scale(1.2); */
  995. /* } */
  996. .member-photo img {
  997. transition: all 0.4s ease 0s;
  998. }
  999. @media (max-width: 768px) {
  1000. .member-photo img {
  1001. display: inline-block;
  1002. }
  1003. }
  1004. .member-photo .mask {
  1005. background-color: rgba(87, 203, 204, 0.7);
  1006. position: absolute;
  1007. text-align: center;
  1008. height: 100%;
  1009. width: 100%;
  1010. left: 0;
  1011. top: 0;
  1012. opacity: 0;
  1013. filter: alpha(opacity=0);
  1014. transition: all .5s ease-out 0s;
  1015. -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
  1016. transform: rotateY(180deg) scale(0.5, 0.5);
  1017. }
  1018. .member-photo .mask ul {
  1019. text-align: center;
  1020. position: relative;
  1021. top: 125px;
  1022. }
  1023. .member-photo .mask ul li a {
  1024. border: 1px solid #fff;
  1025. color: #fff;
  1026. display: block;
  1027. font-size: 20px;
  1028. height: 35px;
  1029. line-height: 35px;
  1030. text-align: center;
  1031. width: 35px;
  1032. }
  1033. .member-photo .mask ul li a:hover {
  1034. background-color: #fff;
  1035. color: #57cbcc;
  1036. border: 1px solid transparent;
  1037. }
  1038. .member-meta {
  1039. padding: 15px;
  1040. }
  1041. .member-meta h4 {
  1042. margin: 0 0 5px;
  1043. }
  1044. .member-meta span {
  1045. font-size: 12px;
  1046. }
  1047. /*=================================================================
  1048. Testimonial section
  1049. ==================================================================*/
  1050. .testimonial:before {
  1051. background: rgba(42, 48, 55, 0.7);
  1052. }
  1053. .client-info {
  1054. margin: 0 auto;
  1055. width: 45%;
  1056. }
  1057. @media (max-width: 768px) {
  1058. .client-info {
  1059. width: 90%;
  1060. }
  1061. }
  1062. .client-comment p {
  1063. color: #afbac4;
  1064. font-size: 18px;
  1065. }
  1066. .client-thumb img {
  1067. border-radius: 50%;
  1068. margin: 0 auto;
  1069. max-width: 115px;
  1070. width: 100%;
  1071. }
  1072. .client-meta {
  1073. margin: 0 0 10px;
  1074. }
  1075. .client-meta h3 {
  1076. margin: 15px 0 5px .0;
  1077. }
  1078. .client-meta span {
  1079. font-size: 12px;
  1080. }
  1081. .owl-pagination,
  1082. .owl-buttons {
  1083. text-align: center;
  1084. }
  1085. .owl-controls .owl-page {
  1086. display: inline-block;
  1087. }
  1088. .owl-controls .owl-page span {
  1089. background-color: transparent;
  1090. border: 2px solid #fff;
  1091. border-radius: 50px;
  1092. display: block;
  1093. height: 13px;
  1094. margin: 0 4px;
  1095. width: 13px;
  1096. opacity: 1;
  1097. filter: alpha(opacity=100);
  1098. }
  1099. .owl-controls .owl-page.active span,
  1100. .owl-controls .owl-page:hover span {
  1101. background-color: #57cbcc;
  1102. border: 2px solid transparent;
  1103. }
  1104. .our-clients {
  1105. margin: 30px 0 0;
  1106. }
  1107. #our-clietns .item img {
  1108. max-width: 150px;
  1109. width: 100%;
  1110. }
  1111. #our-clietns .owl-next,
  1112. #our-clietns .owl-prev {
  1113. border: 1px solid #ddd;
  1114. border-radius: 50px;
  1115. display: inline-block;
  1116. margin: 45px 0 0;
  1117. padding: 3px 15px;
  1118. position: relative;
  1119. text-align: center;
  1120. }
  1121. #our-clietns .owl-next i,
  1122. #our-clietns .owl-prev i {
  1123. line-height: 34px;
  1124. }
  1125. #our-clietns .owl-prev {
  1126. margin-right: 15px;
  1127. }
  1128. #our-clients .item {
  1129. margin: 10px;
  1130. }
  1131. /*=================================================================
  1132. Latest Posts
  1133. ==================================================================*/
  1134. .note {
  1135. background-color: #292F36;
  1136. border: 1px solid #4e595f;
  1137. }
  1138. .post-block {
  1139. background-color: #292F36;
  1140. margin-bottom: 10px;
  1141. }
  1142. .post-block .content {
  1143. padding: 20px;
  1144. }
  1145. .post-block .content h3 {
  1146. margin: 0 0 6px;
  1147. font-size: 20px;
  1148. line-height: 1.5;
  1149. text-transform: capitalize;
  1150. }
  1151. .note .media-wrapper {
  1152. border-bottom: 1px solid #4e595f;
  1153. }
  1154. .note .excerpt h3 {
  1155. font-size: 20px;
  1156. line-height: 1.5;
  1157. text-transform: capitalize;
  1158. }
  1159. .all-post {
  1160. margin-top: 50px;
  1161. }
  1162. /*=================================================================
  1163. Single Blog Page
  1164. ==================================================================*/
  1165. #blog-banner {
  1166. padding-bottom: 100px;
  1167. padding-top: 150px;
  1168. }
  1169. #blog-page {
  1170. margin: 0 0 40px;
  1171. }
  1172. .post-meta {
  1173. font-size: 13px;
  1174. margin: 20px 0 0;
  1175. padding: 0 20px 10px;
  1176. }
  1177. .post-meta a {
  1178. color: #57cbcc;
  1179. }
  1180. .post-meta>span {
  1181. color: #666;
  1182. border-right: 1px solid #dedede;
  1183. display: inline-block;
  1184. font-size: 13px;
  1185. margin: 10px 10px 0 0;
  1186. padding-right: 10px;
  1187. }
  1188. .post-meta>span:last-child {
  1189. border-right: 0;
  1190. }
  1191. .post-meta>span i {
  1192. margin-right: 5px;
  1193. }
  1194. .post-excerpt {
  1195. padding: 0 20px;
  1196. margin-bottom: 60px;
  1197. }
  1198. .post-excerpt h3 a {
  1199. color: #000;
  1200. }
  1201. .post-excerpt blockquote {
  1202. line-height: 22px;
  1203. margin: 20px 0;
  1204. font-size: 16px;
  1205. }
  1206. .single-blog {
  1207. background-color: #fff;
  1208. margin-bottom: 50px;
  1209. padding: 20px;
  1210. }
  1211. .blog-subtitle {
  1212. font-size: 15px;
  1213. padding-bottom: 10px;
  1214. border-bottom: 1px solid #dedede;
  1215. margin-bottom: 25px;
  1216. text-transform: uppercase;
  1217. }
  1218. .next-prev {
  1219. border-bottom: 1px solid #dedede;
  1220. border-top: 1px solid #dedede;
  1221. margin: 20px 0;
  1222. padding: 25px 0;
  1223. }
  1224. .next-prev a {
  1225. color: #000;
  1226. }
  1227. .next-prev a:hover {
  1228. color: #57cbcc;
  1229. }
  1230. .next-prev .prev-post i {
  1231. margin-right: 10px;
  1232. }
  1233. .next-prev .next-post i {
  1234. margin-left: 10px;
  1235. }
  1236. .social-profile ul li {
  1237. margin: 0 10px 0 0;
  1238. display: inline-block;
  1239. }
  1240. .social-profile ul li a {
  1241. color: #4e595f;
  1242. display: block;
  1243. font-size: 16px;
  1244. }
  1245. .social-profile ul li a i:hover {
  1246. color: #57cbcc;
  1247. }
  1248. .comments-section {
  1249. margin-top: 35px;
  1250. }
  1251. .author-about {
  1252. margin-top: 40px;
  1253. }
  1254. .post-author {
  1255. margin-right: 20px;
  1256. }
  1257. .post-author>img {
  1258. border: 1px solid #dedede;
  1259. max-width: 120px;
  1260. padding: 5px;
  1261. width: 100%;
  1262. }
  1263. .comment-list ul {
  1264. margin-top: 20px;
  1265. }
  1266. .comment-list ul li {
  1267. margin-bottom: 20px;
  1268. }
  1269. .comment-wrap {
  1270. border: 1px solid #dedede;
  1271. border-radius: 1px;
  1272. margin-left: 20px;
  1273. padding: 10px;
  1274. position: relative;
  1275. }
  1276. .comment-wrap .author-avatar {
  1277. margin-right: 10px;
  1278. }
  1279. .comment-wrap .media .media-heading {
  1280. font-size: 14px;
  1281. margin-bottom: 8px;
  1282. }
  1283. .comment-wrap .media .media-heading a {
  1284. color: #57cbcc;
  1285. font-size: 13px;
  1286. }
  1287. .comment-wrap .media .comment-meta {
  1288. font-size: 12px;
  1289. color: #888;
  1290. }
  1291. .comment-wrap .media p {
  1292. margin-top: 15px;
  1293. }
  1294. .comment-reply-form {
  1295. margin-top: 80px;
  1296. }
  1297. .comment-reply-form input,
  1298. .comment-reply-form textarea {
  1299. height: 35px;
  1300. border-radius: 0;
  1301. box-shadow: none;
  1302. }
  1303. .comment-reply-form input:focus,
  1304. .comment-reply-form textarea:focus {
  1305. box-shadow: none;
  1306. border: 1px solid #57cbcc;
  1307. }
  1308. .comment-reply-form textarea,
  1309. .comment-reply-form .btn-main {
  1310. height: auto;
  1311. }
  1312. /* Staticman Comments */
  1313. #staticman-form:before {
  1314. display: block;
  1315. height: 90px;
  1316. margin-top: -90px;
  1317. visibility: hidden;
  1318. content: "";
  1319. }
  1320. @media (max-width: 768px) {
  1321. #staticman-form:before {
  1322. display: block;
  1323. height: 80px;
  1324. margin-top: -80px;
  1325. visibility: hidden;
  1326. content: "";
  1327. }
  1328. }
  1329. .post-comment {
  1330. background-color: #292f36;;
  1331. padding: 20px;
  1332. margin-top: 20px;
  1333. margin-bottom: 20px;
  1334. }
  1335. .post-comment-header {
  1336. margin-bottom: 20px;
  1337. }
  1338. .post-comment-avatar {
  1339. display: inline-block;
  1340. vertical-align: middle;
  1341. border-radius: 50%;
  1342. }
  1343. .post-comment-info {
  1344. display: inline-block;
  1345. margin-left: 20px;
  1346. margin-bottom: 0;
  1347. vertical-align: middle;
  1348. }
  1349. .post-comment-field {
  1350. display: block;
  1351. font: inherit;
  1352. padding: 10px;
  1353. margin-top: 20px;
  1354. outline-color: #F76C5E;
  1355. width: 100%;
  1356. }
  1357. .post-comment-name {
  1358. color: #afbac4;
  1359. font-weight: 500;
  1360. font-size: 18px;
  1361. }
  1362. .post-time {
  1363. color: #737f8a;
  1364. }
  1365. input#e-mail, #hidden_iframe {
  1366. display: none;
  1367. }
  1368. /*=================================================================
  1369. Footer section
  1370. ==================================================================*/
  1371. .social-icon {
  1372. padding: 60px 0 35px;
  1373. }
  1374. .social-icon ul {
  1375. text-align: center;
  1376. }
  1377. .social-icon ul li {
  1378. margin-bottom: 4px;
  1379. }
  1380. .social-icon ul li a {
  1381. background-color: #26292e;
  1382. border: 1px solid transparent;
  1383. display: block;
  1384. height: 70px;
  1385. width: 70px;
  1386. transition: all 400ms ease-out 0s;
  1387. }
  1388. .social-icon ul li a:hover{
  1389. background: #57cbcc;
  1390. }
  1391. .social-icon ul li a:hover i{
  1392. color: #fff;
  1393. opacity: 1;
  1394. }
  1395. .social-icon ul li a i {
  1396. color: #55606a;
  1397. display: inline-block;
  1398. font-size: 32px;
  1399. line-height: 70px;
  1400. margin: 0;
  1401. opacity: 0.3;
  1402. transition: all 400ms ease-out 0s;
  1403. }
  1404. .copyright {
  1405. padding: 20px 0;
  1406. color: #fff;
  1407. }
  1408. .copyright img {
  1409. margin-bottom: 15px;
  1410. }
  1411. .copyright p {
  1412. margin-top: 10px;
  1413. }
  1414. #scrollUp {
  1415. border: 1px solid #4e595f;
  1416. bottom: 15px;
  1417. color: #fff;
  1418. display: none;
  1419. padding: 8px 12px;
  1420. position: fixed;
  1421. right: 20px;
  1422. z-index: 600;
  1423. }
  1424. #scrollUp:hover {
  1425. background-color: #57cbcc;
  1426. border: 1px solid #57cbcc;
  1427. }
  1428. /*=================================================================
  1429. Twitter Feed
  1430. ==================================================================*/
  1431. .twitter-bird span {
  1432. border: 2px solid #6cb670;
  1433. border-radius: 50px;
  1434. color: #6cb670;
  1435. display: inline-block;
  1436. margin-bottom: 50px;
  1437. height: 90px;
  1438. width: 90px;
  1439. }
  1440. .twitter-bird span i {
  1441. line-height: 90px;
  1442. }
  1443. .tweet {
  1444. margin-bottom: 10px;
  1445. }
  1446. .tweet a {
  1447. color: #6cb670;
  1448. }
  1449. /*=================================================================
  1450. Blog Page
  1451. ==================================================================*/
  1452. #blog-banner {
  1453. padding-bottom: 100px;
  1454. padding-top: 150px;
  1455. }
  1456. .blog-icon {
  1457. border: 1px solid #6CB670;
  1458. border-radius: 50%;
  1459. color: #6CB670;
  1460. display: inline-block;
  1461. padding: 16px 20px;
  1462. }
  1463. .blog-title h1 {
  1464. text-transform: uppercase;
  1465. }
  1466. #blog-page {
  1467. margin: 0 0 40px;
  1468. }
  1469. .post-item .entry {
  1470. border: 1px solid #4e595f;
  1471. margin-bottom: 30px;
  1472. }
  1473. .entry .post-excerpt {
  1474. padding: 0 20px;
  1475. }
  1476. #gallery-post .owl-prev,
  1477. #post-thumb .owl-prev,
  1478. #gallery-post .owl-next,
  1479. #post-thumb .owl-next {
  1480. padding: 5px 17px;
  1481. position: absolute;
  1482. top: 45%;
  1483. transition: all .5s ease-in 0s;
  1484. }
  1485. #gallery-post .owl-prev,
  1486. #post-thumb .owl-prev {
  1487. left: -45px;
  1488. }
  1489. #gallery-post .owl-next,
  1490. #post-thumb .owl-next {
  1491. right: -45px;
  1492. }
  1493. #gallery-post:hover .owl-prev,
  1494. #post-thumb:hover .owl-prev {
  1495. left: 0;
  1496. }
  1497. #gallery-post:hover .owl-next,
  1498. #post-thumb:hover .owl-next {
  1499. right: 0;
  1500. }
  1501. #gallery-post,
  1502. #post-thumb {
  1503. overflow-x: hidden;
  1504. }
  1505. #post-thumb .owl-buttons {
  1506. color: #fff;
  1507. }
  1508. .post-meta {
  1509. background-color: #3d444a;
  1510. border-top: 1px solid #4e595f;
  1511. font-size: 13px;
  1512. margin: 20px 0 0;
  1513. padding: 0 20px 10px;
  1514. }
  1515. .post-meta>span {
  1516. border-right: 1px solid #4e595f;
  1517. display: inline-block;
  1518. font-size: 12px;
  1519. margin: 10px 10px 0 0;
  1520. padding-right: 10px;
  1521. }
  1522. .post-meta>span:last-child {
  1523. border-right: 0;
  1524. }
  1525. .post-meta>span>i {
  1526. margin-right: 5px;
  1527. }
  1528. .post-meta a:hover {
  1529. color: #6CB670;
  1530. }
  1531. .post-excerpt .more {
  1532. margin-top: 20px;
  1533. }
  1534. .post-excerpt .more a {
  1535. display: inline-block;
  1536. font-size: 13px;
  1537. padding: 10px 25px;
  1538. }
  1539. .post-excerpt .more a:hover {
  1540. background-color: #6CB670;
  1541. color: #fff;
  1542. }
  1543. aside.widget {
  1544. margin-bottom: 25px;
  1545. }
  1546. .widget-title>h3 {
  1547. color: #fff;
  1548. margin-bottom: 15px;
  1549. margin-top: 0;
  1550. position: relative;
  1551. }
  1552. #search-form {
  1553. position: relative;
  1554. }
  1555. #search-submit {
  1556. background: none;
  1557. border: 0;
  1558. color: #C8C8CA;
  1559. display: block;
  1560. font-size: 16px;
  1561. height: 32px;
  1562. outline: 0;
  1563. position: absolute;
  1564. right: 0;
  1565. text-align: center;
  1566. top: 0;
  1567. width: 32px;
  1568. }
  1569. .widget-content .tab-content {
  1570. background-color: #2f383d;
  1571. padding: 20px;
  1572. }
  1573. .tab-post-nav {
  1574. background-color: #4A535A;
  1575. }
  1576. .tab-post-nav li {
  1577. float: left;
  1578. }
  1579. .tab-post-nav li.active a {
  1580. border-top: 3px solid #6cb670;
  1581. background-color: #2F383D;
  1582. color: #6CB670;
  1583. }
  1584. .tab-pane.active .clearfix:first-child {
  1585. margin-bottom: 25px;
  1586. }
  1587. .tab-excerpt>span {
  1588. display: block;
  1589. font-size: 12px;
  1590. margin-bottom: 10px;
  1591. }
  1592. .tab-excerpt h4 a {
  1593. color: #fff;
  1594. }
  1595. .tab-excerpt h4 a:hover {
  1596. color: #6cb670;
  1597. }
  1598. .tab-post-nav li a {
  1599. border-top: 3px solid transparent;
  1600. color: #fff;
  1601. display: block;
  1602. padding: 13px 18px;
  1603. text-align: center;
  1604. }
  1605. .categories li {
  1606. margin-bottom: 10px;
  1607. transition: all .5s ease-in 0s;
  1608. }
  1609. .categories>li:hover a {
  1610. padding-left: 10px;
  1611. color: #6CB670;
  1612. }
  1613. .categories>li:last-child {
  1614. border-bottom: 0;
  1615. }
  1616. .categories li a {
  1617. padding-left: 5px;
  1618. }
  1619. .widget-content .tag {
  1620. background-color: #2F383D;
  1621. color: #fff;
  1622. display: inline-block;
  1623. margin-bottom: 10px;
  1624. margin-right: 5px;
  1625. padding: 5px 13px;
  1626. }
  1627. .widget-content .tag:hover {
  1628. background-color: #6CB670;
  1629. color: #fff;
  1630. }
  1631. .post-pagination {
  1632. display: inline-block;
  1633. margin-bottom: 20px;
  1634. }
  1635. .post-pagination ul li {
  1636. margin-right: 5px;
  1637. float: left;
  1638. }
  1639. .post-pagination ul li:last-child {
  1640. margin-right: 0;
  1641. }
  1642. .post-pagination ul li.disabled a {
  1643. cursor: not-allowed;
  1644. }
  1645. .post-pagination ul li.disabled a:hover {
  1646. background-color: #2E373C;
  1647. color: #9aa8b3;
  1648. }
  1649. .post-pagination ul li a {
  1650. background-color: #30393e;
  1651. color: #9aa8b3;
  1652. display: block;
  1653. padding: 8px 18px;
  1654. }
  1655. .post-pagination ul li a:hover,
  1656. .post-pagination ul li.active a {
  1657. background-color: #6CB670;
  1658. color: #fff;
  1659. }
  1660. /*=================================================================
  1661. Single Blog Page
  1662. ==================================================================*/
  1663. .single-blog {
  1664. background-color: #fff;
  1665. margin-bottom: 50px;
  1666. padding: 20px;
  1667. }
  1668. blockquote {
  1669. border-left: 5px solid #6cb670;
  1670. font-style: italic;
  1671. line-height: 22px;
  1672. margin: 20px 0;
  1673. }
  1674. .next-prev {
  1675. border-bottom: 1px solid #4e595f;
  1676. border-top: 1px solid #4e595f;
  1677. margin: 20px 0;
  1678. padding: 15px 0 10px;
  1679. }
  1680. .next-prev a:hover {
  1681. color: #6CB670;
  1682. }
  1683. .prev-post i {
  1684. float: left;
  1685. margin-right: 10px;
  1686. margin-top: -4px;
  1687. }
  1688. .next-post i {
  1689. float: right;
  1690. margin-left: 10px;
  1691. margin-top: -3px;
  1692. }
  1693. .post-author {
  1694. margin-right: 20px;
  1695. }
  1696. .post-author>img {
  1697. border: 1px solid #4e595f;
  1698. max-width: 120px;
  1699. padding: 5px;
  1700. width: 100%;
  1701. }
  1702. .comment-reply-form>h3,
  1703. .author-about>h4,
  1704. .comments>h4 {
  1705. border-bottom: 1px solid #4e595f;
  1706. margin-bottom: 15px;
  1707. margin-top: 0;
  1708. padding-bottom: 10px;
  1709. position: relative;
  1710. }
  1711. .author-bio h5 {
  1712. display: inline-block;
  1713. }
  1714. .post-item .comments-section {
  1715. margin-top: 35px;
  1716. }
  1717. .comment-list ul {
  1718. margin-top: 20px;
  1719. }
  1720. .comment-list li {
  1721. margin-bottom: 20px;
  1722. }
  1723. .comment-wrap {
  1724. border: 1px solid #4e595f;
  1725. border-radius: 1px;
  1726. margin-left: 20px;
  1727. padding: 10px;
  1728. position: relative;
  1729. }
  1730. .comment-wrap .author-avatar {
  1731. margin-left: -25px;
  1732. margin-right: 20px;
  1733. }
  1734. .author-comment {
  1735. margin-bottom: 15px;
  1736. overflow: hidden;
  1737. }
  1738. .author-comment cite a:hover,
  1739. .replay:hover {
  1740. color: #6CB670;
  1741. text-decoration: underline;
  1742. }
  1743. .author-comment cite {
  1744. margin-bottom: 2px;
  1745. padding-top: 4px;
  1746. }
  1747. .comment-content {
  1748. margin-left: 45px;
  1749. }
  1750. .comment-list ul li {
  1751. padding-left: 25px;
  1752. }
  1753. .comment-reply-form {
  1754. margin-top: 80px;
  1755. }
  1756. #comment-form {
  1757. margin-top: 35px;
  1758. }
  1759. #comment-form .form-control:hover {
  1760. border-color: #6CB670;
  1761. }
  1762. .form-group:last-child,
  1763. .form-group:last-child input {
  1764. margin: 0;
  1765. }
  1766. .form-control-meghna .form-control {
  1767. background-color: transparent;
  1768. padding: 5px 10px;
  1769. color: #ddd;
  1770. border: 1px solid rgba(236, 239, 241, 0.07);
  1771. }
  1772. .form-control-meghna .form-control:focus
  1773. {
  1774. border-color: #57cbcc;
  1775. box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.432);
  1776. }
  1777. figure img {
  1778. display: block;
  1779. margin: 0 auto 5px;
  1780. }
  1781. figcaption {
  1782. text-align: center;
  1783. }
  1784. /*! Social sharing buttons from Sharingbuttons.io */
  1785. .resp-sharing-button__link,
  1786. .resp-sharing-button__icon {
  1787. display: inline-block
  1788. }
  1789. .resp-sharing-button__link {
  1790. text-decoration: none;
  1791. color: #fff;
  1792. margin: 0.5em
  1793. }
  1794. .resp-sharing-button {
  1795. border-radius: 5px;
  1796. transition: 25ms ease-out;
  1797. padding: 0.5em 0.75em;
  1798. font-family: Helvetica Neue,Helvetica,Arial, sans-serif;
  1799. }
  1800. .resp-sharing-button__icon svg {
  1801. width: 1em;
  1802. height: 1em;
  1803. margin-right: 0.4em;
  1804. vertical-align: top
  1805. }
  1806. .resp-sharing-button--small svg {
  1807. margin: 0;
  1808. vertical-align: middle
  1809. }
  1810. /* Non solid icons get a stroke */
  1811. .resp-sharing-button__icon {
  1812. stroke: #fff;
  1813. fill: none
  1814. }
  1815. /* Solid icons get a fill */
  1816. .resp-sharing-button__icon--solid,
  1817. .resp-sharing-button__icon--solidcircle {
  1818. fill: #fff;
  1819. stroke: none
  1820. }
  1821. .resp-sharing-button--twitter {
  1822. background-color: #55acee
  1823. }
  1824. .resp-sharing-button--twitter:hover {
  1825. background-color: #2795e9
  1826. }
  1827. .resp-sharing-button--pinterest {
  1828. background-color: #bd081c
  1829. }
  1830. .resp-sharing-button--pinterest:hover {
  1831. background-color: #8c0615
  1832. }
  1833. .resp-sharing-button--facebook {
  1834. background-color: #3b5998
  1835. }
  1836. .resp-sharing-button--facebook:hover {
  1837. background-color: #2d4373
  1838. }
  1839. .resp-sharing-button--tumblr {
  1840. background-color: #35465C
  1841. }
  1842. .resp-sharing-button--tumblr:hover {
  1843. background-color: #222d3c
  1844. }
  1845. .resp-sharing-button--reddit {
  1846. background-color: #5f99cf
  1847. }
  1848. .resp-sharing-button--reddit:hover {
  1849. background-color: #3a80c1
  1850. }
  1851. .resp-sharing-button--google {
  1852. background-color: #dd4b39
  1853. }
  1854. .resp-sharing-button--google:hover {
  1855. background-color: #c23321
  1856. }
  1857. .resp-sharing-button--linkedin {
  1858. background-color: #0077b5
  1859. }
  1860. .resp-sharing-button--linkedin:hover {
  1861. background-color: #046293
  1862. }
  1863. .resp-sharing-button--email {
  1864. background-color: #777
  1865. }
  1866. .resp-sharing-button--email:hover {
  1867. background-color: #5e5e5e
  1868. }
  1869. .resp-sharing-button--xing {
  1870. background-color: #1a7576
  1871. }
  1872. .resp-sharing-button--xing:hover {
  1873. background-color: #114c4c
  1874. }
  1875. .resp-sharing-button--whatsapp {
  1876. background-color: #25D366
  1877. }
  1878. .resp-sharing-button--whatsapp:hover {
  1879. background-color: #1da851
  1880. }
  1881. .resp-sharing-button--hackernews {
  1882. background-color: #FF6600
  1883. }
  1884. .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }
  1885. .resp-sharing-button--vk {
  1886. background-color: #507299
  1887. }
  1888. .resp-sharing-button--vk:hover {
  1889. background-color: #43648c
  1890. }
  1891. .resp-sharing-button--facebook {
  1892. background-color: #3b5998;
  1893. border-color: #3b5998;
  1894. }
  1895. .resp-sharing-button--facebook:hover,
  1896. .resp-sharing-button--facebook:active {
  1897. background-color: #2d4373;
  1898. border-color: #2d4373;
  1899. }
  1900. .resp-sharing-button--twitter {
  1901. background-color: #55acee;
  1902. border-color: #55acee;
  1903. }
  1904. .resp-sharing-button--twitter:hover,
  1905. .resp-sharing-button--twitter:active {
  1906. background-color: #2795e9;
  1907. border-color: #2795e9;
  1908. }
  1909. .resp-sharing-button--google {
  1910. background-color: #dd4b39;
  1911. border-color: #dd4b39;
  1912. }
  1913. .resp-sharing-button--google:hover,
  1914. .resp-sharing-button--google:active {
  1915. background-color: #c23321;
  1916. border-color: #c23321;
  1917. }
  1918. .resp-sharing-button--email {
  1919. background-color: #777777;
  1920. border-color: #777777;
  1921. }
  1922. .resp-sharing-button--email:hover,
  1923. .resp-sharing-button--email:active {
  1924. background-color: #5e5e5e;
  1925. border-color: #5e5e5e;
  1926. }
  1927. .resp-sharing-button--reddit {
  1928. background-color: #5f99cf;
  1929. border-color: #5f99cf;
  1930. }
  1931. .resp-sharing-button--reddit:hover,
  1932. .resp-sharing-button--reddit:active {
  1933. background-color: #3a80c1;
  1934. border-color: #3a80c1;
  1935. }
  1936. .resp-sharing-button--whatsapp {
  1937. background-color: #25D366;
  1938. border-color: #25D366;
  1939. }
  1940. .resp-sharing-button--whatsapp:hover,
  1941. .resp-sharing-button--whatsapp:active {
  1942. background-color: #1DA851;
  1943. border-color: #1DA851;
  1944. }
  1945. .resp-sharing-button--telegram {
  1946. background-color: #54A9EB;
  1947. }
  1948. .resp-sharing-button--telegram:hover {
  1949. background-color: #4B97D1;}
  1950. /*# sourceMappingURL=maps/style.css.map */