style.css 22 KB

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