style.css 29 KB

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