style.css 23 KB

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