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.

2366 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. background-position: center;
  472. }
  473. .hero-area {
  474. background-size: cover;
  475. height: 100vh;
  476. position: relative;
  477. display: flex;
  478. justify-content: center;
  479. align-items: center;
  480. }
  481. .hero-area:before {
  482. content: '';
  483. background: rgba(0, 0, 0, 0.63);
  484. position: absolute;
  485. top: 0;
  486. right: 0;
  487. bottom: 0;
  488. left: 0;
  489. }
  490. .hero-area .block {
  491. text-align: center;
  492. z-index: 99;
  493. }
  494. .hero-area .block .video-button {
  495. background: #fff;
  496. color: #57cbcc;
  497. display: inline-block;
  498. height: 60px;
  499. width: 60px;
  500. border-radius: 50px;
  501. }
  502. .hero-area .block .video-button i {
  503. line-height: 60px;
  504. font-size: 20px;
  505. margin-left: 3px;
  506. }
  507. .hero-area .block h1 {
  508. font-size: 90px;
  509. color: #fff;
  510. text-transform: capitalize;
  511. font-weight: 700;
  512. margin-bottom: 20px;
  513. }
  514. @media (max-width: 480px) {
  515. .hero-area .block h1 {
  516. font-size: 60px;
  517. }
  518. }
  519. .hero-area .block p {
  520. color: #fff;
  521. font-size: 20px;
  522. width: 70%;
  523. margin: 0 auto;
  524. }
  525. .hero-area .block .btn-transparent {
  526. margin-top: 40px;
  527. border-color: #fff;
  528. padding: 14px 50px;
  529. font-size: 18px;
  530. font-size: 16px;
  531. font-weight: bold;
  532. letter-spacing: 1px;
  533. }
  534. .hero-area-video {
  535. height: 100vh;
  536. position: inherit !important;
  537. display: flex;
  538. justify-content: center;
  539. align-items: center;
  540. }
  541. .hero-area-video .block {
  542. color: #fff;
  543. text-align: center;
  544. }
  545. .hero-area-video .block h1 {
  546. font-size: 60px;
  547. font-weight: 700;
  548. margin-bottom: 20px;
  549. }
  550. .hero-area-video .block p {
  551. color: #fff;
  552. text-transform: uppercase;
  553. font-size: 12px;
  554. letter-spacing: 3px;
  555. margin-bottom: 20px;
  556. }
  557. .hero-area-video .block .btn-main {
  558. margin-top: 20px;
  559. }
  560. .dark-bg {
  561. background: rgba(0, 0, 0, 0.7);
  562. height: 100%;
  563. width: 100%;
  564. position: absolute;
  565. z-index: -1;
  566. }
  567. /*=================================================================
  568. About us section
  569. ==================================================================*/
  570. .about .block {
  571. background: #242930;
  572. padding: 30px;
  573. border-bottom: 2px solid transparent;
  574. transition: .5s all;
  575. margin-bottom: 20px;
  576. }
  577. .about .block:hover {
  578. border-bottom: 2px solid #57cbcc;
  579. }
  580. .about .block:hover .icon-box {
  581. -webkit-transform: translateY(-10px);
  582. transform: translateY(-10px);
  583. }
  584. .about .block .icon-box {
  585. position: relative;
  586. width: 160px;
  587. height: 92.38px;
  588. background-color: transparent;
  589. margin: 46.19px auto 60px;
  590. padding: 20px 0;
  591. border-left: 2px solid rgba(236, 239, 241, 0.07);
  592. border-right: 2px solid rgba(236, 239, 241, 0.07);
  593. font-size: 50px;
  594. -webkit-transform: translateZ(0px);
  595. transform: translateZ(0px);
  596. transition-duration: 0.3s;
  597. transition-property: -webkit-transform;
  598. transition-property: transform;
  599. transition-property: transform, -webkit-transform;
  600. }
  601. .about .block .icon-box:after,
  602. .about .block .icon-box:before {
  603. content: "";
  604. position: absolute;
  605. z-index: 1;
  606. width: 113.14px;
  607. height: 113.14px;
  608. background-color: inherit;
  609. left: 20.4315px;
  610. -webkit-transform: scaleY(0.5774) rotate(-45deg);
  611. transform: scaleY(0.5774) rotate(-45deg);
  612. }
  613. .about .block .icon-box:before {
  614. top: -56.5685px;
  615. border-top: 2px solid rgba(236, 239, 241, 0.07);
  616. border-right: 2px solid rgba(236, 239, 241, 0.07);
  617. }
  618. .about .block .icon-box:after {
  619. bottom: -56.5685px;
  620. border-bottom: 2px solid rgba(236, 239, 241, 0.07);
  621. border-left: 2px solid rgba(236, 239, 241, 0.07);
  622. }
  623. .about .block .icon-box h3 {
  624. color: #afbac4;
  625. }
  626. /*=================================================================
  627. About us 2 section
  628. ==================================================================*/
  629. .about-2 .content-block {
  630. padding: 40px;
  631. }
  632. .about-2 .content-block .media {
  633. margin-top: 25px;
  634. }
  635. .about-2 .content-block .media .pull-left {
  636. padding-right: 15px;
  637. }
  638. .about-2 .content-block .media i {
  639. font-size: 30px;
  640. color: #57cbcc;
  641. }
  642. .about-2 .content-block .media h4 {
  643. font-size: 16px;
  644. font-weight: 600;
  645. }
  646. /*=================================================================
  647. Call To Action 1
  648. ==================================================================*/
  649. .call-to-action {
  650. background-attachment: fixed;
  651. }
  652. .call-to-action h2 {
  653. font-weight: 700;
  654. color: #444;
  655. }
  656. .call-to-action p {
  657. font-size: 16px;
  658. color: #666;
  659. }
  660. .call-to-action .btn-main {
  661. margin-top: 20px;
  662. }
  663. /*=================================================================
  664. Call To Action 2
  665. ==================================================================*/
  666. .call-to-action-2 {
  667. padding: 100px 0;
  668. background-image: url("../images/call-to-action/call-to-action-bg.jpg");
  669. background-size: cover;
  670. color: #fff;
  671. }
  672. .call-to-action-2 h2 {
  673. line-height: 1.5;
  674. }
  675. .call-to-action-2 p {
  676. color: #fff;
  677. }
  678. .call-to-action-2 .btn-main {
  679. margin-top: 20px;
  680. }
  681. .contact-us {
  682. padding-top: 50px;
  683. }
  684. @media (max-width: 768px)
  685. {
  686. .contact-us {
  687. padding-top: 80px;
  688. }
  689. }
  690. .contact-form {
  691. margin-bottom: 60px;
  692. }
  693. .form-meghna .form-control {
  694. background-color: transparent;
  695. border-radius: 0;
  696. padding: 5px 10px;
  697. color: #ddd;
  698. border: 1px solid rgba(236, 239, 241, 0.07);
  699. }
  700. .form-meghna .form-control:focus
  701. {
  702. border-color: none;
  703. box-shadow: none;
  704. }
  705. .form-meghna input:hover,
  706. .form-meghna textarea:hover,
  707. #contact-submit:hover {
  708. border-color: #57cbcc;
  709. }
  710. .form-meghna ::placeholder
  711. {
  712. color: #ddd !important;
  713. }
  714. #contact-submit {
  715. border: 1px solid rgba(236, 239, 241, 0.07);
  716. background: #57cbcc;
  717. padding: 12px 0;
  718. width: 100%;
  719. margin: 0;
  720. }
  721. .google-map #map-canvas {
  722. height: 400px;
  723. }
  724. .contact-info p {
  725. margin-bottom: 25px;
  726. }
  727. .con-info {
  728. margin-bottom: 20px;
  729. }
  730. .con-info i,
  731. .con-info span {
  732. padding-right: 5px;
  733. }
  734. .error {
  735. display: none;
  736. padding: 10px;
  737. color: #D8000C;
  738. border-radius: 4px;
  739. font-size: 13px;
  740. background-color: #FFBABA;
  741. }
  742. .success {
  743. background-color: #6cb670;
  744. border-radius: 4px;
  745. color: #fff;
  746. display: none;
  747. font-size: 13px;
  748. padding: 10px;
  749. }
  750. #map {
  751. height: 370px;
  752. width: 100%;
  753. }
  754. /*=================================================================
  755. Item counter section
  756. ==================================================================*/
  757. .counters-item {
  758. padding: 25px 0;
  759. margin-bottom: 10px;
  760. background: #292F36;
  761. }
  762. .counters-item i {
  763. margin-bottom: 10px;
  764. font-size: 40px;
  765. display: inline-block;
  766. }
  767. .counters-item span {
  768. display: block;
  769. font-weight: bold;
  770. font-size: 35px;
  771. line-height: 50px;
  772. }
  773. .counters-item h3 {
  774. font-size: 20px;
  775. margin: 0;
  776. }
  777. /*=================================================================
  778. Pricing section
  779. ==================================================================*/
  780. .price-item {
  781. border: 1px solid rgba(236, 239, 241, 0.07);
  782. padding-bottom: 30px;
  783. margin-bottom: 15px;
  784. }
  785. .price-title {
  786. background-color: #292F36;
  787. padding: 30px 0 20px;
  788. }
  789. .price-title h3 {
  790. color: #57cbcc;
  791. margin: 0 0 10px;
  792. text-transform: uppercase;
  793. }
  794. .price-title p {
  795. font-size: 18px;
  796. font-weight: 400;
  797. }
  798. .price-title .value {
  799. color: #57cbcc;
  800. font-size: 30px;
  801. }
  802. .pricing ul, .skill-bar {
  803. list-style-type: none;
  804. margin: 0;
  805. padding: 0;
  806. }
  807. .pricing li {
  808. padding: 10px 0;
  809. }
  810. .pricing li:last-child {
  811. border-bottom: 1px solid rgba(236, 239, 241, 0.07);
  812. margin-bottom: 20px;
  813. }
  814. .pricing li:nth-child(2n) {
  815. background-color: #292F36;
  816. }
  817. .pricing li .btn {
  818. text-transform: uppercase;
  819. margin: 20px 0;
  820. }
  821. /*=================================================================
  822. Portfolio section
  823. ==================================================================*/
  824. .portfolio-filter {
  825. margin-bottom: 40px;
  826. text-align: center;
  827. }
  828. .portfolio-filter button {
  829. border: none;
  830. outline: none;
  831. border: 1px solid rgba(236, 239, 241, 0.07);
  832. background: transparent;
  833. display: inline-block;
  834. font-size: 16px;
  835. padding: 6px 20px;
  836. font-weight: 700;
  837. color: #737f8a;
  838. transition: .3s all;
  839. }
  840. .portfolio-filter button.mixitup-control-active {
  841. border: 1px solid #57cbcc;
  842. color: #57cbcc;
  843. }
  844. .portfolio-items-wrapper .mix {
  845. padding: 5px;
  846. }
  847. .portfolio-block {
  848. position: relative;
  849. }
  850. .portfolio-block:before {
  851. transition: all 0.3s ease-in-out;
  852. background: white;
  853. opacity: 0;
  854. top: 20px;
  855. right: 20px;
  856. bottom: 20px;
  857. left: 20px;
  858. position: absolute;
  859. content: '';
  860. }
  861. .portfolio-block img {
  862. width: 100%;
  863. height: auto;
  864. }
  865. .portfolio-block:hover:before {
  866. opacity: 1;
  867. }
  868. .portfolio-block:hover .caption h4 {
  869. top: 45%;
  870. }
  871. .portfolio-block:hover .caption {
  872. opacity: 1;
  873. top: 55%;
  874. }
  875. .portfolio-block .caption {
  876. position: absolute;
  877. top: 50%;
  878. left: 50%;
  879. opacity: 0;
  880. -webkit-transform: translate(-50%, -50%);
  881. transform: translate(-50%, -50%);
  882. z-index: 9;
  883. transition: all 0.2s ease-in-out;
  884. text-align: center;
  885. }
  886. .portfolio-block .caption h4 {
  887. font-size: 16px;
  888. font-weight: 600;
  889. }
  890. .portfolio-block .caption h4 a {
  891. color: #555;
  892. }
  893. .portfolio-block .caption .search-icon {
  894. background: #57cbcc;
  895. width: 50px;
  896. height: 50px;
  897. color: #fff;
  898. display: inline-block;
  899. font-size: 20px;
  900. border-radius: 30px;
  901. }
  902. .portfolio-block .caption .search-icon i {
  903. line-height: 50px;
  904. }
  905. /*=================================================================
  906. Services section
  907. ==================================================================*/
  908. .service-block {
  909. padding: 60px 20px;
  910. border-left: 1px solid rgba(236, 239, 241, 0.07);
  911. border-top: 1px solid rgba(236, 239, 241, 0.07);
  912. margin-bottom: 40px;
  913. box-shadow: 2px 2px 5px rgba(44, 44, 44, 0.3), 13px 13px 0 rgba(255, 255, 255, 0.7);
  914. }
  915. .service-block .service-icon {
  916. margin-bottom: 10px;
  917. font-size: 50px;
  918. }
  919. /*=================================================================
  920. Services section 2
  921. ==================================================================*/
  922. .service-2 .service-item {
  923. border: 1px solid #eee;
  924. margin-bottom: 30px;
  925. padding: 50px 20px;
  926. transition: all 0.3s ease 0s;
  927. }
  928. .service-2 .service-item:hover {
  929. box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  930. -webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  931. }
  932. .service-2 .service-item:hover i {
  933. background: #fff;
  934. color: #57cbcc;
  935. }
  936. .service-2 .service-item i {
  937. font-size: 30px;
  938. display: inline-block;
  939. background: #57cbcc none repeat scroll 0 0;
  940. border-radius: 30px;
  941. box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  942. color: #fff;
  943. height: 55px;
  944. line-height: 55px;
  945. margin-bottom: 20px;
  946. width: 55px;
  947. transition: all 0.3s ease 0s;
  948. }
  949. /*=================================================================
  950. Our skills
  951. ==================================================================*/
  952. .skill-bar p {
  953. font-size: 18px;
  954. margin-bottom: 0;
  955. }
  956. .skill-bar p span {
  957. font-style: italic;
  958. font-size: 30px;
  959. color: rgba(187, 187, 187, 0.34);
  960. display: inline-block;
  961. vertical-align: middle;
  962. }
  963. .skill-bar .progress {
  964. height: 6px;
  965. border-radius: 0;
  966. }
  967. .skill-bar .progress .progress-bar {
  968. background: #57cbcc;
  969. }
  970. /*=================================================================
  971. Our Team
  972. ==================================================================*/
  973. .team-member {
  974. background-color: #292F36;
  975. margin-bottom: 10px;
  976. }
  977. .team-member:hover .mask {
  978. cursor: pointer;
  979. opacity: 1;
  980. filter: alpha(opacity=100);
  981. -webkit-transform: rotateY(0deg) scale(1, 1);
  982. transform: rotateY(0deg) scale(1, 1);
  983. }
  984. .member-photo {
  985. overflow: hidden;
  986. position: relative;
  987. }
  988. @media (max-width: 768px) {
  989. .member-photo {
  990. text-align: center;
  991. }
  992. }
  993. /* .member-photo:hover img { */
  994. /* -webkit-transform: scale(1.2); */
  995. /* transform: scale(1.2); */
  996. /* } */
  997. .member-photo img {
  998. transition: all 0.4s ease 0s;
  999. }
  1000. @media (max-width: 768px) {
  1001. .member-photo img {
  1002. display: inline-block;
  1003. }
  1004. }
  1005. .member-photo .mask {
  1006. background-color: rgba(87, 203, 204, 0.7);
  1007. position: absolute;
  1008. text-align: center;
  1009. height: 100%;
  1010. width: 100%;
  1011. left: 0;
  1012. top: 0;
  1013. opacity: 0;
  1014. filter: alpha(opacity=0);
  1015. transition: all .5s ease-out 0s;
  1016. -webkit-transform: rotateY(180deg) scale(0.5, 0.5);
  1017. transform: rotateY(180deg) scale(0.5, 0.5);
  1018. }
  1019. .member-photo .mask ul {
  1020. text-align: center;
  1021. position: relative;
  1022. top: 125px;
  1023. }
  1024. .member-photo .mask ul li a {
  1025. border: 1px solid #fff;
  1026. color: #fff;
  1027. display: block;
  1028. font-size: 20px;
  1029. height: 35px;
  1030. line-height: 35px;
  1031. text-align: center;
  1032. width: 35px;
  1033. }
  1034. .member-photo .mask ul li a:hover {
  1035. background-color: #fff;
  1036. color: #57cbcc;
  1037. border: 1px solid transparent;
  1038. }
  1039. .member-meta {
  1040. padding: 15px;
  1041. }
  1042. .member-meta h4 {
  1043. margin: 0 0 5px;
  1044. }
  1045. .member-meta span {
  1046. font-size: 12px;
  1047. }
  1048. /*=================================================================
  1049. Testimonial section
  1050. ==================================================================*/
  1051. .testimonial:before {
  1052. background: rgba(42, 48, 55, 0.7);
  1053. }
  1054. .client-info {
  1055. margin: 0 auto;
  1056. width: 45%;
  1057. }
  1058. @media (max-width: 768px) {
  1059. .client-info {
  1060. width: 90%;
  1061. }
  1062. }
  1063. .client-comment p {
  1064. color: #afbac4;
  1065. font-size: 18px;
  1066. }
  1067. .client-thumb img {
  1068. border-radius: 50%;
  1069. margin: 0 auto;
  1070. max-width: 115px;
  1071. width: 100%;
  1072. }
  1073. .client-meta {
  1074. margin: 0 0 10px;
  1075. }
  1076. .client-meta h3 {
  1077. margin: 15px 0 5px .0;
  1078. }
  1079. .client-meta span {
  1080. font-size: 12px;
  1081. }
  1082. .owl-pagination,
  1083. .owl-buttons {
  1084. text-align: center;
  1085. }
  1086. .owl-controls .owl-page {
  1087. display: inline-block;
  1088. }
  1089. .owl-controls .owl-page span {
  1090. background-color: transparent;
  1091. border: 2px solid #fff;
  1092. border-radius: 50px;
  1093. display: block;
  1094. height: 13px;
  1095. margin: 0 4px;
  1096. width: 13px;
  1097. opacity: 1;
  1098. filter: alpha(opacity=100);
  1099. }
  1100. .owl-controls .owl-page.active span,
  1101. .owl-controls .owl-page:hover span {
  1102. background-color: #57cbcc;
  1103. border: 2px solid transparent;
  1104. }
  1105. .our-clients {
  1106. margin: 30px 0 0;
  1107. }
  1108. #our-clietns .item img {
  1109. max-width: 150px;
  1110. width: 100%;
  1111. }
  1112. #our-clietns .owl-next,
  1113. #our-clietns .owl-prev {
  1114. border: 1px solid #ddd;
  1115. border-radius: 50px;
  1116. display: inline-block;
  1117. margin: 45px 0 0;
  1118. padding: 3px 15px;
  1119. position: relative;
  1120. text-align: center;
  1121. }
  1122. #our-clietns .owl-next i,
  1123. #our-clietns .owl-prev i {
  1124. line-height: 34px;
  1125. }
  1126. #our-clietns .owl-prev {
  1127. margin-right: 15px;
  1128. }
  1129. #our-clients .item {
  1130. margin: 10px;
  1131. }
  1132. /*=================================================================
  1133. Latest Posts
  1134. ==================================================================*/
  1135. .note {
  1136. background-color: #292F36;
  1137. border: 1px solid #4e595f;
  1138. }
  1139. .post-block {
  1140. background-color: #292F36;
  1141. margin-bottom: 10px;
  1142. }
  1143. .post-block .content {
  1144. padding: 20px;
  1145. }
  1146. .post-block .content h3 {
  1147. margin: 0 0 6px;
  1148. font-size: 20px;
  1149. line-height: 1.5;
  1150. text-transform: capitalize;
  1151. }
  1152. .note .media-wrapper {
  1153. border-bottom: 1px solid #4e595f;
  1154. }
  1155. .note .excerpt h3 {
  1156. font-size: 20px;
  1157. line-height: 1.5;
  1158. text-transform: capitalize;
  1159. }
  1160. .all-post {
  1161. margin-top: 50px;
  1162. }
  1163. /*=================================================================
  1164. Single Blog Page
  1165. ==================================================================*/
  1166. #blog-banner {
  1167. padding-bottom: 100px;
  1168. padding-top: 150px;
  1169. }
  1170. #blog-page {
  1171. margin: 0 0 40px;
  1172. }
  1173. .post-meta {
  1174. font-size: 13px;
  1175. margin: 20px 0 0;
  1176. padding: 0 20px 10px;
  1177. }
  1178. .post-meta a {
  1179. color: #57cbcc;
  1180. }
  1181. .post-meta>span {
  1182. color: #666;
  1183. border-right: 1px solid #dedede;
  1184. display: inline-block;
  1185. font-size: 13px;
  1186. margin: 10px 10px 0 0;
  1187. padding-right: 10px;
  1188. }
  1189. .post-meta>span:last-child {
  1190. border-right: 0;
  1191. }
  1192. .post-meta>span i {
  1193. margin-right: 5px;
  1194. }
  1195. .post-excerpt {
  1196. padding: 0 20px;
  1197. margin-bottom: 60px;
  1198. }
  1199. .post-excerpt h3 a {
  1200. color: #000;
  1201. }
  1202. .post-excerpt blockquote {
  1203. line-height: 22px;
  1204. margin: 20px 0;
  1205. font-size: 16px;
  1206. }
  1207. .single-blog {
  1208. background-color: #fff;
  1209. margin-bottom: 50px;
  1210. padding: 20px;
  1211. }
  1212. .blog-subtitle {
  1213. font-size: 15px;
  1214. padding-bottom: 10px;
  1215. border-bottom: 1px solid #dedede;
  1216. margin-bottom: 25px;
  1217. text-transform: uppercase;
  1218. }
  1219. .next-prev {
  1220. border-bottom: 1px solid #dedede;
  1221. border-top: 1px solid #dedede;
  1222. margin: 20px 0;
  1223. padding: 25px 0;
  1224. }
  1225. .next-prev a {
  1226. color: #000;
  1227. }
  1228. .next-prev a:hover {
  1229. color: #57cbcc;
  1230. }
  1231. .next-prev .prev-post i {
  1232. margin-right: 10px;
  1233. }
  1234. .next-prev .next-post i {
  1235. margin-left: 10px;
  1236. }
  1237. .social-profile ul li {
  1238. margin: 0 10px 0 0;
  1239. display: inline-block;
  1240. }
  1241. .social-profile ul li a {
  1242. color: #4e595f;
  1243. display: block;
  1244. font-size: 16px;
  1245. }
  1246. .social-profile ul li a i:hover {
  1247. color: #57cbcc;
  1248. }
  1249. .comments-section {
  1250. margin-top: 35px;
  1251. }
  1252. .author-about {
  1253. margin-top: 40px;
  1254. }
  1255. .post-author {
  1256. margin-right: 20px;
  1257. }
  1258. .post-author>img {
  1259. border: 1px solid #dedede;
  1260. max-width: 120px;
  1261. padding: 5px;
  1262. width: 100%;
  1263. }
  1264. .comment-list ul {
  1265. margin-top: 20px;
  1266. }
  1267. .comment-list ul li {
  1268. margin-bottom: 20px;
  1269. }
  1270. .comment-wrap {
  1271. border: 1px solid #dedede;
  1272. border-radius: 1px;
  1273. margin-left: 20px;
  1274. padding: 10px;
  1275. position: relative;
  1276. }
  1277. .comment-wrap .author-avatar {
  1278. margin-right: 10px;
  1279. }
  1280. .comment-wrap .media .media-heading {
  1281. font-size: 14px;
  1282. margin-bottom: 8px;
  1283. }
  1284. .comment-wrap .media .media-heading a {
  1285. color: #57cbcc;
  1286. font-size: 13px;
  1287. }
  1288. .comment-wrap .media .comment-meta {
  1289. font-size: 12px;
  1290. color: #888;
  1291. }
  1292. .comment-wrap .media p {
  1293. margin-top: 15px;
  1294. }
  1295. .comment-reply-form {
  1296. margin-top: 80px;
  1297. }
  1298. .comment-reply-form input,
  1299. .comment-reply-form textarea {
  1300. height: 35px;
  1301. border-radius: 0;
  1302. box-shadow: none;
  1303. }
  1304. .comment-reply-form input:focus,
  1305. .comment-reply-form textarea:focus {
  1306. box-shadow: none;
  1307. border: 1px solid #57cbcc;
  1308. }
  1309. .comment-reply-form textarea,
  1310. .comment-reply-form .btn-main {
  1311. height: auto;
  1312. }
  1313. /* Staticman Comments */
  1314. #staticman-form:before {
  1315. display: block;
  1316. height: 90px;
  1317. margin-top: -90px;
  1318. visibility: hidden;
  1319. content: "";
  1320. }
  1321. @media (max-width: 768px) {
  1322. #staticman-form:before {
  1323. display: block;
  1324. height: 80px;
  1325. margin-top: -80px;
  1326. visibility: hidden;
  1327. content: "";
  1328. }
  1329. }
  1330. .post-comment {
  1331. background-color: #292f36;;
  1332. padding: 20px;
  1333. margin-top: 20px;
  1334. margin-bottom: 20px;
  1335. }
  1336. .post-comment-header {
  1337. margin-bottom: 20px;
  1338. }
  1339. .post-comment-avatar {
  1340. display: inline-block;
  1341. vertical-align: middle;
  1342. border-radius: 50%;
  1343. }
  1344. .post-comment-info {
  1345. display: inline-block;
  1346. margin-left: 20px;
  1347. margin-bottom: 0;
  1348. vertical-align: middle;
  1349. }
  1350. .post-comment-field {
  1351. display: block;
  1352. font: inherit;
  1353. padding: 10px;
  1354. margin-top: 20px;
  1355. outline-color: #F76C5E;
  1356. width: 100%;
  1357. }
  1358. .post-comment-name {
  1359. color: #afbac4;
  1360. font-weight: 500;
  1361. font-size: 18px;
  1362. }
  1363. .post-time {
  1364. color: #737f8a;
  1365. }
  1366. input#e-mail, #hidden_iframe {
  1367. display: none;
  1368. }
  1369. /*=================================================================
  1370. Footer section
  1371. ==================================================================*/
  1372. .social-icon {
  1373. padding: 60px 0 35px;
  1374. }
  1375. .social-icon ul {
  1376. text-align: center;
  1377. }
  1378. .social-icon ul li {
  1379. margin-bottom: 4px;
  1380. }
  1381. .social-icon ul li a {
  1382. background-color: #26292e;
  1383. border: 1px solid transparent;
  1384. display: block;
  1385. height: 70px;
  1386. width: 70px;
  1387. transition: all 400ms ease-out 0s;
  1388. }
  1389. .social-icon ul li a:hover{
  1390. background: #57cbcc;
  1391. }
  1392. .social-icon ul li a:hover i{
  1393. color: #fff;
  1394. opacity: 1;
  1395. }
  1396. .social-icon ul li a i {
  1397. color: #55606a;
  1398. display: inline-block;
  1399. font-size: 32px;
  1400. line-height: 70px;
  1401. margin: 0;
  1402. opacity: 0.3;
  1403. transition: all 400ms ease-out 0s;
  1404. }
  1405. .copyright {
  1406. padding: 20px 0;
  1407. color: #fff;
  1408. }
  1409. .copyright img {
  1410. margin-bottom: 15px;
  1411. }
  1412. .copyright p {
  1413. margin-top: 10px;
  1414. }
  1415. #scrollUp {
  1416. border: 1px solid #4e595f;
  1417. bottom: 15px;
  1418. color: #fff;
  1419. display: none;
  1420. padding: 8px 12px;
  1421. position: fixed;
  1422. right: 20px;
  1423. z-index: 600;
  1424. }
  1425. #scrollUp:hover {
  1426. background-color: #57cbcc;
  1427. border: 1px solid #57cbcc;
  1428. }
  1429. /*=================================================================
  1430. Twitter Feed
  1431. ==================================================================*/
  1432. .twitter-bird span {
  1433. border: 2px solid #6cb670;
  1434. border-radius: 50px;
  1435. color: #6cb670;
  1436. display: inline-block;
  1437. margin-bottom: 50px;
  1438. height: 90px;
  1439. width: 90px;
  1440. }
  1441. .twitter-bird span i {
  1442. line-height: 90px;
  1443. }
  1444. .tweet {
  1445. margin-bottom: 10px;
  1446. }
  1447. .tweet a {
  1448. color: #6cb670;
  1449. }
  1450. /*=================================================================
  1451. Blog Page
  1452. ==================================================================*/
  1453. #blog-banner {
  1454. padding-bottom: 100px;
  1455. padding-top: 150px;
  1456. }
  1457. .blog-icon {
  1458. border: 1px solid #6CB670;
  1459. border-radius: 50%;
  1460. color: #6CB670;
  1461. display: inline-block;
  1462. padding: 16px 20px;
  1463. }
  1464. .blog-title h1 {
  1465. text-transform: uppercase;
  1466. }
  1467. #blog-page {
  1468. margin: 0 0 40px;
  1469. }
  1470. .post-item .entry {
  1471. border: 1px solid #4e595f;
  1472. margin-bottom: 30px;
  1473. }
  1474. .entry .post-excerpt {
  1475. padding: 0 20px;
  1476. }
  1477. #gallery-post .owl-prev,
  1478. #post-thumb .owl-prev,
  1479. #gallery-post .owl-next,
  1480. #post-thumb .owl-next {
  1481. padding: 5px 17px;
  1482. position: absolute;
  1483. top: 45%;
  1484. transition: all .5s ease-in 0s;
  1485. }
  1486. #gallery-post .owl-prev,
  1487. #post-thumb .owl-prev {
  1488. left: -45px;
  1489. }
  1490. #gallery-post .owl-next,
  1491. #post-thumb .owl-next {
  1492. right: -45px;
  1493. }
  1494. #gallery-post:hover .owl-prev,
  1495. #post-thumb:hover .owl-prev {
  1496. left: 0;
  1497. }
  1498. #gallery-post:hover .owl-next,
  1499. #post-thumb:hover .owl-next {
  1500. right: 0;
  1501. }
  1502. #gallery-post,
  1503. #post-thumb {
  1504. overflow-x: hidden;
  1505. }
  1506. #post-thumb .owl-buttons {
  1507. color: #fff;
  1508. }
  1509. .post-meta {
  1510. background-color: #3d444a;
  1511. border-top: 1px solid #4e595f;
  1512. font-size: 13px;
  1513. margin: 20px 0 0;
  1514. padding: 0 20px 10px;
  1515. }
  1516. .post-meta>span {
  1517. border-right: 1px solid #4e595f;
  1518. display: inline-block;
  1519. font-size: 12px;
  1520. margin: 10px 10px 0 0;
  1521. padding-right: 10px;
  1522. }
  1523. .post-meta>span:last-child {
  1524. border-right: 0;
  1525. }
  1526. .post-meta>span>i {
  1527. margin-right: 5px;
  1528. }
  1529. .post-meta a:hover {
  1530. color: #6CB670;
  1531. }
  1532. .post-excerpt .more {
  1533. margin-top: 20px;
  1534. }
  1535. .post-excerpt .more a {
  1536. display: inline-block;
  1537. font-size: 13px;
  1538. padding: 10px 25px;
  1539. }
  1540. .post-excerpt .more a:hover {
  1541. background-color: #6CB670;
  1542. color: #fff;
  1543. }
  1544. aside.widget {
  1545. margin-bottom: 25px;
  1546. }
  1547. .widget-title>h3 {
  1548. color: #fff;
  1549. margin-bottom: 15px;
  1550. margin-top: 0;
  1551. position: relative;
  1552. }
  1553. #search-form {
  1554. position: relative;
  1555. }
  1556. #search-submit {
  1557. background: none;
  1558. border: 0;
  1559. color: #C8C8CA;
  1560. display: block;
  1561. font-size: 16px;
  1562. height: 32px;
  1563. outline: 0;
  1564. position: absolute;
  1565. right: 0;
  1566. text-align: center;
  1567. top: 0;
  1568. width: 32px;
  1569. }
  1570. .widget-content .tab-content {
  1571. background-color: #2f383d;
  1572. padding: 20px;
  1573. }
  1574. .tab-post-nav {
  1575. background-color: #4A535A;
  1576. }
  1577. .tab-post-nav li {
  1578. float: left;
  1579. }
  1580. .tab-post-nav li.active a {
  1581. border-top: 3px solid #6cb670;
  1582. background-color: #2F383D;
  1583. color: #6CB670;
  1584. }
  1585. .tab-pane.active .clearfix:first-child {
  1586. margin-bottom: 25px;
  1587. }
  1588. .tab-excerpt>span {
  1589. display: block;
  1590. font-size: 12px;
  1591. margin-bottom: 10px;
  1592. }
  1593. .tab-excerpt h4 a {
  1594. color: #fff;
  1595. }
  1596. .tab-excerpt h4 a:hover {
  1597. color: #6cb670;
  1598. }
  1599. .tab-post-nav li a {
  1600. border-top: 3px solid transparent;
  1601. color: #fff;
  1602. display: block;
  1603. padding: 13px 18px;
  1604. text-align: center;
  1605. }
  1606. .categories li {
  1607. margin-bottom: 10px;
  1608. transition: all .5s ease-in 0s;
  1609. }
  1610. .categories>li:hover a {
  1611. padding-left: 10px;
  1612. color: #6CB670;
  1613. }
  1614. .categories>li:last-child {
  1615. border-bottom: 0;
  1616. }
  1617. .categories li a {
  1618. padding-left: 5px;
  1619. }
  1620. .widget-content .tag {
  1621. background-color: #2F383D;
  1622. color: #fff;
  1623. display: inline-block;
  1624. margin-bottom: 10px;
  1625. margin-right: 5px;
  1626. padding: 5px 13px;
  1627. }
  1628. .widget-content .tag:hover {
  1629. background-color: #6CB670;
  1630. color: #fff;
  1631. }
  1632. .post-pagination {
  1633. display: inline-block;
  1634. margin-bottom: 20px;
  1635. }
  1636. .post-pagination ul li {
  1637. margin-right: 5px;
  1638. float: left;
  1639. }
  1640. .post-pagination ul li:last-child {
  1641. margin-right: 0;
  1642. }
  1643. .post-pagination ul li.disabled a {
  1644. cursor: not-allowed;
  1645. }
  1646. .post-pagination ul li.disabled a:hover {
  1647. background-color: #2E373C;
  1648. color: #9aa8b3;
  1649. }
  1650. .post-pagination ul li a {
  1651. background-color: #30393e;
  1652. color: #9aa8b3;
  1653. display: block;
  1654. padding: 8px 18px;
  1655. }
  1656. .post-pagination ul li a:hover,
  1657. .post-pagination ul li.active a {
  1658. background-color: #6CB670;
  1659. color: #fff;
  1660. }
  1661. /*=================================================================
  1662. Single Blog Page
  1663. ==================================================================*/
  1664. .single-blog {
  1665. background-color: #fff;
  1666. margin-bottom: 50px;
  1667. padding: 20px;
  1668. }
  1669. blockquote {
  1670. border-left: 5px solid #6cb670;
  1671. font-style: italic;
  1672. line-height: 22px;
  1673. margin: 20px 0;
  1674. }
  1675. .next-prev {
  1676. border-bottom: 1px solid #4e595f;
  1677. border-top: 1px solid #4e595f;
  1678. margin: 20px 0;
  1679. padding: 15px 0 10px;
  1680. }
  1681. .next-prev a:hover {
  1682. color: #6CB670;
  1683. }
  1684. .prev-post i {
  1685. float: left;
  1686. margin-right: 10px;
  1687. margin-top: -4px;
  1688. }
  1689. .next-post i {
  1690. float: right;
  1691. margin-left: 10px;
  1692. margin-top: -3px;
  1693. }
  1694. .post-author {
  1695. margin-right: 20px;
  1696. }
  1697. .post-author>img {
  1698. border: 1px solid #4e595f;
  1699. max-width: 120px;
  1700. padding: 5px;
  1701. width: 100%;
  1702. }
  1703. .comment-reply-form>h3,
  1704. .author-about>h4,
  1705. .comments>h4 {
  1706. border-bottom: 1px solid #4e595f;
  1707. margin-bottom: 15px;
  1708. margin-top: 0;
  1709. padding-bottom: 10px;
  1710. position: relative;
  1711. }
  1712. .author-bio h5 {
  1713. display: inline-block;
  1714. }
  1715. .post-item .comments-section {
  1716. margin-top: 35px;
  1717. }
  1718. .comment-list ul {
  1719. margin-top: 20px;
  1720. }
  1721. .comment-list li {
  1722. margin-bottom: 20px;
  1723. }
  1724. .comment-wrap {
  1725. border: 1px solid #4e595f;
  1726. border-radius: 1px;
  1727. margin-left: 20px;
  1728. padding: 10px;
  1729. position: relative;
  1730. }
  1731. .comment-wrap .author-avatar {
  1732. margin-left: -25px;
  1733. margin-right: 20px;
  1734. }
  1735. .author-comment {
  1736. margin-bottom: 15px;
  1737. overflow: hidden;
  1738. }
  1739. .author-comment cite a:hover,
  1740. .replay:hover {
  1741. color: #6CB670;
  1742. text-decoration: underline;
  1743. }
  1744. .author-comment cite {
  1745. margin-bottom: 2px;
  1746. padding-top: 4px;
  1747. }
  1748. .comment-content {
  1749. margin-left: 45px;
  1750. }
  1751. .comment-list ul li {
  1752. padding-left: 25px;
  1753. }
  1754. .comment-reply-form {
  1755. margin-top: 80px;
  1756. }
  1757. #comment-form {
  1758. margin-top: 35px;
  1759. }
  1760. #comment-form .form-control:hover {
  1761. border-color: #6CB670;
  1762. }
  1763. .form-group:last-child,
  1764. .form-group:last-child input {
  1765. margin: 0;
  1766. }
  1767. .form-control-meghna .form-control {
  1768. background-color: transparent;
  1769. padding: 5px 10px;
  1770. color: #ddd;
  1771. border: 1px solid rgba(236, 239, 241, 0.07);
  1772. }
  1773. .form-control-meghna .form-control:focus
  1774. {
  1775. border-color: #57cbcc;
  1776. box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.432);
  1777. }
  1778. figure img {
  1779. display: block;
  1780. margin: 0 auto 5px;
  1781. }
  1782. figcaption {
  1783. text-align: center;
  1784. }
  1785. /*! Social sharing buttons from Sharingbuttons.io */
  1786. .resp-sharing-button__link,
  1787. .resp-sharing-button__icon {
  1788. display: inline-block
  1789. }
  1790. .resp-sharing-button__link {
  1791. text-decoration: none;
  1792. color: #fff;
  1793. margin: 0.5em
  1794. }
  1795. .resp-sharing-button {
  1796. border-radius: 5px;
  1797. transition: 25ms ease-out;
  1798. padding: 0.5em 0.75em;
  1799. font-family: Helvetica Neue,Helvetica,Arial, sans-serif;
  1800. }
  1801. .resp-sharing-button__icon svg {
  1802. width: 1em;
  1803. height: 1em;
  1804. margin-right: 0.4em;
  1805. vertical-align: top
  1806. }
  1807. .resp-sharing-button--small svg {
  1808. margin: 0;
  1809. vertical-align: middle
  1810. }
  1811. /* Non solid icons get a stroke */
  1812. .resp-sharing-button__icon {
  1813. stroke: #fff;
  1814. fill: none
  1815. }
  1816. /* Solid icons get a fill */
  1817. .resp-sharing-button__icon--solid,
  1818. .resp-sharing-button__icon--solidcircle {
  1819. fill: #fff;
  1820. stroke: none
  1821. }
  1822. .resp-sharing-button--twitter {
  1823. background-color: #55acee
  1824. }
  1825. .resp-sharing-button--twitter:hover {
  1826. background-color: #2795e9
  1827. }
  1828. .resp-sharing-button--pinterest {
  1829. background-color: #bd081c
  1830. }
  1831. .resp-sharing-button--pinterest:hover {
  1832. background-color: #8c0615
  1833. }
  1834. .resp-sharing-button--facebook {
  1835. background-color: #3b5998
  1836. }
  1837. .resp-sharing-button--facebook:hover {
  1838. background-color: #2d4373
  1839. }
  1840. .resp-sharing-button--tumblr {
  1841. background-color: #35465C
  1842. }
  1843. .resp-sharing-button--tumblr:hover {
  1844. background-color: #222d3c
  1845. }
  1846. .resp-sharing-button--reddit {
  1847. background-color: #5f99cf
  1848. }
  1849. .resp-sharing-button--reddit:hover {
  1850. background-color: #3a80c1
  1851. }
  1852. .resp-sharing-button--google {
  1853. background-color: #dd4b39
  1854. }
  1855. .resp-sharing-button--google:hover {
  1856. background-color: #c23321
  1857. }
  1858. .resp-sharing-button--linkedin {
  1859. background-color: #0077b5
  1860. }
  1861. .resp-sharing-button--linkedin:hover {
  1862. background-color: #046293
  1863. }
  1864. .resp-sharing-button--email {
  1865. background-color: #777
  1866. }
  1867. .resp-sharing-button--email:hover {
  1868. background-color: #5e5e5e
  1869. }
  1870. .resp-sharing-button--xing {
  1871. background-color: #1a7576
  1872. }
  1873. .resp-sharing-button--xing:hover {
  1874. background-color: #114c4c
  1875. }
  1876. .resp-sharing-button--whatsapp {
  1877. background-color: #25D366
  1878. }
  1879. .resp-sharing-button--whatsapp:hover {
  1880. background-color: #1da851
  1881. }
  1882. .resp-sharing-button--hackernews {
  1883. background-color: #FF6600
  1884. }
  1885. .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 }
  1886. .resp-sharing-button--vk {
  1887. background-color: #507299
  1888. }
  1889. .resp-sharing-button--vk:hover {
  1890. background-color: #43648c
  1891. }
  1892. .resp-sharing-button--facebook {
  1893. background-color: #3b5998;
  1894. border-color: #3b5998;
  1895. }
  1896. .resp-sharing-button--facebook:hover,
  1897. .resp-sharing-button--facebook:active {
  1898. background-color: #2d4373;
  1899. border-color: #2d4373;
  1900. }
  1901. .resp-sharing-button--twitter {
  1902. background-color: #55acee;
  1903. border-color: #55acee;
  1904. }
  1905. .resp-sharing-button--twitter:hover,
  1906. .resp-sharing-button--twitter:active {
  1907. background-color: #2795e9;
  1908. border-color: #2795e9;
  1909. }
  1910. .resp-sharing-button--google {
  1911. background-color: #dd4b39;
  1912. border-color: #dd4b39;
  1913. }
  1914. .resp-sharing-button--google:hover,
  1915. .resp-sharing-button--google:active {
  1916. background-color: #c23321;
  1917. border-color: #c23321;
  1918. }
  1919. .resp-sharing-button--email {
  1920. background-color: #777777;
  1921. border-color: #777777;
  1922. }
  1923. .resp-sharing-button--email:hover,
  1924. .resp-sharing-button--email:active {
  1925. background-color: #5e5e5e;
  1926. border-color: #5e5e5e;
  1927. }
  1928. .resp-sharing-button--reddit {
  1929. background-color: #5f99cf;
  1930. border-color: #5f99cf;
  1931. }
  1932. .resp-sharing-button--reddit:hover,
  1933. .resp-sharing-button--reddit:active {
  1934. background-color: #3a80c1;
  1935. border-color: #3a80c1;
  1936. }
  1937. .resp-sharing-button--whatsapp {
  1938. background-color: #25D366;
  1939. border-color: #25D366;
  1940. }
  1941. .resp-sharing-button--whatsapp:hover,
  1942. .resp-sharing-button--whatsapp:active {
  1943. background-color: #1DA851;
  1944. border-color: #1DA851;
  1945. }
  1946. .resp-sharing-button--telegram {
  1947. background-color: #54A9EB;
  1948. }
  1949. .resp-sharing-button--telegram:hover {
  1950. background-color: #4B97D1;}
  1951. /*# sourceMappingURL=maps/style.css.map */