style.css 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651
  1. html,
  2. body {
  3. /*font-family: 'Raleway', sans-serif;*/
  4. font-family: Microsoft YaHei;
  5. font-size: 100%;
  6. overflow-x: hidden;
  7. background: #fff;
  8. }
  9. body a {
  10. transition: 0.5s all ease;
  11. -webkit-transition: 0.5s all ease;
  12. -moz-transition: 0.5s all ease;
  13. -o-transition: 0.5s all ease;
  14. -ms-transition: 0.5s all ease;
  15. text-decoration: none;
  16. }
  17. h1,
  18. h2,
  19. h3,
  20. h4,
  21. h5,
  22. h6 {
  23. margin: 0;
  24. font-family: 'Raleway', sans-serif;
  25. }
  26. p {
  27. line-height: 1.8;
  28. font-size: 1em;
  29. color: #333;
  30. }
  31. ul {
  32. margin: 0;
  33. padding: 0;
  34. }
  35. li {
  36. list-style-type: none;
  37. }
  38. body a:hover {
  39. text-decoration: none;
  40. }
  41. /* banner */
  42. /* header */
  43. header h1 {
  44. line-height: 0;
  45. }
  46. a.navbar-brand i {
  47. font-size: 2.5em;
  48. color: #48bf91;
  49. }
  50. .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
  51. header h1 a span {
  52. color: #fff;
  53. display: block;
  54. font-size: 12px;
  55. letter-spacing: 5px;
  56. word-spacing: 5px;
  57. }
  58. .navbar-light .navbar-nav .nav-link {
  59. font-weight: 600;
  60. text-transform: capitalize;
  61. color: #fff;
  62. font-size: 12px;
  63. letter-spacing: 1px;
  64. }
  65. .navbar-light .navbar-nav .nav-link:hover,
  66. .navbar-light .navbar-nav .nav-link:focus,
  67. .navbar-light .navbar-nav .show>.nav-link,
  68. .navbar-light .navbar-nav .active>.nav-link,
  69. .navbar-light .navbar-nav .nav-link.show,
  70. .navbar-light .navbar-nav .nav-link.active {
  71. color: #0076BE;
  72. background: #fff;
  73. border-radius: 5px;
  74. }
  75. .w3ls-btn {
  76. letter-spacing: 1px;
  77. font-weight: 600;
  78. }
  79. /*-- //header --*/
  80. /* banner */
  81. .banner {
  82. background: url(../images/banner.png)no-repeat;
  83. -webkit-background-size: cover;
  84. -moz-background-size: cover;
  85. -o-background-size: cover;
  86. -ms-background-size: cover;
  87. background-size: cover;
  88. height: 40vw;
  89. }
  90. .banner-text {
  91. padding: 14vw 0 0;
  92. max-width: 900px;
  93. margin: 0 auto;
  94. }
  95. .banner-text-new {
  96. padding: 8vw 0 0;
  97. margin: 0 auto;
  98. }
  99. /*-- text Slider --*/
  100. #slider {
  101. box-shadow: none;
  102. -moz-box-shadow: none;
  103. -webkit-box-shadow: none;
  104. margin: 0 auto;
  105. }
  106. .rslides_tabs {
  107. list-style: none;
  108. padding: 0;
  109. background: rgba(0, 0, 0, .25);
  110. box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
  111. -moz-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
  112. -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3), inset 0 0 5px rgba(0, 0, 0, 1.0);
  113. font-size: 18px;
  114. list-style: none;
  115. margin: 0 auto 50px;
  116. max-width: 540px;
  117. padding: 10px 0;
  118. text-align: center;
  119. width: 100%;
  120. }
  121. .rslides_tabs li {
  122. display: inline;
  123. float: none;
  124. margin-right: 1px;
  125. }
  126. .rslides_tabs a {
  127. width: auto;
  128. line-height: 20px;
  129. padding: 9px 20px;
  130. height: auto;
  131. background: transparent;
  132. display: inline;
  133. }
  134. .rslides_tabs li:first-child {
  135. margin-left: 0;
  136. }
  137. .rslides_tabs .rslides_here a {
  138. background: rgba(255, 255, 255, .1);
  139. color: #fff;
  140. font-weight: bold;
  141. }
  142. .events {
  143. list-style: none;
  144. }
  145. .callbacks_container {
  146. position: relative;
  147. }
  148. ul.callbacks_tabs {
  149. position: absolute;
  150. z-index: 9;
  151. left: 45%;
  152. bottom: -50px;
  153. }
  154. .callbacks_tabs a {
  155. visibility: hidden;
  156. }
  157. .callbacks_tabs a:after {
  158. content: "\f111";
  159. font-size: 0;
  160. visibility: visible;
  161. display: inline-block;
  162. height: 10px;
  163. width: 10px;
  164. background: #48bf91;
  165. }
  166. .callbacks_here a:after {
  167. background: #fff;
  168. height: 10px;
  169. width: 10px;
  170. }
  171. /*
  172. .callbacks_nav {
  173. position: absolute;
  174. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  175. top: 78%;
  176. opacity: 0.7;
  177. z-index: 3;
  178. text-indent: -9999px;
  179. overflow: hidden;
  180. text-decoration: none;
  181. height: 34px;
  182. width: 34px;
  183. background: url("../images/left.png") no-repeat 0px 0px;
  184. }
  185. .callbacks_nav.prev {
  186. left: auto;
  187. background: url("../images/back.png") no-repeat 0px 0px;
  188. left: 18em;
  189. }
  190. .callbacks_nav.next {
  191. left: auto;
  192. background: url("../images/next.png") no-repeat 0px 0px;
  193. right: 18em;
  194. }
  195. .callbacks_nav:active {
  196. opacity: 1.0;
  197. }
  198. .callbacks2_nav:active {
  199. opacity: 1.0;
  200. }*/
  201. #slider-pager a {
  202. display: inline-block;
  203. }
  204. #slider-pager span {
  205. float: left;
  206. }
  207. #slider-pager span {
  208. width: 100px;
  209. height: 15px;
  210. background: #fff;
  211. display: inline-block;
  212. border-radius: 30em;
  213. opacity: 0.6;
  214. }
  215. #slider-pager .rslides_here a {
  216. background: #FFF;
  217. border-radius: 30em;
  218. opacity: 1;
  219. }
  220. #slider-pager a {
  221. padding: 0;
  222. }
  223. #slider-pager li {
  224. display: inline-block;
  225. }
  226. .rslides {
  227. position: relative;
  228. list-style: none;
  229. overflow: hidden;
  230. padding: 0;
  231. margin: 0;
  232. width: 100%;
  233. }
  234. .rslides li {
  235. -webkit-backface-visibility: hidden;
  236. position: absolute;
  237. display: none;
  238. left: 0%;
  239. top: 0;
  240. width: 100%;
  241. }
  242. .rslides li {
  243. position: relative;
  244. display: block;
  245. float: none;
  246. }
  247. .rslides img {
  248. height: auto;
  249. border: 0;
  250. }
  251. .callbacks_tabs li {
  252. display: inline-block;
  253. margin: 0 10px 0 0;
  254. }
  255. .callbacks_tabs a {
  256. visibility: hidden;
  257. width: 20px;
  258. line-height: 19px;
  259. height: 20px;
  260. text-align: center;
  261. color: #000;
  262. font-weight: 600;
  263. display: block;
  264. background: #fff;
  265. border-radius: 50%;
  266. }
  267. .callbacks_tabs a:hover {
  268. background: #1165f3;
  269. color: #fff;
  270. }
  271. p.sub-para {
  272. font-size: 18px;
  273. color: #fff;
  274. letter-spacing: 2px;
  275. font-weight: 300;
  276. }
  277. .slider-info img {
  278. width: 100px;
  279. margin: 0 auto;
  280. }
  281. .slider-top span {
  282. font-weight: 600;
  283. }
  284. .slider-info h3 {
  285. font-size: 4vw;
  286. color: #ffffff;
  287. letter-spacing: 2px;
  288. font-weight: 400;
  289. line-height: 1.15em;
  290. text-shadow: 4px 1px 1px #48bf91;
  291. }
  292. .slider-info p {
  293. color: #e8e8e8;
  294. font-size: 16px;
  295. letter-spacing: 3px;
  296. margin-top: 1em;
  297. text-transform: capitalize;
  298. }
  299. .slider-info a {
  300. color: #fff;
  301. font-size: 16px;
  302. font-weight: 600;
  303. letter-spacing: 1px;
  304. }
  305. .slider-info a:hover {
  306. color: #fff;
  307. background: #007bff;
  308. }
  309. .counter-our-number {
  310. border-radius: 50%;
  311. background-color: rgba(190,14,41,0.8);
  312. font-size: 40px;
  313. color: #fff;
  314. height: 230px;
  315. font-family: MFLiHei_Noncommercial-Regular;
  316. display: flex;
  317. align-items: center;
  318. justify-content: center;
  319. font-weight: 800;
  320. }
  321. /* //text slider */
  322. /* //banner */
  323. /* about */
  324. .about-w3ls {
  325. margin-top: -5em;
  326. background: url(../images/w1.jpg) no-repeat right;
  327. }
  328. div#services {
  329. /*background: url(../images/w.jpg) no-repeat left top;*/
  330. }
  331. section#pricing {
  332. /*background: url(../images/w.jpg) no-repeat right top;*/
  333. }
  334. .about-w3ls .jumbotron {
  335. background: transparent;
  336. }
  337. h1.ab-title {
  338. font-size: 2.5em;
  339. color: #48BF91;
  340. }
  341. .lead {
  342. line-height: 2;
  343. }
  344. h3.w3ls-title {
  345. font-size: 3em;
  346. color: #48BF91;
  347. }
  348. h4.w3ls-title {
  349. font-size: 2em;
  350. color: #000;
  351. }
  352. /* //about */
  353. /*-- services --*/
  354. div#agileits-services {
  355. background: url(../images/s2.jpg) no-repeat center;
  356. background-size: cover;
  357. background-attachment: fixed;
  358. }
  359. .agileits-services-grids {
  360. text-align: center;
  361. }
  362. .agileits-services-grids h4 {
  363. font-size: 1.5em;
  364. color: #000;
  365. line-height: 1.5em;
  366. font-weight: 600;
  367. }
  368. .agileits-services-grids h6 {
  369. padding: 1px;
  370. background: #2954a2;
  371. width: 33%;
  372. margin: 2em auto 0;
  373. -webkit-transition: .5s all;
  374. -moz-transition: .5s all;
  375. transition: .5s all;
  376. }
  377. .agileits-services-grids:hover h6 {
  378. width: 55%;
  379. background: #2954a2;
  380. }
  381. /*-- Effect 1--*/
  382. .agileits-services-grids span {
  383. font-size: 5em;
  384. color: #0076BE;
  385. }
  386. /*-- //services --*/
  387. /* about */
  388. h3.agile-title {
  389. color: #000;
  390. font-size: 3em;
  391. line-height: 36px;
  392. font-weight: 400;
  393. letter-spacing: 4.7px;
  394. }
  395. .card-title {
  396. text-transform: uppercase;
  397. font-size: 1.5em;
  398. color: #000000;
  399. letter-spacing: 6px;
  400. word-spacing: 4px;
  401. }
  402. .card-body a.btn {
  403. background: #eb5c74;
  404. border: none;
  405. color: #fff;
  406. }
  407. h3.stat-title {
  408. color: #fff;
  409. letter-spacing: 4.5px;
  410. font-size: 2.8em;
  411. line-height: 25px;
  412. }
  413. .counter i {
  414. color: #bed0e9;
  415. }
  416. p.count-text {
  417. color: #fff;
  418. }
  419. .timer {
  420. font-size: 2em;
  421. color: #fff;
  422. }
  423. .w3l-thead {
  424. background: #007bff;
  425. }
  426. .counter {
  427. background: rgba(16, 16, 16, 0.3);
  428. }
  429. /*-- about--*/
  430. /* about bottom */
  431. .abbot-main {
  432. background: #edf5fd;
  433. }
  434. .abbot-grid2 {
  435. background: #fdeef1;
  436. }
  437. .abbot-right .card {
  438. background: transparent;
  439. border: none;
  440. }
  441. .abt_card_btn {
  442. font-family: 'Raleway', sans-serif;
  443. font-size: 1.2em;
  444. letter-spacing: 4px;
  445. color: #333 !important;
  446. }
  447. /* slide */
  448. .slide-bg {
  449. background: url(../images/slide.jpg) no-repeat;
  450. background-size: cover;
  451. min-height: 35vw;
  452. background-attachment: fixed;
  453. }
  454. h5.agile-title {
  455. color: #fff;
  456. font-size: 2.7em;
  457. font-weight: 600;
  458. letter-spacing: 2px;
  459. word-spacing: 4px;
  460. font-family: 'Raleway', sans-serif;
  461. max-width: 750px;
  462. }
  463. .slide-bg p {
  464. max-width: 750px;
  465. letter-spacing: 1px;
  466. }
  467. /* //slide */
  468. /* pricing */
  469. .bg-price h4 {
  470. color: #000;
  471. font-size: 2em;
  472. letter-spacing: 2px;
  473. }
  474. .bg-price span {
  475. display: block;
  476. background: #17a2b8;
  477. width: 15px;
  478. height: 5px;
  479. border-radius: 10px;
  480. }
  481. .agile-pricegrid h5 {
  482. font-size: 3em;
  483. color: #0076BE;
  484. }
  485. .agile-pricegrid h5 span {
  486. display: inline;
  487. }
  488. .list-group-item {
  489. color: #777;
  490. }
  491. .btn-info {
  492. color: #fff;
  493. background-color: #48BF91;
  494. border-color: #48BF91;
  495. }
  496. /* //pricing */
  497. /* portfolio */
  498. ul.portfolio-area li figure {
  499. margin: 0;
  500. cursor: zoom-in;
  501. }
  502. .portfolio-categ li {
  503. color: #333;
  504. cursor: pointer;
  505. display: inline-block;
  506. padding: 10px 20px;
  507. font-size: 1.1em;
  508. margin: 0 0.4em;
  509. letter-spacing: 1px;
  510. text-transform: capitalize;
  511. background: #eee;
  512. }
  513. .portfolio-categ li a {
  514. color: #333;
  515. }
  516. .image-block {
  517. display: block;
  518. position: relative;
  519. }
  520. .portfolio-area li {
  521. float: left;
  522. list-style-type: none;
  523. overflow: hidden;
  524. width: 388px;
  525. }
  526. .home-portfolio-text {
  527. margin-top: 10px;
  528. }
  529. .portfolio-categ li.active {
  530. background: #EB5C74;
  531. color: #fff;
  532. }
  533. .portfolio-categ li.active a {
  534. color: #fff;
  535. }
  536. /* //portfolio */
  537. /* team */
  538. /* stats */
  539. .agile_stats {
  540. background: url(../images/stat.png) no-repeat;
  541. background-size: cover;
  542. min-height: 500px;
  543. background-attachment: fixed;
  544. }
  545. .team-img-text {
  546. position: absolute;
  547. left: 0;
  548. top: 0;
  549. width: 100%;
  550. height: 100%;
  551. background-color: rgba(50, 50, 50, 0.7);
  552. color: #fff;
  553. padding: 65px 30px 30px 30px;
  554. font-size: 13px;
  555. }
  556. .team-line {
  557. width: 50px;
  558. margin: auto;
  559. margin-top: auto;
  560. margin-top: 30px;
  561. margin-bottom: 30px
  562. }
  563. /* //stats */
  564. .footerv2-w3ls h4 {
  565. color: #0076BE;
  566. font-size: 1.3em;
  567. }
  568. .team-effect {
  569. display: block;
  570. overflow: hidden;
  571. position: relative;
  572. -webkit-transition: all 0.5s;
  573. -moz-transition: all 0.5s;
  574. -ms-transition: all 0.5s;
  575. -o-transition: all 0.5s;
  576. transition: all 0.5s;
  577. opacity: 1;
  578. filter: alpha(opacity=100);
  579. }
  580. .footerv2-w3ls p {
  581. margin: 5px 0;
  582. }
  583. .team-text {
  584. -webkit-transition: all 0.5s;
  585. -moz-transition: all 0.5s;
  586. -ms-transition: all 0.5s;
  587. -o-transition: all 0.5s;
  588. transition: all 0.5s;
  589. }
  590. .team-effect img {
  591. height: 100%;
  592. width: 100%;
  593. -webkit-transition: all 0.5s;
  594. -moz-transition: all 0.5s;
  595. -ms-transition: all 0.5s;
  596. -o-transition: all 0.5s;
  597. transition: all 0.5s;
  598. }
  599. .team-effect img:before {
  600. content: '';
  601. background-color: rgba(0, 0, 0, 0);
  602. left: 0;
  603. top: 0;
  604. right: 0;
  605. bottom: 0;
  606. position: absolute;
  607. -webkit-transition: all 0.5s;
  608. -moz-transition: all 0.5s;
  609. -ms-transition: all 0.5s;
  610. -o-transition: all 0.5s;
  611. transition: all 0.5s;
  612. }
  613. .team-effect img:hover {
  614. background-color: rgba(0, 0, 0, 0.8);
  615. }
  616. .team-grids:hover .team-text {
  617. background-color: #e01414;
  618. }
  619. .team-grids:hover .team-text p {
  620. color: #fff;
  621. }
  622. .team-grids:hover .social-icon {
  623. bottom: 0%;
  624. height: 100%;
  625. padding-top: 18em;
  626. position: absolute;
  627. visibility: visible;
  628. background-color: rgba(0, 0, 0, 0.8);
  629. -webkit-transform: scale(1);
  630. -moz-transform: scale(1);
  631. -o-transform: scale(1);
  632. -ms-transform: scale(1);
  633. transform: scale(1);
  634. -webkit-transition: all 0.9s;
  635. -moz-transition: all 0.9s;
  636. -ms-transition: all 0.9s;
  637. -o-transition: all 0.9s;
  638. transition: all 0.9s;
  639. }
  640. .team-effect:hover .social-icon a {
  641. -webkit-animation-name: translate-transition;
  642. -webkit-animation-duration: 0.8s;
  643. -webkit-animation-timing-function: linear;
  644. -webkit-animation-iteration-count: 1;
  645. animation-name: translate-transition;
  646. animation-duration: 0.8s;
  647. animation-timing-function: linear;
  648. animation-iteration-count: 1;
  649. }
  650. .team-text {
  651. background-color: #dedada;
  652. padding: 20px;
  653. width: 100%;
  654. text-align: center;
  655. }
  656. .team-text h4 {
  657. color: #000;
  658. font-size: 2em;
  659. }
  660. .team-text p {
  661. margin-top: 0.3em;
  662. text-transform: capitalize;
  663. }
  664. .team-effect .social-icon {
  665. bottom: 0;
  666. padding: 10px;
  667. left: 0;
  668. position: absolute;
  669. right: 0;
  670. text-align: center;
  671. overflow: hidden;
  672. z-index: 9;
  673. -webkit-transform: scale(0);
  674. -moz-transform: scale(0);
  675. -o-transform: scale(0);
  676. -ms-transform: scale(0);
  677. transform: scale(0);
  678. -webkit-transition: all 0.5s;
  679. -moz-transition: all 0.5s;
  680. -ms-transition: all 0.5s;
  681. -o-transition: all 0.5s;
  682. transition: all 0.5s;
  683. visibility: hidden;
  684. }
  685. .social-button {
  686. display: inline-block;
  687. background-color: #fff;
  688. width: 40px;
  689. height: 40px;
  690. margin: 0 3px;
  691. text-align: center;
  692. position: relative;
  693. overflow: hidden;
  694. opacity: .99;
  695. -webkit-border-radius: 20%;
  696. -moz-border-radius: 20%;
  697. border-radius: 20%;
  698. }
  699. .social-button:before {
  700. content: '';
  701. background-color: #000;
  702. width: 120%;
  703. height: 120%;
  704. position: absolute;
  705. top: 102%;
  706. left: -118%;
  707. -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  708. -moz-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  709. transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  710. }
  711. .social-button .fa {
  712. font-size: 2em;
  713. line-height: 1.5;
  714. -webkit-transform: scale(0.8);
  715. -moz-transform: scale(0.8);
  716. -o-transform: scale(0.8);
  717. -ms-transform: scale(0.8);
  718. transform: scale(0.8);
  719. -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  720. -moz-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  721. transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  722. }
  723. .social-button.facebook:before {
  724. background-color: #3B5998;
  725. }
  726. .social-button.facebook .fa {
  727. color: #3B5998;
  728. }
  729. .social-button.twitter:before {
  730. background-color: #3CF;
  731. }
  732. .social-button.twitter .fa {
  733. color: #3CF;
  734. }
  735. .social-button.google:before {
  736. background-color: #DC4A38;
  737. }
  738. .social-button.google .fa {
  739. color: #DC4A38;
  740. }
  741. .social-button.dribbble:before {
  742. background-color: #F26798;
  743. }
  744. .social-button.dribbble .fa {
  745. color: #F26798;
  746. }
  747. .social-button.skype:before {
  748. background-color: #00AFF0;
  749. }
  750. .social-button.skype .fa {
  751. color: #00AFF0;
  752. }
  753. .social-button:focus:before,
  754. .social-button:hover:before {
  755. top: -10%;
  756. left: -10%;
  757. }
  758. .social-button:focus .fa,
  759. .social-button:hover .fa {
  760. color: #fff;
  761. -webkit-transform: scale(1);
  762. -o-transform: scale(1);
  763. -moz-transform: scale(1);
  764. -ms-transform: scale(1);
  765. transform: scale(1);
  766. }
  767. /*-- //team --*/
  768. /*-- team --*/
  769. .team.agileits-w3layouts {
  770. background: #fff;
  771. }
  772. .team-grid.w3_agileits img {
  773. margin: 1em 0 0;
  774. }
  775. .team-grid.w3_agileits ul {
  776. margin: 1em 0 0;
  777. }
  778. .team-grid.w3_agileits {
  779. padding: 2em;
  780. -webkit-box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
  781. -moz-box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
  782. box-shadow: 5px 10px 10px 0px rgba(216, 216, 216, 0.78);
  783. }
  784. .testi-grids img {
  785. display: inline-block;
  786. -webkit-border-radius: 50%;
  787. border-radius: 50%;
  788. -moz-border-radius: 50%;
  789. text-decoration: none;
  790. z-index: 1;
  791. -webkit-transition: .5s all;
  792. -moz-transition: .5s all;
  793. transition: .5s all;
  794. }
  795. .team-grid .social-icons {
  796. margin-top: 1em;
  797. }
  798. /*-- testimonials--*/
  799. .testi-agile {
  800. background: url(../images/testi.jpg) no-repeat center;
  801. background-size: cover;
  802. background-attachment: fixed;
  803. }
  804. .test-review p {
  805. max-width: 550px;
  806. letter-spacing: 1px;
  807. }
  808. .test-review p {
  809. max-width: 500px;
  810. }
  811. .img-agile i {
  812. font-size: 3em;
  813. color: #0076be;
  814. }
  815. .carousel-control.left,
  816. .carousel-control.right {
  817. background: none;
  818. width: 25px;
  819. }
  820. .carousel-control.left {
  821. left: -25px;
  822. }
  823. .carousel-control.right {
  824. right: -25px;
  825. }
  826. .broun-block {
  827. padding-bottom: 34px;
  828. }
  829. .block-text {
  830. background-color: #fff;
  831. border-radius: 5px;
  832. box-shadow: 0 3px 0 #2c2222;
  833. color: #000;
  834. margin-top: 27px;
  835. padding: 15px 18px;
  836. }
  837. .block-text span {
  838. color: #eb5c74;
  839. }
  840. .block-text h6 {
  841. color: #000000;
  842. font-size: 20px;
  843. font-weight: bold;
  844. text-transform: capitalize;
  845. line-height: 21px;
  846. font-family: 'Raleway', sans-serif;
  847. }
  848. .mark {
  849. background: none;
  850. }
  851. .block-text p {
  852. color: #585858;
  853. font-style: italic;
  854. }
  855. .block {
  856. display: block;
  857. }
  858. .zmin {
  859. z-index: 1;
  860. }
  861. .ab {
  862. position: absolute;
  863. }
  864. .person-text {
  865. padding: 10px 0 0;
  866. text-align: center;
  867. z-index: 2;
  868. }
  869. .person-text h5 {
  870. color: #eb5c74;
  871. display: block;
  872. font-size: 1.2em;
  873. margin: 10px 0 5px;
  874. font-family: 'Raleway', sans-serif;
  875. }
  876. .person-text i {
  877. color: #000;
  878. }
  879. .rel {
  880. position: relative;
  881. background: #eaeaea;
  882. padding: 2em;
  883. }
  884. .person-text.rel {
  885. background: transparent;
  886. }
  887. /*-- testimonials--*/
  888. /*-- img-hover-effect --*/
  889. .adipoli-wrapper {
  890. margin: auto;
  891. position: relative;
  892. display: inline-block;
  893. }
  894. .adipoli-wrapper>img {
  895. position: absolute;
  896. z-index: 1;
  897. }
  898. .adipoli-before {
  899. position: absolute;
  900. z-index: 5;
  901. }
  902. .adipoli-after {
  903. position: absolute;
  904. z-index: 10;
  905. }
  906. .adipoli-slice {
  907. display: block;
  908. position: absolute;
  909. z-index: 15;
  910. height: 100%;
  911. background-size: cover !important;
  912. }
  913. .gal-w3l img {
  914. width: 100% !important;
  915. }
  916. .gal-w3l {
  917. padding-left: 5px !important;
  918. padding-right: 5px !important;
  919. margin-bottom: 4px;
  920. }
  921. .gallery {
  922. background: #f0f9f6;
  923. }
  924. /*-- //img-hover-effect --*/
  925. /*--contact--*/
  926. .map iframe {
  927. width: 100%;
  928. border: 1px solid #17a2b8;
  929. }
  930. .address h5 {
  931. color: #000;
  932. text-transform: capitalize;
  933. font-size: 1.1em;
  934. }
  935. .address p a,
  936. p.c-txt {
  937. color: #777;
  938. font-size: 1em;
  939. }
  940. .address p a:hover {
  941. color: #000;
  942. }
  943. .contact-top1 .form-group label,
  944. form.f-color .form-control {
  945. color: #000;
  946. font-weight: 600;
  947. letter-spacing: 1px;
  948. }
  949. .contact-top1 h5 {
  950. font-size: 2em;
  951. }
  952. .address h5 {
  953. font-size: 1.5em;
  954. }
  955. /*--//contact--*/
  956. /* footer */
  957. footer {
  958. background: #fff;
  959. }
  960. /* footer grids */
  961. .footerv3-top h3 {
  962. font-size: 1.3em;
  963. color: #fff;
  964. text-transform: uppercase;
  965. margin-bottom: 1.5em;
  966. }
  967. .footv3-left h4 a {
  968. font-size: 1.3em;
  969. letter-spacing: 0.5px;
  970. color: #fff !important;
  971. padding: 14px 0 0;
  972. position: relative;
  973. text-transform: capitalize;
  974. }
  975. .footerv3-top p {
  976. font-size: 1em;
  977. color: #a3b1bf;
  978. margin: 1em 0;
  979. line-height: 1.5em;
  980. }
  981. .footer p a {
  982. color: #777;
  983. }
  984. .footer p a:hover {
  985. color: #ED4F2E;
  986. }
  987. .fv3-contact span {
  988. color: #17a2b8;
  989. font-size: 1.2em;
  990. display: inline-block;
  991. vertical-align: middle;
  992. }
  993. .fv3-contact p {
  994. display: inline-block;
  995. color: #333;
  996. }
  997. .footer-top p {
  998. max-width: 400px;
  999. }
  1000. .fv3-contact p a:hover {
  1001. color: #000;
  1002. }
  1003. .list-agileits li a {
  1004. color: #333;
  1005. font-size: 1em;
  1006. }
  1007. h3.w3f_title {
  1008. font-size: 1.5em;
  1009. letter-spacing: 2px;
  1010. color: #000;
  1011. }
  1012. .cpy-right p a {
  1013. color: #333;
  1014. font-size: 1em;
  1015. }
  1016. /* footer grids */
  1017. footer-top p {
  1018. max-width: 500px;
  1019. }
  1020. .footerv2-w3ls ul.social-iconsv2 li {
  1021. display: inline-block;
  1022. margin-right: 6px;
  1023. border-radius: 50%;
  1024. }
  1025. .footerv2-w3ls ul.social-iconsv2 li a {
  1026. text-decoration: none;
  1027. font-size: 16px;
  1028. color: #fff;
  1029. }
  1030. .footerv2-w3ls ul.social-iconsv2 li a i.fab {
  1031. font-size: 18px;
  1032. line-height: 38px;
  1033. width: 37px;
  1034. height: 37px;
  1035. border-radius: 50%;
  1036. text-align: center;
  1037. background-color: transparent;
  1038. transition: all 0.5s ease-in-out;
  1039. -webkit-transition: all 0.5s ease-in-out;
  1040. -moz-transition: all 0.5s ease-in-out;
  1041. -o-transition: all 0.5s ease-in-out;
  1042. -ms-transition: all 0.5s ease-in-out;
  1043. }
  1044. .footerv2-w3ls ul.social-iconsv2 li:first-child {
  1045. background: #3b5998;
  1046. color: #fff;
  1047. }
  1048. .footerv2-w3ls ul.social-iconsv2 li:last-child {
  1049. background: #287bbc;
  1050. color: #000;
  1051. }
  1052. .footerv2-w3ls ul.social-iconsv2 li:nth-child(3) {
  1053. background: #dd4b39;
  1054. color: #000;
  1055. }
  1056. .footerv2-w3ls ul.social-iconsv2 li a i.fab:hover {
  1057. background-color: #fff;
  1058. color: #000;
  1059. }
  1060. .footerv2-w3ls ul.social-iconsv2 li:nth-child(2) {
  1061. background: #1da1f2;
  1062. color: #000;
  1063. }
  1064. .footerv2-w3ls ul.social-iconsv2 li a:hover {
  1065. color: #fff;
  1066. }
  1067. /* //footer */
  1068. /* login and register modal */
  1069. .modal-content {
  1070. font-family: 'Raleway', sans-serif;
  1071. }
  1072. .form-control {
  1073. font-family: 'Raleway', sans-serif;
  1074. }
  1075. .right-w3l input[type="submit"] {
  1076. background: #020202;
  1077. border: none;
  1078. color: #fff;
  1079. font-size: 1em;
  1080. text-transform: uppercase;
  1081. letter-spacing: 1px;
  1082. font-family: 'Raleway', sans-serif;
  1083. cursor: pointer;
  1084. }
  1085. .col-form-label {
  1086. text-transform: uppercase;
  1087. font-weight: 600;
  1088. color: #000;
  1089. font-size: 13px;
  1090. letter-spacing: 1px;
  1091. }
  1092. .modal-header {
  1093. background: #0076BE;
  1094. color: #fff;
  1095. border: none;
  1096. }
  1097. .modal-body {
  1098. position: relative;
  1099. -webkit-box-flex: 1;
  1100. -ms-flex: 1 1 auto;
  1101. flex: 1 1 auto;
  1102. padding: 1rem;
  1103. background: #fff;
  1104. }
  1105. h5.modal-title {
  1106. letter-spacing: 1px;
  1107. font-size: 1.6em;
  1108. }
  1109. /* //modal */
  1110. /*-- bottom-to-top --*/
  1111. #toTop {
  1112. display: none;
  1113. text-decoration: none;
  1114. position: fixed;
  1115. bottom: 24px;
  1116. right: 3%;
  1117. overflow: hidden;
  1118. z-index: 999;
  1119. width: 32px;
  1120. height: 32px;
  1121. border: none;
  1122. text-indent: 100%;
  1123. background: url(../images/move-top.png) no-repeat 0px 0px;
  1124. }
  1125. #toTopHover {
  1126. width: 32px;
  1127. height: 32px;
  1128. display: block;
  1129. overflow: hidden;
  1130. float: right;
  1131. opacity: 0;
  1132. -moz-opacity: 0;
  1133. filter: alpha(opacity=0);
  1134. }
  1135. /*-- //bottom-to-top --*/
  1136. /* -- Responsive code -- */
  1137. @media screen and (max-width: 1080px) {
  1138. .agileits-services-grids h4 {
  1139. font-size: 1.3em;
  1140. }
  1141. .agileits-services-grids span {
  1142. font-size: 4em;
  1143. }
  1144. h3.stat-title {
  1145. letter-spacing: 2.5px;
  1146. font-size: 2.6em;
  1147. }
  1148. .agile-pricegrid h5 {
  1149. font-size: 2.5em;
  1150. }
  1151. h5.agile-title {
  1152. font-size: 2.5em;
  1153. }
  1154. }
  1155. @media screen and (max-width: 991px) {
  1156. .btn-info {
  1157. margin: 10px auto;
  1158. display: block;
  1159. }
  1160. .banner {
  1161. height: 47vw;
  1162. }
  1163. .slider-info h3 {
  1164. font-size: 4.5vw;
  1165. }
  1166. h1.ab-title {
  1167. font-size: 2.3em;
  1168. }
  1169. .timer {
  1170. font-size: 1.8em;
  1171. }
  1172. h5.agile-title {
  1173. font-size: 2.3em;
  1174. }
  1175. .navbar-nav .dropdown-menu{
  1176. text-align:center;
  1177. }
  1178. }
  1179. @media screen and (max-width: 900px) {
  1180. h3.agile-title {
  1181. font-size: 2.8em;
  1182. letter-spacing: 1px;
  1183. }
  1184. }
  1185. @media screen and (max-width: 800px) {
  1186. .slider-info h3 {
  1187. font-size: 2.8em;
  1188. }
  1189. .banner {
  1190. height: 54vw;
  1191. }
  1192. h3.stat-title {
  1193. letter-spacing: 2px;
  1194. font-size: 2.4em;
  1195. }
  1196. }
  1197. @media screen and (max-width: 768px) {}
  1198. @media screen and (max-width: 767px) {}
  1199. @media screen and (max-width: 736px) {
  1200. .slider-info h3 {
  1201. line-height: 1.3;
  1202. }
  1203. .lead {
  1204. font-size: 1.1rem;
  1205. }
  1206. .callbacks_tabs li {
  1207. margin: 0;
  1208. }
  1209. .slider-info h3 {
  1210. font-size: 2.5em;
  1211. }
  1212. ul.callbacks_tabs {
  1213. bottom: -40px;
  1214. }
  1215. h1.ab-title {
  1216. font-size: 2em;
  1217. }
  1218. h3.w3ls-title {
  1219. font-size: 2.5em;
  1220. }
  1221. h5.agile-title {
  1222. font-size: 1.8em;
  1223. }
  1224. }
  1225. @media screen and (max-width: 667px) {
  1226. .banner {
  1227. height: 425px;
  1228. }
  1229. .footerv2-w3ls ul.social-iconsv2 li a i.fab {
  1230. font-size: 17px;
  1231. line-height: 33px;
  1232. width: 32px;
  1233. height: 32px;
  1234. }
  1235. h3.agile-title {
  1236. font-size: 2.3em;
  1237. }
  1238. }
  1239. @media screen and (max-width: 640px) {
  1240. .about-w3ls .jumbotron {
  1241. padding-left: 0;
  1242. padding-right: 0;
  1243. }
  1244. .slider-info h3 {
  1245. font-size: 2.3em;
  1246. }
  1247. .agile-pricegrid h5 {
  1248. font-size: 2.3em;
  1249. }
  1250. h3.stat-title {
  1251. letter-spacing: 2px;
  1252. font-size: 2.2em;
  1253. }
  1254. h3.w3ls-title {
  1255. font-size: 2.2em;
  1256. }
  1257. .bg-price h4 {
  1258. font-size: 1.8em;
  1259. }
  1260. .agile-pricegrid h5 {
  1261. font-size: 2.1em;
  1262. }
  1263. }
  1264. @media screen and (max-width: 600px) {
  1265. h3.agile-title {
  1266. font-size: 2.1em;
  1267. }
  1268. h5.agile-title {
  1269. font-size: 1.6em;
  1270. }
  1271. h1.ab-title {
  1272. font-size: 1.8em;
  1273. }
  1274. }
  1275. @media screen and (max-width: 568px) {
  1276. .slider-info h3 {
  1277. font-size: 2.3em;
  1278. }
  1279. h3.stat-title {
  1280. letter-spacing: 1.5px;
  1281. font-size: 2.2em;
  1282. }
  1283. h3.agile-title {
  1284. font-size: 1.8em;
  1285. }
  1286. a.serv_link {
  1287. font-size: 0.85em;
  1288. }
  1289. h3.stat-title {
  1290. letter-spacing: 1px;
  1291. font-size: 1.9em;
  1292. }
  1293. h5.agile-title {
  1294. font-size: 1.5em;
  1295. }
  1296. h5.modal-title {
  1297. font-size: 1.3em;
  1298. }
  1299. }
  1300. @media screen and (max-width: 480px) {
  1301. ul.callbacks_tabs {
  1302. left: 43%;
  1303. }
  1304. .banner {
  1305. height: 380px;
  1306. }
  1307. .slider-info h3 {
  1308. font-size: 2.1em;
  1309. }
  1310. section#pricing {
  1311. background: transparent;
  1312. }
  1313. h5.agile-title {
  1314. font-size: 1.5em;
  1315. }
  1316. .cpy-right p {
  1317. font-size: 0.9em;
  1318. }
  1319. }
  1320. @media screen and (max-width: 414px) {
  1321. h1.ab-title {
  1322. font-size: 1.6em;
  1323. }
  1324. .lead {
  1325. font-size: 1rem;
  1326. }
  1327. h3.w3ls-title {
  1328. font-size: 2.1em;
  1329. }
  1330. .slider-info h3 {
  1331. font-size: 1.8em;
  1332. }
  1333. div#services {
  1334. background: transparent;
  1335. }
  1336. h3.stat-title {
  1337. line-height: 1.3;
  1338. font-size: 2em;
  1339. letter-spacing: 0.5px;
  1340. }
  1341. .bg-price h4 {
  1342. font-size: 1.8em;
  1343. }
  1344. h5.agile-title {
  1345. font-size: 1.3em;
  1346. }
  1347. .slide-bg p {
  1348. letter-spacing: 0.5px;
  1349. font-size: 0.9em;
  1350. }
  1351. .agileits-services-grids span {
  1352. font-size: 3.5em;
  1353. }
  1354. }
  1355. @media screen and (max-width: 384px) {
  1356. h3.stat-title {
  1357. font-size: 1.8em;
  1358. }
  1359. h5.agile-title {
  1360. letter-spacing: 1px;
  1361. }
  1362. .col-4.gal-w3l {
  1363. max-width: 100%;
  1364. flex: 100%;
  1365. }
  1366. }
  1367. @media screen and (max-width: 375px) {
  1368. h5.agile-title {
  1369. font-size: 1.2em;
  1370. }
  1371. h3.stat-title {
  1372. font-size: 1.7em;
  1373. }
  1374. }
  1375. @media screen and (max-width: 320px) {
  1376. h3.w3ls-title {
  1377. font-size: 2.3em;
  1378. }
  1379. h3.stat-title {
  1380. font-size: 1.4em;
  1381. }
  1382. h3.agile-title {
  1383. font-size: 1.8em;
  1384. }
  1385. h5.agile-title {
  1386. font-size: 1.02em;
  1387. }
  1388. .contact-top1 .form-group label, form.f-color .form-control {
  1389. font-size: 0.9em;
  1390. }
  1391. }
  1392. /* -- //Responsive code -- */
  1393. /* -- Responsive code -- */