1
0

style.css 25 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390
  1. @charset "UTF-8";
  2. /*
  3. Theme Name: eStartup
  4. Theme URL: https://bootstrapmade.com/estartup-bootstrap-landing-page-template/
  5. Author: BootstrapMade.com
  6. License: https://bootstrapmade.com/license/
  7. */
  8. /*--------------------------------------------------------------
  9. # General
  10. --------------------------------------------------------------*/
  11. body {
  12. background-color: #fff;
  13. color: #333;
  14. }
  15. h1, h2, h3, h4, h5, h6 {
  16. margin: 0;
  17. }
  18. h2 {
  19. color: #000;
  20. font-weight: 600;
  21. }
  22. h4 {
  23. color: #000;
  24. font-size: 13px;
  25. font-weight: 700;
  26. letter-spacing: 2px;
  27. text-transform: uppercase;
  28. line-height: 2;
  29. }
  30. h5 {
  31. color: #626262;
  32. font-size: 14px;
  33. font-weight: 500;
  34. }
  35. a {
  36. letter-spacing: 2px;
  37. text-decoration: none;
  38. }
  39. ul {
  40. letter-spacing: 1px;
  41. }
  42. li {
  43. color: #626262;
  44. font-size: 13px;
  45. font-weight: 400;
  46. letter-spacing: 2px;
  47. line-height: 30px;
  48. text-transform: capitalize;
  49. }
  50. p {
  51. color: #505050;
  52. font-size: 14px;
  53. font-weight: 300;
  54. letter-spacing: 0.5px;
  55. line-height: 2;
  56. margin-bottom: 20px;
  57. }
  58. span {
  59. letter-spacing: 1px;
  60. }
  61. .img-fluid {
  62. height: 60px;
  63. margin-bottom: 30px;
  64. width: 60px;
  65. }
  66. .container-full {
  67. padding-left: 0;
  68. padding-right: 0;
  69. }
  70. .btn {
  71. border: 1px solid #fff;
  72. border-radius: 50px;
  73. color: #fff;
  74. font-size: 11px;
  75. font-weight: 600;
  76. padding: 15px 40px;
  77. text-transform: uppercase;
  78. -moz-transition: all 0.5s ease-in-out 0s;
  79. -ms-transition: all 0.5s ease-in-out 0s;
  80. -o-transition: all 0.5s ease-in-out 0s;
  81. -webkit-transition: all 0.5s ease-in-out 0s;
  82. transition: all 0.5s ease-in-out 0s;
  83. }
  84. .btn-default:hover {
  85. color: #fff;
  86. background-color: #e6e6e6;
  87. border-color: #adadad;
  88. }
  89. .fa {
  90. font-size: 13px;
  91. }
  92. /* Back to top button */
  93. .back-to-top {
  94. position: fixed;
  95. display: none;
  96. background: #2e5076;
  97. line-height: 1;
  98. color: #fff;
  99. padding: 7px 12px 13px 12px;
  100. font-size: 16px;
  101. border-radius: 2px;
  102. right: 15px;
  103. bottom: 15px;
  104. transition: background 0.5s;
  105. }
  106. @media (max-width: 768px) {
  107. .back-to-top {
  108. bottom: 15px;
  109. }
  110. }
  111. .back-to-top:focus {
  112. background: #2e5076;
  113. color: #fff;
  114. outline: none;
  115. }
  116. .back-to-top:hover {
  117. background: #2e5076;
  118. color: #fff;
  119. }
  120. /*--------------------------------------------------------------
  121. # Header
  122. --------------------------------------------------------------*/
  123. #header {
  124. background: #fff;
  125. position: fixed;
  126. left: 0;
  127. top: 0;
  128. right: 0;
  129. height: 48px;
  130. z-index: 3;
  131. transition: all 0.5s ease;
  132. }
  133. #header #logo {
  134. padding: 6px 0 0 0;
  135. }
  136. #header #logo h1 {
  137. color: #505050;
  138. font-family: "Roboto", sans-serif;
  139. font-size: 26px;
  140. font-weight: 200;
  141. letter-spacing: 1px;
  142. margin: 0;
  143. }
  144. #header #logo h1 a {
  145. color: #555;
  146. line-height: 1;
  147. display: inline-block;
  148. text-decoration: none;
  149. }
  150. #header #logo h1 a span {
  151. color: #2e5076;
  152. }
  153. #header #logo img {
  154. padding: 0;
  155. margin: 0;
  156. }
  157. .scroll-header {
  158. background: #fff;
  159. box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
  160. }
  161. /*--------------------------------------------------------------
  162. # Hero Section
  163. --------------------------------------------------------------*/
  164. #hero {
  165. width: 100%;
  166. height: calc(100vh - 40px);
  167. background: url(../img/hero-bg.png) center bottom no-repeat;
  168. background-size: 100%;
  169. position: relative;
  170. margin-top: 40px;
  171. }
  172. #hero img{
  173. max-height: 400px !important;
  174. }
  175. @media (min-width: 1025px) {
  176. #hero {
  177. background-attachment: fixed;
  178. }
  179. }
  180. #hero .hero-container {
  181. position: absolute;
  182. bottom: 0;
  183. top: 0;
  184. left: 0;
  185. right: 0;
  186. display: flex;
  187. justify-content: center;
  188. align-items: center;
  189. flex-direction: column;
  190. text-align: center;
  191. }
  192. #hero h1 {
  193. margin: 0 0 10px 0;
  194. font-size: 48px;
  195. font-weight: 100;
  196. line-height: 56px;
  197. font-family: "Roboto", sans-serif;
  198. color: #555;
  199. }
  200. @media (max-width: 768px) {
  201. #hero h1 {
  202. font-size: 28px;
  203. line-height: 36px;
  204. }
  205. }
  206. #hero h2 {
  207. color: #777;
  208. margin-bottom: 30px;
  209. font-size: 20px;
  210. font-family: "Roboto", sans-serif;
  211. font-weight: 300;
  212. }
  213. @media (max-width: 768px) {
  214. #hero h2 {
  215. font-size: 18px;
  216. line-height: 24px;
  217. margin-bottom: 30px;
  218. }
  219. }
  220. #hero img {
  221. max-width: 95%;
  222. margin-bottom: 30px;
  223. }
  224. .btn-get-started {
  225. font-family: "Roboto", sans-serif;
  226. text-transform: uppercase;
  227. font-weight: 400;
  228. font-size: 13px;
  229. letter-spacing: 1px;
  230. display: inline-block;
  231. padding: 11px 36px;
  232. border-radius: 50px;
  233. transition: 0.5s;
  234. margin-bottom: 30px;
  235. border: 2px solid #2e5076;
  236. background: #fff;
  237. color: #2e5076;
  238. text-decoration: none;
  239. }
  240. .glass{
  241. backdrop-filter: blur(5px);
  242. background: rgba(255,255,255,0.2);
  243. }
  244. #hero .btn-get-started:hover {
  245. background: #2e5076;
  246. color: #fff;
  247. }
  248. #hero .btns a {
  249. color: #555;
  250. font-size: 11px;
  251. font-weight: 600;
  252. text-transform: uppercase;
  253. margin: 4px 20px;
  254. text-decoration: none;
  255. transition: 0.3s;
  256. }
  257. @media (max-width: 575px) {
  258. #hero .btns a {
  259. margin: 4px 8px;
  260. }
  261. }
  262. #hero .btns a:hover {
  263. color: #2e5076;
  264. }
  265. /*--------------------------------------------------------------
  266. # Navigation Menu
  267. --------------------------------------------------------------*/
  268. /* Nav Menu Essentials */
  269. .nav-menu, .nav-menu * {
  270. margin: 0;
  271. padding: 0;
  272. list-style: none;
  273. }
  274. .nav-menu ul {
  275. position: absolute;
  276. display: none;
  277. top: 100%;
  278. left: 0;
  279. z-index: 99;
  280. }
  281. .nav-menu li {
  282. position: relative;
  283. white-space: nowrap;
  284. }
  285. .nav-menu > li {
  286. float: left;
  287. }
  288. .nav-menu li:hover > ul,
  289. .nav-menu li.sfHover > ul {
  290. display: block;
  291. }
  292. .nav-menu ul ul {
  293. top: 0;
  294. left: 100%;
  295. }
  296. .nav-menu ul li {
  297. min-width: 180px;
  298. }
  299. /* Nav Menu Arrows */
  300. .sf-arrows .sf-with-ul {
  301. padding-right: 22px;
  302. }
  303. .sf-arrows .sf-with-ul:after {
  304. content: "\f107";
  305. position: absolute;
  306. right: 8px;
  307. margin-top: 1px;
  308. font-family: FontAwesome;
  309. font-style: normal;
  310. font-weight: normal;
  311. }
  312. .sf-arrows ul .sf-with-ul:after {
  313. content: "\f105";
  314. }
  315. /* Nav Meu Container */
  316. #nav-menu-container {
  317. float: right;
  318. margin: 0 0 0 0;
  319. }
  320. @media (max-width: 1024px) {
  321. #nav-menu-container {
  322. display: none;
  323. }
  324. }
  325. /* Nav Meu Styling */
  326. .nav-menu a {
  327. padding: 8px 8px;
  328. text-decoration: none;
  329. display: inline-block;
  330. color: #555;
  331. font-family: "Roboto", sans-serif;
  332. font-weight: 400;
  333. font-size: 14px;
  334. outline: none;
  335. letter-spacing: 0;
  336. transition: 0.3s;
  337. }
  338. .nav-menu li:hover > a, .nav-menu > .menu-active > a {
  339. color: #2e5076;
  340. }
  341. .nav-menu > li {
  342. margin-left: 10px;
  343. }
  344. .nav-menu ul {
  345. margin: 0;
  346. padding: 10px;
  347. box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  348. background: #fff;
  349. }
  350. .nav-menu ul li {
  351. transition: 0.3s;
  352. }
  353. .nav-menu ul li a {
  354. padding: 5px 10px;
  355. color: #333;
  356. transition: 0.3s;
  357. display: block;
  358. font-size: 14px;
  359. text-transform: none;
  360. }
  361. .nav-menu ul li:hover > a {
  362. color: #2e5076;
  363. }
  364. .nav-menu ul ul {
  365. margin: 0;
  366. }
  367. /* Mobile Nav Toggle */
  368. #mobile-nav-toggle {
  369. position: fixed;
  370. right: 0;
  371. top: 0;
  372. z-index: 999;
  373. margin: 4px 20px 0 0;
  374. border: 0;
  375. background: none;
  376. font-size: 24px;
  377. display: none;
  378. transition: all 0.4s;
  379. outline: none;
  380. cursor: pointer;
  381. }
  382. #mobile-nav-toggle i {
  383. color: #555;
  384. font-size: 24px;
  385. }
  386. @media (max-width: 1024px) {
  387. #mobile-nav-toggle {
  388. display: inline;
  389. }
  390. }
  391. /* Mobile Nav Styling */
  392. #mobile-nav {
  393. position: fixed;
  394. top: 0;
  395. padding-top: 18px;
  396. bottom: 0;
  397. z-index: 998;
  398. background: rgba(52, 59, 64, 0.9);
  399. left: -260px;
  400. width: 260px;
  401. overflow-y: auto;
  402. transition: 0.4s;
  403. }
  404. #mobile-nav ul {
  405. padding: 0;
  406. margin: 0;
  407. list-style: none;
  408. }
  409. #mobile-nav ul li {
  410. position: relative;
  411. }
  412. #mobile-nav ul li a {
  413. color: #fff;
  414. font-size: 14px;
  415. overflow: hidden;
  416. padding: 6px 22px 6px 15px;
  417. position: relative;
  418. text-decoration: none;
  419. width: 100%;
  420. display: block;
  421. outline: none;
  422. letter-spacing: 0;
  423. }
  424. #mobile-nav ul li a:hover {
  425. color: #fff;
  426. }
  427. #mobile-nav ul li li {
  428. padding-left: 30px;
  429. }
  430. #mobile-nav ul .menu-has-children i {
  431. position: absolute;
  432. right: 0;
  433. z-index: 99;
  434. padding: 15px;
  435. cursor: pointer;
  436. color: #fff;
  437. }
  438. #mobile-nav ul .menu-has-children i.fa-chevron-up {
  439. color: #2e5076;
  440. }
  441. #mobile-nav ul .menu-item-active {
  442. color: #2e5076;
  443. }
  444. #mobile-body-overly {
  445. width: 100%;
  446. height: 100%;
  447. z-index: 997;
  448. top: 0;
  449. left: 0;
  450. position: fixed;
  451. background: rgba(52, 59, 64, 0.9);
  452. display: none;
  453. }
  454. /* Mobile Nav body classes */
  455. body.mobile-nav-active {
  456. overflow: hidden;
  457. }
  458. body.mobile-nav-active #mobile-nav {
  459. left: 0;
  460. }
  461. body.mobile-nav-active #mobile-nav-toggle i {
  462. color: #fff;
  463. }
  464. /*--------------------------------------------------------------
  465. # Sections
  466. --------------------------------------------------------------*/
  467. .padd-section {
  468. padding-bottom: 80px;
  469. padding-top: 80px;
  470. }
  471. @media (max-width: 992px) {
  472. .padd-section {
  473. padding-top: 40px;
  474. padding-bottom: 40px;
  475. }
  476. }
  477. .section-title {
  478. margin-bottom: 80px;
  479. }
  480. @media (max-width: 992px) {
  481. .section-title {
  482. margin-bottom: 40px;
  483. }
  484. }
  485. .section-title h2 {
  486. font-family: "Roboto", sans-serif;
  487. font-size: 45px;
  488. font-weight: 100;
  489. letter-spacing: 2px;
  490. margin-bottom: 20px;
  491. text-transform: capitalize;
  492. }
  493. .section-title .separator {
  494. margin: 0;
  495. }
  496. .separator {
  497. color: #626262;
  498. font-family: "Roboto", sans-serif;
  499. font-size: 15px;
  500. font-weight: 300;
  501. margin-bottom: 30px;
  502. text-transform: capitalize;
  503. }
  504. /* Get Started Section
  505. --------------------------------*/
  506. #get-started {
  507. display: inline-block;
  508. height: 100%;
  509. width: 100%;
  510. }
  511. #get-started .feature-block {
  512. background: #fff none repeat scroll 0 0;
  513. padding: 30px 20px;
  514. transition: all 0.5s ease-in-out 0s;
  515. }
  516. @media (max-width: 991px) {
  517. #get-started .feature-block {
  518. margin-bottom: 30px;
  519. }
  520. }
  521. #get-started .feature-block:hover {
  522. box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  523. transition: all 0.5s ease-in-out 0s;
  524. }
  525. #get-started .feature-block h4 {
  526. margin-bottom: 20px;
  527. }
  528. #get-started .feature-block p {
  529. margin-bottom: 20px;
  530. }
  531. #get-started .feature-block a {
  532. color: #505050;
  533. font-size: 12px;
  534. font-weight: 600;
  535. text-decoration: none;
  536. text-transform: capitalize;
  537. transition: 0.3s;
  538. }
  539. #get-started .feature-block a:hover {
  540. color: #2e5076;
  541. }
  542. /* About Us Section
  543. --------------------------------*/
  544. #about-us img {
  545. max-width: 100%;
  546. }
  547. #about-us .about-content {
  548. padding-top: 60px;
  549. }
  550. #about-us .about-content h2 {
  551. color: #252525;
  552. font-family: "roboto";
  553. font-size: 39px;
  554. font-weight: 100;
  555. letter-spacing: 2px;
  556. margin-bottom: 20px;
  557. text-transform: capitalize;
  558. }
  559. #about-us .about-content span {
  560. font-weight: 700;
  561. padding-right: 10px;
  562. text-transform: uppercase;
  563. }
  564. #about-us .about-content ul li {
  565. line-height: 36px;
  566. }
  567. #about-us .about-content ul li .fa {
  568. padding-right: 20px;
  569. }
  570. /* Features Section
  571. --------------------------------*/
  572. #features {
  573. display: inline-block;
  574. height: 100%;
  575. width: 100%;
  576. }
  577. #features .feature-block {
  578. background: #fff none repeat scroll 0 0;
  579. padding: 30px 20px;
  580. margin-bottom: 30px;
  581. transition: all 0.5s ease-in-out 0s;
  582. }
  583. #features .feature-block:hover {
  584. box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  585. transition: all 0.5s ease-in-out 0s;
  586. }
  587. #features .feature-block h4 {
  588. margin-bottom: 20px;
  589. }
  590. #features .feature-block p {
  591. margin-bottom: 0;
  592. }
  593. /* Screenshots Section
  594. --------------------------------*/
  595. .owl-dot.active > span {
  596. height: 10px !important;
  597. width: 10px !important;
  598. }
  599. .owl-theme .owl-dots .owl-dot span {
  600. height: 10px !important;
  601. width: 10px !important;
  602. }
  603. .owl-item img {
  604. cursor: pointer;
  605. }
  606. .owl-stage-outer {
  607. margin-bottom: 30px;
  608. }
  609. .owl-theme .owl-nav {
  610. display: none;
  611. margin-top: 10px;
  612. }
  613. .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  614. background: #2e5076;
  615. }
  616. .owl-theme .owl-dots .owl-dot span {
  617. background: #ddd;
  618. }
  619. /* Video Section
  620. --------------------------------*/
  621. #video {
  622. background: url(../img/video-bg.jpg) center center;
  623. background-repeat: no-repeat;
  624. background-size: cover;
  625. height: 400px;
  626. overflow: hidden;
  627. }
  628. #video .overlay {
  629. background: rgba(0, 0, 0, 0.85);
  630. height: 100%;
  631. }
  632. #video .overlay .play-btn {
  633. width: 94px;
  634. height: 94px;
  635. background: radial-gradient(#2e5076 50%, rgba(113, 197, 93, 0.15) 52%);
  636. border-radius: 50%;
  637. display: block;
  638. margin: 153px auto 0;
  639. position: relative;
  640. overflow: hidden;
  641. }
  642. #video .overlay .play-btn::after {
  643. content: '';
  644. position: absolute;
  645. left: 50%;
  646. top: 50%;
  647. -webkit-transform: translateX(-40%) translateY(-50%);
  648. transform: translateX(-40%) translateY(-50%);
  649. width: 0;
  650. height: 0;
  651. border-top: 10px solid transparent;
  652. border-bottom: 10px solid transparent;
  653. border-left: 15px solid #fff;
  654. z-index: 100;
  655. transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  656. }
  657. #video .overlay .play-btn:before {
  658. content: '';
  659. position: absolute;
  660. width: 120px;
  661. height: 120px;
  662. -webkit-animation-delay: 0s;
  663. animation-delay: 0s;
  664. -webkit-animation: pulsate1 2s;
  665. animation: pulsate1 2s;
  666. -webkit-animation-direction: forwards;
  667. animation-direction: forwards;
  668. -webkit-animation-iteration-count: infinite;
  669. animation-iteration-count: infinite;
  670. -webkit-animation-timing-function: steps;
  671. animation-timing-function: steps;
  672. opacity: 1;
  673. border-radius: 50%;
  674. border: 2px solid rgba(255, 255, 255, 0.5);
  675. top: -15%;
  676. left: -15%;
  677. background: rgba(198, 16, 0, 0);
  678. }
  679. #video .overlay .play-btn:hover::after {
  680. border-left: 15px solid #2e5076;
  681. -webkit-transform: scale(20);
  682. transform: scale(20);
  683. }
  684. #video .overlay .play-btn:hover::before {
  685. content: '';
  686. position: absolute;
  687. left: 50%;
  688. top: 50%;
  689. -webkit-transform: translateX(-40%) translateY(-50%);
  690. transform: translateX(-40%) translateY(-50%);
  691. width: 0;
  692. height: 0;
  693. border: none;
  694. border-top: 10px solid transparent;
  695. border-bottom: 10px solid transparent;
  696. border-left: 15px solid #fff;
  697. z-index: 200;
  698. -webkit-animation: none;
  699. animation: none;
  700. border-radius: 0;
  701. }
  702. @-webkit-keyframes pulsate1 {
  703. 0% {
  704. -webkit-transform: scale(0.6, 0.6);
  705. transform: scale(0.6, 0.6);
  706. opacity: 1;
  707. }
  708. 100% {
  709. -webkit-transform: scale(1, 1);
  710. transform: scale(1, 1);
  711. opacity: 0;
  712. }
  713. }
  714. @keyframes pulsate1 {
  715. 0% {
  716. -webkit-transform: scale(0.6, 0.6);
  717. transform: scale(0.6, 0.6);
  718. opacity: 1;
  719. }
  720. 100% {
  721. -webkit-transform: scale(1, 1);
  722. transform: scale(1, 1);
  723. opacity: 0;
  724. }
  725. }
  726. @-webkit-keyframes pulsate2 {
  727. 0% {
  728. -webkit-transform: scale(0.1, 0.1);
  729. transform: scale(0.1, 0.1);
  730. opacity: 1;
  731. }
  732. 100% {
  733. -webkit-transform: scale(1, 1);
  734. transform: scale(1, 1);
  735. opacity: 0;
  736. }
  737. }
  738. /* Team Section
  739. --------------------------------*/
  740. #team .team-block {
  741. box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  742. height: 254px;
  743. overflow: hidden;
  744. position: relative;
  745. width: 100%;
  746. }
  747. @media (max-width: 991px) {
  748. #team .team-block {
  749. margin-bottom: 30px;
  750. }
  751. }
  752. #team .team-block img {
  753. width: 100%;
  754. }
  755. #team .team-block .team-content {
  756. background: #fff none repeat scroll 0 0;
  757. bottom: 0;
  758. box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.19);
  759. bottom: -147px;
  760. padding: 20px 0;
  761. position: absolute;
  762. width: 100%;
  763. transition: all 0.5s ease-in-out 0s;
  764. }
  765. #team .team-block .team-content ul {
  766. display: block;
  767. width: 100%;
  768. }
  769. #team .team-block .team-content ul li {
  770. display: inline-block;
  771. }
  772. #team .team-block .team-content ul li a {
  773. color: #626262;
  774. }
  775. #team .team-block .team-content ul li a .fa {
  776. float: left;
  777. padding-left: 10px;
  778. padding-right: 10px;
  779. transition: 0.3s;
  780. }
  781. #team .team-block .team-content ul li a .fa:hover {
  782. color: #2e5076;
  783. }
  784. #team .team-block .team-content ul > span {
  785. display: inline-block;
  786. font-size: 14px;
  787. font-weight: 300;
  788. letter-spacing: 0.5px;
  789. margin-bottom: 20px;
  790. text-transform: uppercase;
  791. }
  792. #team .team-block:hover .team-content {
  793. bottom: 0px;
  794. transition: all 0.5s ease-in-out 0s;
  795. }
  796. /* Testimonials Section
  797. --------------------------------*/
  798. #testimonials .testimonials-content {
  799. box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  800. padding: 49px 20px;
  801. }
  802. #testimonials .testimonials-content::before {
  803. color: #2e5076;
  804. content: "";
  805. display: inline-block;
  806. font: 70px/1 FontAwesome;
  807. position: absolute;
  808. right: 43px;
  809. text-align: left;
  810. top: -29px;
  811. }
  812. #testimonials .top-top > h2 {
  813. font-family: "Roboto" sans-serif;
  814. font-size: 45px;
  815. font-weight: 100;
  816. letter-spacing: 2px;
  817. margin-bottom: 20px;
  818. text-transform: capitalize;
  819. }
  820. #testimonials .top-top > h4 {
  821. font: 700 12px Lato, sans-serif;
  822. }
  823. #testimonials .top-top span {
  824. font-size: 12px;
  825. font-weight: 300;
  826. margin-left: 26px;
  827. }
  828. #testimonials .btm-btm ul li {
  829. float: left;
  830. margin-left: 13px;
  831. border-radius: 50%;
  832. margin-right: 13px;
  833. background: #ddd none repeat scroll 0 0;
  834. border-radius: 50%;
  835. box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
  836. cursor: pointer;
  837. display: block;
  838. height: 10px;
  839. width: 10px;
  840. }
  841. #testimonials .btm-btm .active {
  842. background: #2e5076;
  843. }
  844. .carousel-indicators {
  845. position: relative;
  846. bottom: 0;
  847. left: 0;
  848. bottom: 0 !important;
  849. z-index: 15;
  850. width: auto;
  851. padding-left: 0;
  852. margin: 30px auto 0 auto;
  853. margin-right: auto;
  854. text-align: center;
  855. list-style: none;
  856. margin-bottom: 0;
  857. display: inline-block;
  858. }
  859. .carousel-indicators li {
  860. margin: 0;
  861. }
  862. /* Pricing Table Section
  863. --------------------------------*/
  864. #pricing .block-pricing {
  865. background: #fff;
  866. box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.19);
  867. display: inline-block;
  868. position: relative;
  869. width: 100%;
  870. }
  871. @media (max-width: 991px) {
  872. #pricing .block-pricing {
  873. margin-bottom: 30px;
  874. }
  875. }
  876. #pricing .block-pricing .table {
  877. margin-bottom: 0;
  878. padding: 30px 15px;
  879. max-width: 100%;
  880. width: 100%;
  881. }
  882. #pricing .block-pricing .table h4 {
  883. padding-bottom: 30px;
  884. }
  885. #pricing .block-pricing h2 {
  886. margin-bottom: 30px;
  887. }
  888. #pricing .block-pricing ul {
  889. list-style: outside none none;
  890. margin: 10px auto;
  891. max-width: 240px;
  892. padding: 0;
  893. }
  894. #pricing .block-pricing ul li {
  895. border-bottom: 1px solid rgba(153, 153, 153, 0.3);
  896. padding: 12px 0;
  897. text-align: center;
  898. }
  899. #pricing .block-pricing ul li b {
  900. color: #3c4857;
  901. }
  902. #pricing .block-pricing .table .table_btn a {
  903. background: #2e5076;
  904. color: #fff;
  905. margin: 0;
  906. display: inline-block;
  907. }
  908. #pricing .block-pricing .table .table_btn a:hover {
  909. background: #55b03f;
  910. }
  911. #pricing .block-pricing .table .table_btn a .fa {
  912. font-size: 13px;
  913. margin-right: 5px;
  914. }
  915. /* Blog Section
  916. --------------------------------*/
  917. @media (max-width: 991px) {
  918. #blog .block-blog {
  919. margin-bottom: 30px;
  920. }
  921. }
  922. #blog .block-blog img {
  923. width: 100%;
  924. }
  925. #blog .block-blog .content-blog {
  926. box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.19);
  927. display: inline-block;
  928. min-height: 125px;
  929. padding: 20px 10px;
  930. width: 100%;
  931. }
  932. #blog .block-blog .content-blog h4 {
  933. line-height: 24px;
  934. margin-bottom: 20px;
  935. text-transform: capitalize;
  936. font-weight: normal;
  937. letter-spacing: 0;
  938. font-size: 16px;
  939. }
  940. #blog .block-blog .content-blog h4 a {
  941. color: #555;
  942. text-decoration: none;
  943. transition: 0.3s;
  944. }
  945. #blog .block-blog .content-blog h4 a:hover {
  946. color: #2e5076;
  947. }
  948. #blog .block-blog .content-blog > span {
  949. float: left;
  950. font-size: 12px;
  951. }
  952. #blog .block-blog .content-blog a.readmore {
  953. color: #505050;
  954. font-size: 12px;
  955. font-weight: 600;
  956. text-decoration: none;
  957. transition: 0.3s;
  958. letter-spacing: 0;
  959. text-transform: capitalize;
  960. }
  961. #blog .block-blog .content-blog a.readmore:hover {
  962. color: #2e5076;
  963. }
  964. /* Newsletter Section
  965. --------------------------------*/
  966. #docs {
  967. background: transparent url(../img/newsletter-bg.jpg) no-repeat center top fixed;
  968. background-size: cover;
  969. }
  970. #docs .overlay {
  971. background: linear-gradient(rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 95%);
  972. height: 100%;
  973. width: 100%;
  974. }
  975. #docs .form-control {
  976. background-color: transparent;
  977. border: 1px solid #dddddd;
  978. border-radius: 0;
  979. color: #888;
  980. font-size: 11px;
  981. font-weight: 600;
  982. height: 50px;
  983. text-align: center;
  984. width: 70%;
  985. background: #fff;
  986. }
  987. @media (max-width: 575px) {
  988. #docs .form-control {
  989. margin-bottom: 30px;
  990. width: 100%;
  991. }
  992. }
  993. #docs .form-control:focus {
  994. border-color: #2e5076;
  995. box-shadow: none;
  996. outline: 0 none;
  997. }
  998. #docs .btn {
  999. background: #2e5076;
  1000. border: 0;
  1001. border-radius: 0;
  1002. height: 50px;
  1003. width: 30%;
  1004. transition: 0.3s;
  1005. }
  1006. @media (max-width: 575px) {
  1007. #docs .btn {
  1008. width: 100%;
  1009. }
  1010. }
  1011. #docs .btn:hover {
  1012. background: #55b03f;
  1013. }
  1014. #docs .btn .fa {
  1015. padding-right: 10px;
  1016. }
  1017. #docs ul {
  1018. display: inline-block;
  1019. margin-top: 40px;
  1020. margin-bottom: 0;
  1021. }
  1022. #docs ul li {
  1023. background: #2e5076;
  1024. border-radius: 50px;
  1025. float: left;
  1026. height: 35px;
  1027. line-height: 35px;
  1028. margin-left: 10px;
  1029. margin-right: 10px;
  1030. width: 35px;
  1031. transition: 0.3s;
  1032. }
  1033. #docs ul li:hover {
  1034. background: #55b03f;
  1035. }
  1036. #docs ul li .fa {
  1037. color: #fff;
  1038. }
  1039. /* Contact Section
  1040. --------------------------------*/
  1041. #contact {
  1042. background: #fff;
  1043. }
  1044. #contact .info {
  1045. color: #222;
  1046. }
  1047. #contact .info i {
  1048. font-size: 32px;
  1049. color: #2e5076;
  1050. float: left;
  1051. }
  1052. #contact .info p {
  1053. padding: 0 0 10px 50px;
  1054. margin-bottom: 20px;
  1055. line-height: 22px;
  1056. font-size: 14px;
  1057. }
  1058. #contact .info .email p {
  1059. padding-top: 5px;
  1060. }
  1061. #contact .social-links {
  1062. padding-bottom: 20px;
  1063. }
  1064. #contact .social-links a {
  1065. font-size: 18px;
  1066. display: inline-block;
  1067. background: #2e5076;
  1068. color: #fff;
  1069. line-height: 1;
  1070. padding: 6px 0 8px 0;
  1071. border-radius: 50%;
  1072. text-align: center;
  1073. width: 36px;
  1074. height: 36px;
  1075. transition: 0.3s;
  1076. }
  1077. #contact .social-links a:hover {
  1078. background: #2e5076;
  1079. color: #fff;
  1080. }
  1081. #contact .form #sendmessage {
  1082. color: #2e5076;
  1083. border: 1px solid #2e5076;
  1084. display: none;
  1085. text-align: center;
  1086. padding: 15px;
  1087. font-weight: 600;
  1088. margin-bottom: 15px;
  1089. }
  1090. #contact .form #errormessage {
  1091. color: red;
  1092. display: none;
  1093. border: 1px solid red;
  1094. text-align: center;
  1095. padding: 15px;
  1096. font-weight: 600;
  1097. margin-bottom: 15px;
  1098. }
  1099. #contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
  1100. display: block;
  1101. }
  1102. #contact .form .validation {
  1103. color: red;
  1104. display: none;
  1105. margin: 0 0 20px;
  1106. font-weight: 400;
  1107. font-size: 13px;
  1108. }
  1109. #contact .form input, #contact .form textarea {
  1110. border-radius: 0;
  1111. box-shadow: none;
  1112. font-size: 14px;
  1113. padding: 12px 10px;
  1114. line-height: 1;
  1115. }
  1116. #contact .form button[type="submit"] {
  1117. background: #2e5076;
  1118. border: 0;
  1119. padding: 10px 24px;
  1120. color: #fff;
  1121. transition: 0.4s;
  1122. }
  1123. #contact .form button[type="submit"]:hover {
  1124. background: #92d283;
  1125. }
  1126. /*--------------------------------------------------------------
  1127. # Footer
  1128. --------------------------------------------------------------*/
  1129. .footer {
  1130. background: #2a2c30;
  1131. padding-top: 50px;
  1132. }
  1133. .footer .footer-logo .navbar-brand {
  1134. color: #fff;
  1135. display: inline-block;
  1136. float: none;
  1137. font-family: "Roboto", sans-serif;
  1138. font-size: 24px;
  1139. font-weight: 1500;
  1140. height: 100%;
  1141. letter-spacing: 0.2em;
  1142. padding-left: 0;
  1143. padding-top: 0;
  1144. }
  1145. .footer .footer-logo p {
  1146. color: #fff;
  1147. font-size: 12px;
  1148. letter-spacing: 1px;
  1149. }
  1150. .footer .list-menu > h4 {
  1151. color: #fff;
  1152. padding-bottom: 20px;
  1153. }
  1154. .footer .list-menu ul li a {
  1155. color: #fff;
  1156. font-size: 12px;
  1157. padding-left: 5px;
  1158. text-decoration: none;
  1159. letter-spacing: 0;
  1160. }
  1161. .footer .copyrights {
  1162. background: #fff;
  1163. margin-top: 50px;
  1164. text-align: center;
  1165. padding: 25px;
  1166. }
  1167. .copyrights{
  1168. position: fixed;
  1169. right: 0px;
  1170. }
  1171. .footer .copyrights p, .footer .copyrights .credits {
  1172. margin: 0;
  1173. padding: 0;
  1174. font-family: "Open Sans", sans-serif;
  1175. font-weight: normal;
  1176. font-size: 14px;
  1177. letter-spacing: 0;
  1178. }
  1179. .footer .copyrights p a, .footer .copyrights .credits a {
  1180. letter-spacing: 0;
  1181. color: #2e5076;
  1182. }
  1183. .fullwidthImg{
  1184. width: 100% !important;
  1185. }
  1186. ea {
  1187. cursor: pointer;
  1188. }
  1189. ea:hover{
  1190. font-weight: bold;
  1191. }