styles.css 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363
  1. /******************************/
  2. /* 01. General Styles */
  3. /******************************/
  4. body,
  5. html {
  6. width: 100%;
  7. height: 100%;
  8. }
  9. body, p {
  10. color: #555;
  11. font: 400 1rem/1.625rem "Open Sans", sans-serif;;
  12. }
  13. .p-large {
  14. font: 400 1.125rem/1.75rem "Open Sans", sans-serif;
  15. }
  16. .p-small {
  17. font: 400 0.875rem/1.5rem "Open Sans", sans-serif;
  18. }
  19. h1 {
  20. color: #333;
  21. font: 700 2.5rem/3.125rem "Open Sans", sans-serif;
  22. letter-spacing: -0.2px;
  23. }
  24. h2 {
  25. color: #333;
  26. font: 700 2rem/2.625rem "Open Sans", sans-serif;
  27. letter-spacing: -0.2px;
  28. }
  29. h3 {
  30. color: #333;
  31. font: 700 1.625rem/2.125rem "Open Sans", sans-serif;
  32. letter-spacing: -0.2px;
  33. }
  34. h4 {
  35. color: #333;
  36. font: 700 1.375rem/1.75rem "Open Sans", sans-serif;
  37. letter-spacing: -0.1px;
  38. }
  39. h5 {
  40. color: #333;
  41. font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
  42. letter-spacing: -0.1px;
  43. }
  44. h6 {
  45. color: #333;
  46. font: 700 1rem/1.375rem "Open Sans", sans-serif;
  47. letter-spacing: -0.1px;
  48. }
  49. .above-heading {
  50. color: #20a0ff;
  51. font: 700 0.75rem/0.875rem "Open Sans", sans-serif;
  52. text-align: center;
  53. }
  54. .p-heading {
  55. margin-bottom: 3.25rem;
  56. }
  57. .testimonial-text {
  58. font: italic 400 1rem/1.625rem "Open Sans", sans-serif;
  59. }
  60. .testimonial-author {
  61. font: 700 1rem/1.625rem "Open Sans", sans-serif;
  62. letter-spacing: -0.1px;
  63. }
  64. .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
  65. .li-space-lg li {
  66. margin-bottom: 0.375rem;
  67. }
  68. .indent {
  69. padding-left: 1.25rem;
  70. }
  71. a {
  72. color: #555;
  73. text-decoration: underline;
  74. }
  75. a:hover {
  76. color: #555;
  77. text-decoration: underline;
  78. }
  79. a.white {
  80. color: #fff;
  81. }
  82. .decorative-line {
  83. display: block;
  84. width: 5rem;
  85. height: 0.5rem;
  86. margin-right: auto;
  87. margin-left: auto;
  88. }
  89. .blue {
  90. color: #20a0ff;
  91. }
  92. .btn-solid-reg {
  93. display: inline-block;
  94. padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
  95. border: 0.125rem solid #20a0ff;
  96. border-radius: 2rem;
  97. background-color: #20a0ff;
  98. color: #fff;
  99. font: 700 0.875rem/0 "Open Sans", sans-serif;
  100. text-decoration: none;
  101. transition: all 0.2s;
  102. }
  103. .btn-solid-reg-blue {
  104. background: #20a0ff;
  105. }
  106. .btn-orange {
  107. border: 0.125rem solid #FF8C00;
  108. border-radius: 2rem;
  109. background-color: #FF8C00;
  110. }
  111. .btn-solid-reg:hover {
  112. background-color: transparent;
  113. color: #20a0ff;
  114. text-decoration: none;
  115. }
  116. .btn-orange:hover {
  117. background-color: transparent;
  118. color: #FF8C00;
  119. text-decoration: none;
  120. }
  121. .btn-solid-lg {
  122. display: inline-block;
  123. padding: 1.375rem 2.625rem 1.375rem 2.625rem;
  124. border: 0.125rem solid #20a0ff;
  125. border-radius: 2rem;
  126. background-color: #20a0ff;
  127. color: #fff;
  128. font: 700 0.875rem/0 "Open Sans", sans-serif;
  129. text-decoration: none;
  130. transition: all 0.2s;
  131. }
  132. .btn-solid-lg:hover {
  133. background-color: transparent;
  134. color: #20a0ff;
  135. text-decoration: none;
  136. }
  137. .btn-outline-reg {
  138. display: inline-block;
  139. padding: 1.1875rem 2.125rem 1.1875rem 2.125rem;
  140. border: 0.125rem solid #20a0ff;
  141. border-radius: 2rem;
  142. background-color: transparent;
  143. color: #20a0ff;
  144. font: 700 0.875rem/0 "Open Sans", sans-serif;
  145. text-decoration: none;
  146. transition: all 0.2s;
  147. }
  148. .btn-outline-reg:hover {
  149. background-color: #20a0ff;
  150. color: #fff;
  151. text-decoration: none;
  152. }
  153. .btn-outline-lg {
  154. display: inline-block;
  155. padding: 1.375rem 2.625rem 1.375rem 2.625rem;
  156. border: 0.125rem solid #20a0ff;
  157. border-radius: 2rem;
  158. background-color: transparent;
  159. color: #20a0ff;
  160. font: 700 0.875rem/0 "Open Sans", sans-serif;
  161. text-decoration: none;
  162. transition: all 0.2s;
  163. }
  164. .btn-outline-lg:hover {
  165. background-color: #20a0ff;
  166. color: #fff;
  167. text-decoration: none;
  168. }
  169. .btn-outline-sm {
  170. display: inline-block;
  171. padding: 0.875rem 1.5rem 0.875rem 1.5rem;
  172. border: 0.125rem solid #20a0ff;
  173. border-radius: 2rem;
  174. background-color: transparent;
  175. color: #20a0ff;
  176. font: 700 0.875rem/0 "Open Sans", sans-serif;
  177. text-decoration: none;
  178. transition: all 0.2s;
  179. }
  180. .btn-outline-sm:hover {
  181. background-color: #20a0ff;
  182. color: #fff;
  183. text-decoration: none;
  184. }
  185. .form-group {
  186. position: relative;
  187. margin-bottom: 1.25rem;
  188. }
  189. .form-group.has-error.has-danger {
  190. margin-bottom: 0.625rem;
  191. }
  192. .form-group.has-error.has-danger .help-block.with-errors ul {
  193. margin-top: 0.375rem;
  194. }
  195. .label-control {
  196. position: absolute;
  197. top: 0.87rem;
  198. left: 1.25rem;
  199. color: #555;
  200. opacity: 1;
  201. font: 400 0.875rem/1.375rem "Open Sans", sans-serif;
  202. cursor: text;
  203. transition: all 0.2s ease;
  204. }
  205. /* IE10+ hack to solve lower label text position compared to the rest of the browsers */
  206. @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  207. .label-control {
  208. top: 0.9375rem;
  209. }
  210. }
  211. .form-control-input:focus + .label-control,
  212. .form-control-input.notEmpty + .label-control,
  213. .form-control-textarea:focus + .label-control,
  214. .form-control-textarea.notEmpty + .label-control {
  215. top: 0.125rem;
  216. opacity: 1;
  217. font-size: 0.75rem;
  218. font-weight: 700;
  219. }
  220. .form-control-input,
  221. .form-control-select {
  222. display: block; /* needed for proper display of the label in Firefox, IE, Edge */
  223. width: 100%;
  224. padding-top: 1.0625rem;
  225. padding-bottom: 0.0625rem;
  226. padding-left: 1.25rem;
  227. border: 1px solid #c4d8dc;
  228. border-radius: 0.25rem;
  229. background-color: #fff;
  230. color: #555;
  231. font: 400 0.875rem/1.875rem "Open Sans", sans-serif;
  232. transition: all 0.2s;
  233. -webkit-appearance: none; /* removes inner shadow on form inputs on ios safari */
  234. }
  235. .form-control-select {
  236. padding-top: 0.5rem;
  237. padding-bottom: 0.5rem;
  238. height: 3rem;
  239. }
  240. /* IE10+ hack to solve lower label text position compared to the rest of the browsers */
  241. @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  242. .form-control-input {
  243. padding-top: 1.25rem;
  244. padding-bottom: 0.75rem;
  245. line-height: 1.75rem;
  246. }
  247. .form-control-select {
  248. padding-top: 0.875rem;
  249. padding-bottom: 0.75rem;
  250. height: 3.125rem;
  251. line-height: 2.125rem;
  252. }
  253. }
  254. select {
  255. /* you should keep these first rules in place to maintain cross-browser behavior */
  256. -webkit-appearance: none;
  257. -moz-appearance: none;
  258. -ms-appearance: none;
  259. -o-appearance: none;
  260. appearance: none;
  261. background-image: url('../images/down-arrow.png');
  262. background-position: 96% 50%;
  263. background-repeat: no-repeat;
  264. outline: none;
  265. }
  266. select::-ms-expand {
  267. display: none; /* removes the ugly default down arrow on select form field in IE11 */
  268. }
  269. .form-control-textarea {
  270. display: block; /* used to eliminate a bottom gap difference between Chrome and IE/FF */
  271. width: 100%;
  272. height: 8rem; /* used instead of html rows to normalize height between Chrome and IE/FF */
  273. padding-top: 1.25rem;
  274. padding-left: 1.3125rem;
  275. border: 1px solid #c4d8dc;
  276. border-radius: 0.25rem;
  277. background-color: #fff;
  278. color: #555;
  279. font: 400 0.875rem/1.75rem "Open Sans", sans-serif;
  280. transition: all 0.2s;
  281. }
  282. .form-control-input:focus,
  283. .form-control-select:focus,
  284. .form-control-textarea:focus {
  285. border: 1px solid #a1a1a1;
  286. outline: none; /* Removes blue border on focus */
  287. }
  288. .form-control-input:hover,
  289. .form-control-select:hover,
  290. .form-control-textarea:hover {
  291. border: 1px solid #a1a1a1;
  292. }
  293. .checkbox {
  294. font: 400 0.75rem/1.25rem "Open Sans", sans-serif;
  295. }
  296. input[type='checkbox'] {
  297. vertical-align: -15%;
  298. margin-right: 0.375rem;
  299. }
  300. /* IE10+ hack to raise checkbox field position compared to the rest of the browsers */
  301. @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  302. input[type='checkbox'] {
  303. vertical-align: -9%;
  304. }
  305. }
  306. .form-control-submit-button {
  307. display: inline-block;
  308. width: 100%;
  309. height: 3.125rem;
  310. border: 1px solid #20a0ff;
  311. border-radius: 1.5rem;
  312. background-color: #20a0ff;
  313. color: #fff;
  314. font: 700 0.875rem/0 "Open Sans", sans-serif;
  315. cursor: pointer;
  316. transition: all 0.2s;
  317. }
  318. .form-control-submit-button:hover {
  319. background-color: transparent;
  320. color: #20a0ff;
  321. }
  322. /* Form Success And Error Message Formatting */
  323. #smsgSubmit.h3.text-center.tada.animated,
  324. #lmsgSubmit.h3.text-center.tada.animated,
  325. #nmsgSubmit.h3.text-center.tada.animated,
  326. #pmsgSubmit.h3.text-center.tada.animated,
  327. #smsgSubmit.h3.text-center,
  328. #lmsgSubmit.h3.text-center,
  329. #nmsgSubmit.h3.text-center,
  330. #pmsgSubmit.h3.text-center {
  331. display: block;
  332. margin-bottom: 0;
  333. color: #555;
  334. font-size: 1.125rem;
  335. line-height: 1rem;
  336. }
  337. .help-block.with-errors .list-unstyled {
  338. color: #555;
  339. font-size: 0.75rem;
  340. line-height: 1.125rem;
  341. text-align: left;
  342. }
  343. .help-block.with-errors ul {
  344. margin-bottom: 0;
  345. }
  346. /* end of form success and error message formatting */
  347. /* Form Success And Error Message Animation - Animate.css */
  348. @-webkit-keyframes tada {
  349. from {
  350. -webkit-transform: scale3d(1, 1, 1);
  351. -ms-transform: scale3d(1, 1, 1);
  352. transform: scale3d(1, 1, 1);
  353. }
  354. 10%, 20% {
  355. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  356. -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  357. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  358. }
  359. 30%, 50%, 70%, 90% {
  360. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  361. -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  362. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  363. }
  364. 40%, 60%, 80% {
  365. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  366. -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  367. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  368. }
  369. to {
  370. -webkit-transform: scale3d(1, 1, 1);
  371. -ms-transform: scale3d(1, 1, 1);
  372. transform: scale3d(1, 1, 1);
  373. }
  374. }
  375. @keyframes tada {
  376. from {
  377. -webkit-transform: scale3d(1, 1, 1);
  378. -ms-transform: scale3d(1, 1, 1);
  379. transform: scale3d(1, 1, 1);
  380. }
  381. 10%, 20% {
  382. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  383. -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  384. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  385. }
  386. 30%, 50%, 70%, 90% {
  387. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  388. -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  389. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  390. }
  391. 40%, 60%, 80% {
  392. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  393. -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  394. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  395. }
  396. to {
  397. -webkit-transform: scale3d(1, 1, 1);
  398. -ms-transform: scale3d(1, 1, 1);
  399. transform: scale3d(1, 1, 1);
  400. }
  401. }
  402. .tada {
  403. -webkit-animation-name: tada;
  404. animation-name: tada;
  405. }
  406. .animated {
  407. -webkit-animation-duration: 1s;
  408. animation-duration: 1s;
  409. -webkit-animation-fill-mode: both;
  410. animation-fill-mode: both;
  411. }
  412. /* end of form success and error message animation - Animate.css */
  413. /* Fade-move Animation For Details Lightbox - Magnific Popup */
  414. /* at start */
  415. .my-mfp-slide-bottom .zoom-anim-dialog {
  416. opacity: 0;
  417. transition: all 0.2s ease-out;
  418. -webkit-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  419. -ms-transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  420. transform: translateY(-1.25rem) perspective(37.5rem) rotateX(10deg);
  421. }
  422. /* animate in */
  423. .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
  424. opacity: 1;
  425. -webkit-transform: translateY(0) perspective(37.5rem) rotateX(0);
  426. -ms-transform: translateY(0) perspective(37.5rem) rotateX(0);
  427. transform: translateY(0) perspective(37.5rem) rotateX(0);
  428. }
  429. /* animate out */
  430. .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
  431. opacity: 0;
  432. -webkit-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  433. -ms-transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  434. transform: translateY(-0.625rem) perspective(37.5rem) rotateX(10deg);
  435. }
  436. /* dark overlay, start state */
  437. .my-mfp-slide-bottom.mfp-bg {
  438. opacity: 0;
  439. transition: opacity 0.2s ease-out;
  440. }
  441. /* animate in */
  442. .my-mfp-slide-bottom.mfp-ready.mfp-bg {
  443. opacity: 0.8;
  444. }
  445. /* animate out */
  446. .my-mfp-slide-bottom.mfp-removing.mfp-bg {
  447. opacity: 0;
  448. }
  449. /* end of fade-move animation for details lightbox - magnific popup */
  450. /* Fade Animation For Image Lightbox - Magnific Popup */
  451. @-webkit-keyframes fadeIn {
  452. from {
  453. opacity: 0;
  454. }
  455. to {
  456. opacity: 1;
  457. }
  458. }
  459. @keyframes fadeIn {
  460. from {
  461. opacity: 0;
  462. }
  463. to {
  464. opacity: 1;
  465. }
  466. }
  467. .fadeIn {
  468. -webkit-animation: fadeIn 0.6s;
  469. animation: fadeIn 0.6s;
  470. }
  471. @-webkit-keyframes fadeOut {
  472. from {
  473. opacity: 1;
  474. }
  475. to {
  476. opacity: 0;
  477. }
  478. }
  479. @keyframes fadeOut {
  480. from {
  481. opacity: 1;
  482. }
  483. to {
  484. opacity: 0;
  485. }
  486. }
  487. .fadeOut {
  488. -webkit-animation: fadeOut 0.8s;
  489. animation: fadeOut 0.8s;
  490. }
  491. /* end of fade animation for image lightbox - magnific popup */
  492. /*************************/
  493. /* 02. Preloader */
  494. /*************************/
  495. .spinner-wrapper {
  496. position: fixed;
  497. z-index: 999999;
  498. top: 0;
  499. right: 0;
  500. bottom: 0;
  501. left: 0;
  502. background: #fff;
  503. }
  504. .spinner {
  505. position: absolute;
  506. top: 50%; /* centers the loading animation vertically one the screen */
  507. left: 50%; /* centers the loading animation horizontally one the screen */
  508. width: 3.75rem;
  509. height: 1.25rem;
  510. margin: -0.625rem 0 0 -1.875rem; /* is width and height divided by two */
  511. text-align: center;
  512. }
  513. .spinner > div {
  514. display: inline-block;
  515. width: 1rem;
  516. height: 1rem;
  517. border-radius: 100%;
  518. background-color: #20a0ff;
  519. -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  520. animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  521. }
  522. .spinner .bounce1 {
  523. -webkit-animation-delay: -0.32s;
  524. animation-delay: -0.32s;
  525. }
  526. .spinner .bounce2 {
  527. -webkit-animation-delay: -0.16s;
  528. animation-delay: -0.16s;
  529. }
  530. @-webkit-keyframes sk-bouncedelay {
  531. 0%, 80%, 100% { -webkit-transform: scale(0); }
  532. 40% { -webkit-transform: scale(1.0); }
  533. }
  534. @keyframes sk-bouncedelay {
  535. 0%, 80%, 100% {
  536. -webkit-transform: scale(0);
  537. -ms-transform: scale(0);
  538. transform: scale(0);
  539. } 40% {
  540. -webkit-transform: scale(1.0);
  541. -ms-transform: scale(1.0);
  542. transform: scale(1.0);
  543. }
  544. }
  545. /**************************/
  546. /* 03. Navigation */
  547. /**************************/
  548. .navbar-custom {
  549. background-color: #20a0ff;
  550. box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
  551. font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
  552. transition: all 0.2s;
  553. }
  554. .navbar-custom .container {
  555. max-width: 87.5rem;
  556. }
  557. .navbar-custom .navbar-brand.logo-image img {
  558. width: 4.4375rem;
  559. height: 1.75rem;
  560. }
  561. .navbar-custom .navbar-brand.logo-text {
  562. font: 700 2rem/1.5rem "Open Sans", sans-serif;
  563. color: #fff;;
  564. text-decoration: none;
  565. }
  566. .navbar-custom .navbar-nav {
  567. margin-top: 0.75rem;
  568. margin-bottom: 0.5rem;
  569. }
  570. .navbar-custom .nav-item .nav-link {
  571. padding: 0.625rem 0.75rem 0.625rem 0.75rem;
  572. color: #f7f5f5;
  573. opacity: 0.8;
  574. text-decoration: none;
  575. transition: all 0.2s ease;
  576. }
  577. .navbar-custom .nav-item .nav-link:hover,
  578. .navbar-custom .nav-item .nav-link.active {
  579. color: #fff;
  580. opacity: 1;
  581. }
  582. /* Dropdown Menu */
  583. .navbar-custom .dropdown:hover > .dropdown-menu {
  584. display: block; /* this makes the dropdown menu stay open while hovering it */
  585. min-width: auto;
  586. animation: fadeDropdown 0.2s; /* required for the fade animation */
  587. }
  588. @keyframes fadeDropdown {
  589. 0% {
  590. opacity: 0;
  591. }
  592. 100% {
  593. opacity: 1;
  594. }
  595. }
  596. .navbar-custom .dropdown-toggle:focus { /* removes dropdown outline on focus */
  597. outline: 0;
  598. }
  599. .navbar-custom .dropdown-menu {
  600. margin-top: 0;
  601. border: none;
  602. border-radius: 0.25rem;
  603. background-color: #20a0ff;
  604. }
  605. .navbar-custom .dropdown-item {
  606. color: #f7f5f5;
  607. opacity: 0.8;
  608. font: 700 0.875rem/0.875rem "Open Sans", sans-serif;
  609. text-decoration: none;
  610. }
  611. .navbar-custom .dropdown-item:hover {
  612. background-color: #20a0ff;
  613. color: #fff;
  614. opacity: 1;
  615. }
  616. .navbar-custom .dropdown-items-divide-hr {
  617. width: 100%;
  618. height: 1px;
  619. margin: 0.75rem auto 0.725rem auto;
  620. border: none;
  621. background-color: #c4d8dc;
  622. opacity: 0.2;
  623. }
  624. /* end of dropdown menu */
  625. .navbar-custom .nav-item .btn-outline-sm {
  626. margin-top: 0.25rem;
  627. margin-bottom: 1.375rem;
  628. margin-left: 0.5rem;
  629. border: 0.125rem solid #fff;
  630. color: #fff;
  631. }
  632. .navbar-custom .nav-item .btn-outline-sm:hover {
  633. background-color: #fff;
  634. color: #20a0ff;
  635. }
  636. .navbar-custom .navbar-toggler {
  637. padding: 0;
  638. border: none;
  639. color: #fff;
  640. font-size: 2rem;
  641. }
  642. .navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-times{
  643. display: none;
  644. }
  645. .navbar-custom button[aria-expanded='false'] .navbar-toggler-awesome.fas.fa-bars{
  646. display: inline-block;
  647. }
  648. .navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-bars{
  649. display: none;
  650. }
  651. .navbar-custom button[aria-expanded='true'] .navbar-toggler-awesome.fas.fa-times{
  652. display: inline-block;
  653. margin-right: 0.125rem;
  654. }
  655. /*********************/
  656. /* 04. Header */
  657. /*********************/
  658. .header {
  659. /*background-color: #20a0ff;*/
  660. height: 100vh;
  661. background-image: url("../images/headBack.jpg");
  662. background-repeat:no-repeat;
  663. }
  664. .header .header-content {
  665. padding-top: 8rem;
  666. padding-bottom: 14.5rem;
  667. text-align: center;
  668. }
  669. .header .header-content .image-z {
  670. color: #fff;
  671. font-size: 18px;
  672. margin: 2rem 0 3rem;
  673. }
  674. .header .header-content .image-z span {
  675. margin: 1.5rem
  676. }
  677. .header .text-container {
  678. margin-bottom: 5rem;
  679. text-align: center;
  680. }
  681. .header h1 {
  682. margin-bottom: 1rem;
  683. color: #fff;
  684. font-size: 2.5rem;
  685. line-height: 3rem;
  686. }
  687. .header .p-large {
  688. margin-bottom: 2rem;
  689. color: #f3f7fd;
  690. }
  691. .header .btn-solid-lg-white {
  692. margin-right: 0.5rem;
  693. margin-bottom: 1.125rem;
  694. margin-left: 0.5rem;
  695. border-color: #f3f7fd;
  696. background-color: #f3f7fd;
  697. color: #20a0ff;
  698. cursor: pointer;
  699. }
  700. .header .btn-solid-lg:hover {
  701. background: transparent;
  702. color: #f3f7fd;
  703. }
  704. .header .btn-solid-lg-white:hover {
  705. background: transparent;
  706. color: #fff!important;
  707. }
  708. .header .btn-outline-lg {
  709. border-color: #f3f7fd;
  710. color: #f3f7fd;
  711. }
  712. .header .btn-outline-lg:hover {
  713. background-color: #f3f7fd;
  714. color: #20a0ff;
  715. }
  716. .header-frame {
  717. margin-top: -1px; /* To remove white margin in FF */
  718. width: 100%;
  719. height: 2.25rem;
  720. }
  721. /*************************/
  722. /* 05. Customers */
  723. /*************************/
  724. .slider-1 {
  725. padding-top: 5rem;
  726. padding-bottom: 3.25rem;
  727. }
  728. .slider-1 .slider-container {
  729. text-align: center;
  730. }
  731. /***************************/
  732. /* 06. Description */
  733. /***************************/
  734. .cards-1 {
  735. padding-top: 3.25rem;
  736. padding-bottom: 3rem;
  737. text-align: center;
  738. }
  739. .cards-1 .h2-heading {
  740. margin-bottom: 3.5rem;
  741. }
  742. .cards-1 .card {
  743. max-width: 21rem;
  744. margin-right: auto;
  745. margin-bottom: 3.5rem;
  746. margin-left: auto;
  747. padding: 0;
  748. border: none;
  749. }
  750. .cards-1 .card-image {
  751. max-width: 12rem;
  752. margin-right: auto;
  753. margin-bottom: 2rem;
  754. margin-left: auto;
  755. }
  756. .card-image .img-fluid {
  757. width: 120px;
  758. }
  759. .cards-1 .card-title {
  760. margin-bottom: 1.5rem;
  761. }
  762. .cards-1 .card-body {
  763. padding: 0;
  764. }
  765. /************************/
  766. /* 07. Features */
  767. /************************/
  768. .tabs {
  769. padding-top: 8rem;
  770. padding-bottom: 8.125rem;
  771. background-color: #f3f7fd;
  772. }
  773. .tabs .h2-heading,
  774. .tabs .p-heading {
  775. text-align: center;
  776. }
  777. .tabs .nav-tabs {
  778. display: block;
  779. margin-bottom: 2.25rem;
  780. border-bottom: none;
  781. }
  782. .tabs .nav-link {
  783. padding: 0.375rem 1rem 0.375rem 1rem;
  784. border: none;
  785. color: #86929b;
  786. font-weight: 700;
  787. font-size: 1.25rem;
  788. line-height: 1.75rem;
  789. text-align: center;
  790. text-decoration: none;
  791. transition: all 0.2s ease;
  792. }
  793. .tabs .nav-link:hover,
  794. .tabs .nav-link.active {
  795. background: transparent;
  796. color: #20a0ff;
  797. }
  798. .tabs .nav-link .fas {
  799. margin-right: 0.625rem;
  800. }
  801. .tabs .image-container {
  802. margin-bottom: 2.75rem;
  803. }
  804. .tabs .list-unstyled .fas {
  805. color: #20a0ff;
  806. font-size: 0.5rem;
  807. line-height: 1.625rem;
  808. }
  809. .tabs .list-unstyled .media-body {
  810. margin-left: 0.625rem;
  811. }
  812. .tabs #tab-1 h3 {
  813. margin-bottom: 0.75rem;
  814. }
  815. .tabs #tab-1 .list-unstyled {
  816. margin-bottom: 1.5rem;
  817. }
  818. .tabs #tab-2 h3 {
  819. margin-bottom: 0.75rem;
  820. }
  821. .tabs #tab-2 .list-unstyled {
  822. margin-bottom: 1.5rem;
  823. }
  824. .tabs #tab-3 h3 {
  825. margin-bottom: 0.75rem;
  826. }
  827. .tabs #tab-3 .list-unstyled {
  828. margin-bottom: 1.5rem;
  829. }
  830. /**********************************/
  831. /* 08. Details Lightboxes */
  832. /**********************************/
  833. .lightbox-basic {
  834. margin: 2.5rem auto;
  835. padding: 2rem 1.5rem 2rem 1.5rem;
  836. border-radius: 0.25rem;
  837. background: #fff;
  838. text-align: left;
  839. }
  840. .lightbox-basic .container {
  841. padding-right: 0;
  842. padding-left: 0;
  843. }
  844. .lightbox-basic .image-container {
  845. max-width: 33.75rem;
  846. margin-right: auto;
  847. margin-bottom: 3rem;
  848. margin-left: auto;
  849. }
  850. .lightbox-basic h3 {
  851. margin-bottom: 0.5rem;
  852. }
  853. .lightbox-basic hr {
  854. width: 2.5rem;
  855. height: 0.125rem;
  856. margin-top: 0;
  857. margin-bottom: 0.875rem;
  858. margin-left: 0;
  859. border: 0;
  860. background-color: #20a0ff;
  861. text-align: left;
  862. }
  863. .lightbox-basic h4 {
  864. margin-bottom: 1rem;
  865. }
  866. .lightbox-basic .list-unstyled .fas {
  867. color:#20a0ff;
  868. font-size: 0.5rem;
  869. line-height: 1.625rem;
  870. }
  871. .lightbox-basic .list-unstyled .media-body {
  872. margin-left: 0.625rem;
  873. }
  874. .lightbox-basic .btn-outline-reg,
  875. .lightbox-basic .btn-solid-reg {
  876. margin-top: 0.75rem;
  877. }
  878. /* Signup Button */
  879. .lightbox-basic .btn-solid-reg.mfp-close {
  880. position: relative;
  881. width: auto;
  882. height: auto;
  883. color: #fff;
  884. opacity: 1;
  885. }
  886. .lightbox-basic .btn-solid-reg.mfp-close:hover {
  887. color: #20a0ff;
  888. }
  889. /* end of signup Button */
  890. /* Back Button */
  891. .lightbox-basic a.mfp-close.as-button {
  892. position: relative;
  893. width: auto;
  894. height: auto;
  895. margin-left: 0.375rem;
  896. color: #20a0ff;
  897. opacity: 1;
  898. }
  899. .lightbox-basic a.mfp-close.as-button:hover {
  900. color: #fff;
  901. }
  902. /* end of back button */
  903. .lightbox-basic button.mfp-close.x-button {
  904. position: absolute;
  905. top: -0.125rem;
  906. right: -0.125rem;
  907. width: 2.75rem;
  908. height: 2.75rem;
  909. color: #707984;
  910. }
  911. /***********************/
  912. /* 09. Details */
  913. /***********************/
  914. .basic-1 {
  915. padding-top: 7.5rem;
  916. padding-bottom: 8rem;
  917. }
  918. .basic-1 .text-container {
  919. margin-bottom: 3.75rem;
  920. }
  921. .basic-1 .list-unstyled {
  922. margin-bottom: 1.375rem;
  923. }
  924. .basic-1 .list-unstyled .fas {
  925. color: #20a0ff;
  926. font-size: 0.5rem;
  927. line-height: 1.625rem;
  928. }
  929. .basic-1 .list-unstyled .media-body {
  930. margin-left: 0.625rem;
  931. }
  932. /*********************/
  933. /* 10. Video */
  934. /*********************/
  935. .basic-2 {
  936. padding-top: 8rem;
  937. padding-bottom: 6.75rem;
  938. background-color: #f3f7fd;
  939. text-align: center;
  940. }
  941. .basic-2 .image-container {
  942. margin-bottom: 2rem;
  943. }
  944. .basic-2 .image-container img {
  945. border-radius: 0.75rem;
  946. }
  947. .basic-2 .video-wrapper {
  948. position: relative;
  949. }
  950. /* Video Play Button */
  951. .basic-2 .video-play-button {
  952. position: absolute;
  953. z-index: 10;
  954. top: 50%;
  955. left: 50%;
  956. display: block;
  957. box-sizing: content-box;
  958. width: 2rem;
  959. height: 2.75rem;
  960. padding: 1.125rem 1.25rem 1.125rem 1.75rem;
  961. border-radius: 50%;
  962. -webkit-transform: translateX(-50%) translateY(-50%);
  963. -ms-transform: translateX(-50%) translateY(-50%);
  964. transform: translateX(-50%) translateY(-50%);
  965. }
  966. .basic-2 .video-play-button:before {
  967. content: "";
  968. position: absolute;
  969. z-index: 0;
  970. top: 50%;
  971. left: 50%;
  972. display: block;
  973. width: 4.75rem;
  974. height: 4.75rem;
  975. border-radius: 50%;
  976. background: #20a0ff;
  977. animation: pulse-border 1500ms ease-out infinite;
  978. -webkit-transform: translateX(-50%) translateY(-50%);
  979. -ms-transform: translateX(-50%) translateY(-50%);
  980. transform: translateX(-50%) translateY(-50%);
  981. }
  982. .basic-2 .video-play-button:after {
  983. content: "";
  984. position: absolute;
  985. z-index: 1;
  986. top: 50%;
  987. left: 50%;
  988. display: block;
  989. width: 4.375rem;
  990. height: 4.375rem;
  991. border-radius: 50%;
  992. background: #20a0ff;
  993. transition: all 200ms;
  994. -webkit-transform: translateX(-50%) translateY(-50%);
  995. -ms-transform: translateX(-50%) translateY(-50%);
  996. transform: translateX(-50%) translateY(-50%);
  997. }
  998. .basic-2 .video-play-button span {
  999. position: relative;
  1000. display: block;
  1001. z-index: 3;
  1002. top: 0.375rem;
  1003. left: 0.25rem;
  1004. width: 0;
  1005. height: 0;
  1006. border-left: 1.625rem solid #fff;
  1007. border-top: 1rem solid transparent;
  1008. border-bottom: 1rem solid transparent;
  1009. }
  1010. @keyframes pulse-border {
  1011. 0% {
  1012. transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  1013. opacity: 1;
  1014. }
  1015. 100% {
  1016. transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
  1017. opacity: 0;
  1018. }
  1019. }
  1020. /* end of video play button */
  1021. .basic-2 .p-heading {
  1022. margin-bottom: 1rem;
  1023. }
  1024. /***********************/
  1025. /* 11. Pricing */
  1026. /***********************/
  1027. .cards-2 {
  1028. padding-top: 7.875rem;
  1029. padding-bottom: 2.25rem;
  1030. background-color: #f3f7fd;
  1031. text-align: center;
  1032. }
  1033. .cards-2 .h2-heading {
  1034. margin-bottom: 3.75rem;
  1035. }
  1036. .cards-2 .card {
  1037. display: block;
  1038. max-width: 19rem;
  1039. margin-right: auto;
  1040. margin-bottom: 3rem;
  1041. margin-left: auto;
  1042. border: 1px solid #ccd3df;
  1043. border-radius: 0.375rem;
  1044. }
  1045. .cards-2 .card .card-body {
  1046. padding: 2.5rem 2rem 2.75rem 2em;
  1047. }
  1048. .cards-2 .card .card-title {
  1049. margin-bottom: 0.5rem;
  1050. color: #20a0ff;
  1051. font: 700 1.125rem/1.5rem "Open Sans", sans-serif;
  1052. }
  1053. .cards-2 .card .price .currency {
  1054. margin-right: 0.25rem;
  1055. color: #434c54;
  1056. font-weight: 700;
  1057. font-size: 1.5rem;
  1058. vertical-align: 40%;
  1059. }
  1060. .cards-2 .card .price .value {
  1061. color: #434c54;
  1062. font: 700 2.25rem/3.5rem "Open Sans", sans-serif;
  1063. text-align: center;
  1064. }
  1065. .cards-2 .card .frequency {
  1066. font-size: 0.875rem;
  1067. }
  1068. .cards-2 .card .divider {
  1069. height: 1px;
  1070. margin-top: 1.75rem;
  1071. margin-bottom: 2rem;
  1072. border: none;
  1073. background-color: #ccd3df;
  1074. }
  1075. .cards-2 .card .list-unstyled {
  1076. margin-top: 1.875rem;
  1077. margin-bottom: 1.625rem;
  1078. text-align: left;
  1079. }
  1080. .cards-2 .card .list-unstyled .media {
  1081. margin-bottom: 0.5rem;
  1082. }
  1083. .cards-2 .card .list-unstyled .fas {
  1084. color: #20a0ff;
  1085. font-size: 0.875rem;
  1086. line-height: 1.625rem;
  1087. }
  1088. .cards-2 .card .list-unstyled .fas.fa-times {
  1089. margin-left: 0.1875rem;
  1090. margin-right: 0.125rem;
  1091. color: #555;
  1092. }
  1093. .cards-2 .card .list-unstyled .media-body {
  1094. margin-left: 0.625rem;
  1095. vertical-align: middle;
  1096. }
  1097. /****************************/
  1098. /* 12. Testimonials */
  1099. /****************************/
  1100. .slider-2 {
  1101. padding-top: 2.75rem;
  1102. padding-bottom: 4rem;
  1103. }
  1104. .slider-2 .slider-container {
  1105. position: relative;
  1106. }
  1107. .slider-2 .swiper-container {
  1108. position: static;
  1109. width: 82%;
  1110. text-align: center;
  1111. }
  1112. .slider-2 .image-wrapper {
  1113. width: 6rem;
  1114. margin-right: auto;
  1115. margin-bottom: 1rem;
  1116. margin-left: auto;
  1117. }
  1118. .slider-2 .image-wrapper img {
  1119. border-radius: 50%;
  1120. }
  1121. .slider-2 .testimonial-text {
  1122. margin-bottom: 0.5rem;
  1123. }
  1124. .slider-2 .testimonial-author {
  1125. color: #333;
  1126. }
  1127. .slider-2 .swiper-button-prev,
  1128. .slider-2 .swiper-button-next {
  1129. width: 1.125rem;
  1130. }
  1131. .slider-2 .swiper-button-prev:focus,
  1132. .slider-2 .swiper-button-next:focus {
  1133. /* even if you can't see it chrome you can see it on mobile device */
  1134. outline: none;
  1135. }
  1136. .slider-2 .swiper-button-prev {
  1137. left: -0.375rem;
  1138. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
  1139. background-size: 1.125rem 1.75rem;
  1140. }
  1141. .slider-2 .swiper-button-next {
  1142. right: -0.375rem;
  1143. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23505c67'%2F%3E%3C%2Fsvg%3E");
  1144. background-size: 1.125rem 1.75rem;
  1145. }
  1146. /**************************/
  1147. /* 13. Newsletter */
  1148. /**************************/
  1149. .form {
  1150. padding-top: 4rem;
  1151. padding-bottom: 6rem;
  1152. }
  1153. .form .text-container {
  1154. margin-bottom: 3.5rem;
  1155. padding: 3.5rem 1rem 2.5rem 1rem;
  1156. border-radius: 0.5rem;
  1157. background-color: #f3f7fd;
  1158. }
  1159. .form h2 {
  1160. margin-bottom: 2.75rem;
  1161. text-align: center;
  1162. }
  1163. .form .icon-container {
  1164. text-align: center;
  1165. }
  1166. .form .fa-stack {
  1167. width: 2em;
  1168. margin-bottom: 0.75rem;
  1169. margin-right: 0.375rem;
  1170. font-size: 1.5rem;
  1171. }
  1172. .form .fa-stack .fa-stack-1x {
  1173. color: #fff;
  1174. transition: all 0.2s ease;
  1175. }
  1176. .form .fa-stack .fa-stack-2x {
  1177. color: #20a0ff;
  1178. transition: all 0.2s ease;
  1179. }
  1180. .form .fa-stack:hover .fa-stack-1x {
  1181. color: #20a0ff;
  1182. }
  1183. .form .fa-stack:hover .fa-stack-2x {
  1184. color: #f3f7fd;
  1185. }
  1186. /**********************/
  1187. /* 14. Footer */
  1188. /**********************/
  1189. .footer-frame {
  1190. width: 100%;
  1191. height: 1.5rem;
  1192. }
  1193. .footer {
  1194. padding-top: 3rem;
  1195. padding-bottom: 0.5rem;
  1196. background-color: #20a0ff;
  1197. }
  1198. .footer .footer-col {
  1199. margin-bottom: 2.25rem;
  1200. }
  1201. .footer h4 {
  1202. margin-bottom: 0.625rem;
  1203. color: #fff;
  1204. }
  1205. .footer .list-unstyled,
  1206. .footer p {
  1207. color: #f3f7fd;
  1208. }
  1209. .footer .footer-col.middle .list-unstyled .fas {
  1210. color: #fff;
  1211. font-size: 0.5rem;
  1212. line-height: 1.5rem;
  1213. }
  1214. .footer .footer-col.middle .list-unstyled .media-body {
  1215. margin-left: 0.5rem;
  1216. }
  1217. .footer .footer-col.last .list-unstyled .fas {
  1218. color: #fff;
  1219. font-size: 0.875rem;
  1220. line-height: 1.5rem;
  1221. }
  1222. .footer .footer-col.last .list-unstyled .media-body {
  1223. margin-left: 0.625rem;
  1224. }
  1225. .footer .footer-col.last .list-unstyled .fas.fa-globe {
  1226. margin-left: 1rem;
  1227. margin-right: 0.625rem;
  1228. }
  1229. /*************************/
  1230. /* 15. Copyright */
  1231. /*************************/
  1232. .copyright {
  1233. padding-top: 1rem;
  1234. padding-bottom: 0.375rem;
  1235. background-color: #20a0ff;
  1236. text-align: center;
  1237. }
  1238. .copyright .p-small {
  1239. padding-top: 1.375rem;
  1240. border-top: 1px solid #718ad1;
  1241. color: #fff;
  1242. }
  1243. .copyright a {
  1244. color: #96a8da;
  1245. }
  1246. /**********************************/
  1247. /* 16. Back To Top Button */
  1248. /**********************************/
  1249. a.back-to-top {
  1250. position: fixed;
  1251. z-index: 999;
  1252. right: 0.75rem;
  1253. bottom: 0.75rem;
  1254. display: none;
  1255. width: 2.625rem;
  1256. height: 2.625rem;
  1257. border-radius: 1.875rem;
  1258. background: #2092D9 url("../images/up-arrow.png") no-repeat center 47%;
  1259. background-size: 1.125rem 1.125rem;
  1260. text-indent: -9999px;
  1261. }
  1262. a:hover.back-to-top {
  1263. background-color: #2082D9;
  1264. }
  1265. /***************************/
  1266. /* 17. Extra Pages */
  1267. /***************************/
  1268. .ex-header {
  1269. padding-top: 8rem;
  1270. padding-bottom: 5rem;
  1271. background-color: #20a0ff;
  1272. text-align: center;
  1273. }
  1274. .ex-header h1 {
  1275. color: #fff;
  1276. }
  1277. .ex-basic-1 {
  1278. padding-top: 2rem;
  1279. padding-bottom: 0.875rem;
  1280. background-color: #f3f7fd;
  1281. }
  1282. .ex-basic-1 .breadcrumbs {
  1283. margin-bottom: 1.125rem;
  1284. }
  1285. .ex-basic-1 .breadcrumbs .fa {
  1286. margin-right: 0.5rem;
  1287. margin-left: 0.625rem;
  1288. }
  1289. .ex-basic-2 {
  1290. padding-top: 4.75rem;
  1291. padding-bottom: 4rem;
  1292. }
  1293. .ex-basic-2 h3 {
  1294. margin-bottom: 1rem;
  1295. }
  1296. .ex-basic-2 .text-container {
  1297. margin-bottom: 3.625rem;
  1298. }
  1299. .ex-basic-2 .text-container.last {
  1300. margin-bottom: 0;
  1301. }
  1302. .ex-basic-2 .text-container.dark {
  1303. padding: 1.625rem 1.5rem 0.75rem 2rem;
  1304. background-color: #f3f7fd;
  1305. }
  1306. .ex-basic-2 .image-container-large {
  1307. margin-bottom: 4rem;
  1308. }
  1309. .ex-basic-2 .image-container-large img {
  1310. border-radius: 0.25rem;
  1311. }
  1312. .ex-basic-2 .image-container-small img {
  1313. border-radius: 0.25rem;
  1314. }
  1315. .ex-basic-2 .list-unstyled .fas {
  1316. color: #20a0ff;
  1317. font-size: 0.5rem;
  1318. line-height: 1.625rem;
  1319. }
  1320. .ex-basic-2 .list-unstyled .media-body {
  1321. margin-left: 0.625rem;
  1322. }
  1323. .ex-basic-2 .form-container {
  1324. margin-top: 3rem;
  1325. }
  1326. .ex-basic-2 .btn-outline-reg {
  1327. margin-top: 1.75rem;
  1328. }
  1329. .ex-footer-frame {
  1330. width: 100%;
  1331. height: 2.75rem;
  1332. background-color: #f3f7fd;
  1333. }
  1334. /****************************************/
  1335. /* 18. Sign Up and Log In Pages */
  1336. /****************************************/
  1337. .ex-2-header {
  1338. padding-top: 9rem;
  1339. background-color: #20a0ff;
  1340. text-align: center;
  1341. min-height: 100vh;
  1342. }
  1343. .ex-2-header h1,
  1344. .ex-2-header p {
  1345. color: #fff;
  1346. }
  1347. .ex-2-header p {
  1348. max-width: 24rem;
  1349. margin-right: auto;
  1350. margin-bottom: 2.5rem;
  1351. margin-left: auto;
  1352. }
  1353. .ex-2-header .form-container {
  1354. max-width: 26rem;
  1355. margin-right: auto;
  1356. margin-left: auto;
  1357. padding: 2.25rem 1.25rem 1.25rem 1.25rem;
  1358. border-radius: 0.5rem;
  1359. background-color: #f3f7fd;
  1360. }
  1361. .ex-2-header .checkbox {
  1362. text-align: left;
  1363. }
  1364. /*****************************/
  1365. /* 19. Media Queries */
  1366. /*****************************/
  1367. /* Min-width width 768px */
  1368. @media (min-width: 768px) {
  1369. /* General Styles */
  1370. .p-heading {
  1371. width: 85%;
  1372. margin-right: auto;
  1373. margin-left: auto;
  1374. }
  1375. .h2-heading {
  1376. width: 80%;
  1377. margin-right: auto;
  1378. margin-left: auto;
  1379. }
  1380. /* end of general styles */
  1381. /* Header */
  1382. .header .text-container {
  1383. margin-bottom: 4rem;
  1384. }
  1385. .header h1 {
  1386. font-size: 3.5rem;
  1387. line-height: 4.125rem;
  1388. }
  1389. .header .btn-solid-lg {
  1390. margin-bottom: 0;
  1391. margin-left: 0;
  1392. }
  1393. .header-frame {
  1394. height: 5.5rem;
  1395. }
  1396. /* end of header */
  1397. /* Testimonials */
  1398. .slider-2 .swiper-button-prev {
  1399. width: 1.375rem;
  1400. background-size: 1.375rem 2.125rem;
  1401. }
  1402. .slider-2 .swiper-button-next {
  1403. width: 1.375rem;
  1404. background-size: 1.375rem 2.125rem;
  1405. }
  1406. /* end of testimonials */
  1407. /* Newsletter */
  1408. .form .text-container {
  1409. padding: 4rem 2.5rem 3rem 2.5rem;
  1410. }
  1411. .form form {
  1412. margin-right: 4rem;
  1413. margin-left: 4rem;
  1414. }
  1415. /* end of newsletter */
  1416. /* Footer */
  1417. .footer-frame {
  1418. height: 5rem;
  1419. }
  1420. /* end of footer */
  1421. /* Extra Pages */
  1422. .ex-header {
  1423. padding-top: 11rem;
  1424. padding-bottom: 9rem;
  1425. }
  1426. .ex-basic-2 .text-container.dark {
  1427. padding: 2.5rem 3rem 2rem 3rem;
  1428. }
  1429. .ex-basic-2 .form-container {
  1430. margin-top: 0;
  1431. }
  1432. /* end of extra pages */
  1433. /* Sign Up And Log In Pages */
  1434. .ex-2-header {
  1435. padding-top: 11rem;
  1436. }
  1437. .ex-2-header .form-container {
  1438. padding: 2.25rem 1.75rem 1.25rem 1.75rem;
  1439. }
  1440. /* end of sign up and log in pages */
  1441. }
  1442. /* end of min-width width 768px */
  1443. /* Min-width width 992px */
  1444. @media (min-width: 992px) {
  1445. /* Navigation */
  1446. .navbar-custom {
  1447. padding: 2.125rem 1.5rem 2.125rem 2rem;
  1448. background: transparent;
  1449. box-shadow: none;
  1450. }
  1451. .navbar-custom .navbar-nav {
  1452. margin-top: 0;
  1453. margin-bottom: 0;
  1454. }
  1455. .navbar-custom .nav-item .nav-link {
  1456. padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  1457. }
  1458. .navbar-custom .nav-item .nav-link:hover,
  1459. .navbar-custom .nav-item .nav-link.active {
  1460. opacity: 1;
  1461. }
  1462. .navbar-custom.top-nav-collapse {
  1463. padding: 0.5rem 1.5rem 0.5rem 2rem;
  1464. background-color: #20a0ff;
  1465. box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
  1466. }
  1467. .navbar-custom.top-nav-collapse .nav-item .nav-link:hover,
  1468. .navbar-custom.top-nav-collapse .nav-item .nav-link.active {
  1469. color: #fff;
  1470. }
  1471. .navbar-custom .dropdown-menu {
  1472. padding-top: 1rem;
  1473. padding-bottom: 1rem;
  1474. border-top: 0.25rem solid rgba(0, 0, 0, 0);
  1475. border-radius: 0.25rem;
  1476. }
  1477. .navbar-custom.top-nav-collapse .dropdown-menu {
  1478. border-top: 0.25rem solid rgba(0, 0, 0, 0);
  1479. box-shadow: 0 0.375rem 0.375rem 0 rgba(0, 0, 0, 0.02);
  1480. }
  1481. .navbar-custom .dropdown-item {
  1482. padding-top: 0.25rem;
  1483. padding-bottom: 0.25rem;
  1484. }
  1485. .navbar-custom .dropdown-items-divide-hr {
  1486. width: 84%;
  1487. }
  1488. .navbar-custom .nav-item .btn-outline-sm {
  1489. margin-top: 0;
  1490. margin-bottom: 0;
  1491. margin-left: 1rem;
  1492. }
  1493. /* end of navigation */
  1494. /* General Styles */
  1495. .p-heading {
  1496. width: 65%;
  1497. }
  1498. .h2-heading {
  1499. width: 60%;
  1500. }
  1501. /* end of general styles */
  1502. /* Header */
  1503. .header .header-content {
  1504. text-align: left;
  1505. }
  1506. .header .text-container {
  1507. margin-top: 4rem;
  1508. margin-bottom: 0;
  1509. }
  1510. .header .image-container {
  1511. position: relative;
  1512. margin-top: 3rem;
  1513. }
  1514. .header .image-container .img-wrapper {
  1515. position: absolute;
  1516. display: block;
  1517. width: 470px;
  1518. }
  1519. .header-frame {
  1520. height: 8rem;
  1521. }
  1522. /* end of header */
  1523. /* Description */
  1524. .cards-1 .card {
  1525. display: inline-block;
  1526. width: 17rem;
  1527. max-width: 100%;
  1528. margin-right: 1rem;
  1529. margin-left: 1rem;
  1530. vertical-align: top;
  1531. }
  1532. .cards-1 .scenes {
  1533. display: inline-block;
  1534. width: 20rem;
  1535. max-width: 100%;
  1536. margin-right: 1rem;
  1537. margin-left: 1rem;
  1538. vertical-align: top;
  1539. }
  1540. .cards-1 .card-image {
  1541. width: 9rem;
  1542. }
  1543. /* end of description */
  1544. /* Features */
  1545. .tabs .nav-tabs {
  1546. display: flex;
  1547. justify-content: center;
  1548. margin-bottom: 2.75rem;
  1549. }
  1550. .tabs .nav-link {
  1551. padding-right: 1.25rem;
  1552. padding-left: 1.25rem;
  1553. border-bottom: 2px solid rgb(202, 202, 202);
  1554. }
  1555. .tabs .nav-link:hover,
  1556. .tabs .nav-link.active {
  1557. border-bottom: 2px solid #20a0ff;
  1558. }
  1559. .tabs .image-container {
  1560. margin-bottom: 0;
  1561. }
  1562. /* end of features */
  1563. /* Details Lightboxes */
  1564. .lightbox-basic {
  1565. max-width: 62.5rem;
  1566. padding: 2.5rem 2.5rem 2.5rem 2.5rem;
  1567. }
  1568. .lightbox-basic .image-container {
  1569. max-width: 100%;
  1570. margin-right: 2rem;
  1571. margin-bottom: 0;
  1572. margin-left: 0.5rem;
  1573. }
  1574. .lightbox-basic h3 {
  1575. margin-top: 0.5rem;
  1576. }
  1577. /* end of details lightboxes */
  1578. /* Details */
  1579. .basic-1 {
  1580. padding-top: 8rem;
  1581. }
  1582. .basic-1 .text-container {
  1583. margin-bottom: 0;
  1584. }
  1585. /* end of details */
  1586. /* Video */
  1587. .basic-2 .image-container {
  1588. max-width: 53.125rem;
  1589. margin-right: auto;
  1590. margin-left: auto;
  1591. }
  1592. .basic-2 p {
  1593. width: 65%;
  1594. margin-right: auto;
  1595. margin-left: auto;
  1596. }
  1597. /* end of video */
  1598. /* Pricing */
  1599. .cards-2 .card {
  1600. display: inline-block;
  1601. margin-right: 0.5rem;
  1602. margin-left: 0.5rem;
  1603. vertical-align: top;
  1604. }
  1605. /* end of pricing */
  1606. /* Testimonials */
  1607. .slider-2 .swiper-container {
  1608. width: 92%;
  1609. text-align: left;
  1610. }
  1611. .slider-2 .image-wrapper {
  1612. float: left;
  1613. width: 10rem;
  1614. margin-bottom: 0;
  1615. }
  1616. .slider-2 .text-wrapper {
  1617. max-width: 100%;
  1618. margin-top: 1.25rem;
  1619. margin-left: 13rem;
  1620. }
  1621. .slider-2 .swiper-button-prev {
  1622. left: -0.75rem;
  1623. }
  1624. .slider-2 .swiper-button-next {
  1625. right: -0.75rem;
  1626. }
  1627. /* end of testimonials */
  1628. /* Newsletter */
  1629. .form .text-container {
  1630. width: 55rem;
  1631. margin-right: auto;
  1632. margin-left: auto;
  1633. padding-top: 5rem;
  1634. padding-bottom: 4.5rem;
  1635. }
  1636. .form h2 {
  1637. margin-right: 7rem;
  1638. margin-left: 7rem;
  1639. }
  1640. .form form {
  1641. margin-right: 9rem;
  1642. margin-left: 9rem;
  1643. }
  1644. /* end of newsletter */
  1645. /* Extra Pages */
  1646. .ex-header h1 {
  1647. width: 80%;
  1648. margin-right: auto;
  1649. margin-left: auto;
  1650. }
  1651. .ex-basic-2 {
  1652. padding-bottom: 5rem;
  1653. }
  1654. /* end of extra pages */
  1655. }
  1656. /* end of min-width width 992px */
  1657. /* Min-width width 1200px */
  1658. @media (min-width: 1200px) {
  1659. /* General Styles */
  1660. .h2-heading {
  1661. width: 50%;
  1662. }
  1663. /* end of general styles */
  1664. /* Header */
  1665. .header .header-content {
  1666. padding-top: 9rem;
  1667. padding-bottom: 12.5rem;
  1668. }
  1669. .header .text-container {
  1670. margin-top: 5.5rem;
  1671. margin-right: 0.5rem;
  1672. }
  1673. .header .image-container {
  1674. margin-top: 1rem;
  1675. margin-left: 1.5rem;
  1676. }
  1677. .header .image-container .img-wrapper {
  1678. width: 630px;
  1679. }
  1680. .header-frame {
  1681. height: 9.375rem;
  1682. }
  1683. /* end of header */
  1684. /* Customer */
  1685. .slider-1 .slider-container {
  1686. margin-right: 3rem;
  1687. margin-left: 3rem;
  1688. }
  1689. /* end of customer */
  1690. /* Description */
  1691. .cards-1 .card {
  1692. width: 18.875rem;
  1693. margin-right: 2rem;
  1694. margin-left: 2rem;
  1695. }
  1696. .cards-1 .scenes {
  1697. width: 22.875rem;
  1698. margin-right: 2rem;
  1699. margin-left: 2rem;
  1700. }
  1701. .cards-1 .card-image {
  1702. width: 12.5rem;
  1703. }
  1704. /* end of description */
  1705. /* Features */
  1706. .tabs .image-container {
  1707. margin-right: 1.5rem;
  1708. margin-left: 1rem;
  1709. }
  1710. .tabs .text-container {
  1711. margin-top: 1.5rem;
  1712. margin-right: 1rem;
  1713. margin-left: 1.5rem;
  1714. }
  1715. /* end of features */
  1716. /* Details */
  1717. .basic-1 .image-container {
  1718. margin-right: 1rem;
  1719. margin-left: 1.5rem;
  1720. }
  1721. .basic-1 .text-container {
  1722. margin-top: 1rem;
  1723. margin-right: 1.5rem;
  1724. margin-left: 1rem;
  1725. }
  1726. .basic-1 h2 {
  1727. margin-bottom: 1rem;
  1728. }
  1729. /* end of details */
  1730. /* Pricing */
  1731. .cards-2 .card {
  1732. width: 15.375rem;
  1733. max-width: 100%;
  1734. /*margin-right: 1.75rem;*/
  1735. /*margin-left: 1.75rem;*/
  1736. margin: 0 0.5rem 5rem;
  1737. }
  1738. .cards-2 .card .card-body {
  1739. padding-right: 2.25rem;
  1740. padding-left: 2.25rem;
  1741. }
  1742. /* end of pricing */
  1743. /* Testimonials */
  1744. .slider-2 .slider-container {
  1745. width: 64.125rem;
  1746. margin-right: auto;
  1747. margin-left: auto;
  1748. }
  1749. /* end of testimonials */
  1750. /* Newsletter */
  1751. .form .text-container {
  1752. width: 64.75rem;
  1753. padding-top: 6rem;
  1754. padding-bottom: 5.5rem;
  1755. }
  1756. .form h2 {
  1757. margin-right: 12rem;
  1758. margin-left: 12rem;
  1759. }
  1760. .form form {
  1761. margin-right: 15rem;
  1762. margin-left: 15rem;
  1763. }
  1764. /* end of newsletter */
  1765. /* Footer */
  1766. .footer .footer-col.first {
  1767. margin-right: 1.5rem;
  1768. }
  1769. .footer .footer-col.middle {
  1770. margin-right: 0.75rem;
  1771. margin-left: 0.75rem;
  1772. }
  1773. .footer .footer-col.last {
  1774. margin-left: 1.5rem;
  1775. }
  1776. /* end of footer */
  1777. /* Extra Pages */
  1778. .ex-header h1 {
  1779. width: 60%;
  1780. margin-right: auto;
  1781. margin-left: auto;
  1782. }
  1783. .ex-basic-2 .form-container {
  1784. margin-left: 1.75rem;
  1785. }
  1786. .ex-basic-2 .image-container-small {
  1787. margin-left: 1.75rem;
  1788. }
  1789. /* end of extra pages */
  1790. }
  1791. /* end of min-width width 1200px */
  1792. /* new style start */
  1793. .nav-divider {
  1794. border:1px solid #fff;
  1795. vertical-align: middle;
  1796. }
  1797. .other-item {
  1798. margin-right: 3rem;
  1799. }
  1800. .overload {
  1801. position: relative;
  1802. }
  1803. .overload span {
  1804. color: #20a0ff;
  1805. cursor: pointer;
  1806. }
  1807. .overload .service {
  1808. display: none;
  1809. position: absolute;
  1810. right: 13rem;
  1811. padding: 1rem;
  1812. background: #fff;
  1813. box-shadow: 3px 3px 10px #ccc;
  1814. z-index: 99999999;
  1815. }
  1816. .overload .service img {
  1817. width: 8rem;
  1818. }
  1819. .overload .service p {
  1820. margin-bottom: 0;
  1821. margin: 0.5rem 0;
  1822. }
  1823. .overload .service p:last-child {
  1824. color: #20a0ff;
  1825. }
  1826. .overload:hover .service {
  1827. display: block;
  1828. }
  1829. .overload .service2 {
  1830. display: none;
  1831. position: absolute;
  1832. top: 2.8rem;
  1833. padding: 1rem;
  1834. background: #fff;
  1835. box-shadow: 3px 3px 10px #ccc;
  1836. z-index: 99999999;
  1837. }
  1838. .overload .service2 img {
  1839. width: 8rem;
  1840. }
  1841. .overload .service2 p {
  1842. margin-bottom: 0;
  1843. margin: 0.5rem 0;
  1844. }
  1845. .overload .service2 p:last-child {
  1846. color: #20a0ff;
  1847. }
  1848. .overload:hover .service2 {
  1849. display: block;
  1850. }
  1851. #scenes {
  1852. background: #f3f7fd;
  1853. }
  1854. #scenes .card {
  1855. /*background-color: #f3f7fd;*/
  1856. background-color: #fff;
  1857. padding: 2rem 0;
  1858. border-radius: 20px;
  1859. }
  1860. #scenes .card .card-image .img-fluid {
  1861. width: 4.6rem;
  1862. }
  1863. .cards-1 .scenes {
  1864. text-align: left;
  1865. padding: 1rem 1.2rem;
  1866. background: #f3f7fd;
  1867. border-radius: 10px;
  1868. }
  1869. .cards-1 .scenes .scenes-head {
  1870. color: #20a0ff;
  1871. font-size: 1.2rem;
  1872. margin-bottom: 0.8rem;
  1873. }
  1874. .cards-1 .scenes .scenes-body img {
  1875. float: left;
  1876. width: 4rem;
  1877. margin-right: 0.5rem;
  1878. vertical-align: middle;
  1879. }
  1880. .cards-1 .scenes .scenes-body p {
  1881. font-size: 1rem;
  1882. vertical-align: middle;
  1883. }
  1884. .swiper-slide .img-fluid {
  1885. border: 1px solid #eee;
  1886. }
  1887. #details {
  1888. text-align: center;
  1889. }
  1890. #details .h2-heading {
  1891. margin-bottom: 50px;
  1892. }
  1893. #details .im-de {
  1894. margin: 0 auto;
  1895. }
  1896. #details .img-fluid-de {
  1897. margin:0;
  1898. padding: 0;
  1899. display: inline-block;
  1900. }
  1901. #details .img-fluid-de img {
  1902. width: 13rem;
  1903. max-width: 100%;
  1904. max-height: 6rem;
  1905. border: 1px solid #eeee;
  1906. margin-bottom: 20px;
  1907. }
  1908. #container {
  1909. height: 20rem;
  1910. }
  1911. /**证书**/
  1912. #us_content_cetificate {
  1913. text-align: center;
  1914. margin-top:44px;
  1915. }
  1916. #us_content_cetificate .h2-heading {
  1917. margin-bottom: 50px;
  1918. }
  1919. #us_content_cetificate .im-de {
  1920. margin: 0 auto;
  1921. }
  1922. #us_content_cetificate .img-fluid-de {
  1923. margin:0;
  1924. padding: 0;
  1925. display: inline-block;
  1926. }
  1927. #us_content_cetificate .img-fluid-de img {
  1928. width: 13rem;
  1929. max-width: 100%;
  1930. max-height: 6rem;
  1931. border: 1px solid #eeee;
  1932. margin-bottom: 20px;
  1933. }
  1934. .us_content_cetificate1{
  1935. width: 4px;
  1936. height: 50px;
  1937. background: #d72626;
  1938. float: left;
  1939. }
  1940. .cetificate_gallery {
  1941. padding-top:5px;
  1942. margin: 0 auto;
  1943. width:90%;
  1944. height:300px;
  1945. background: #fff;
  1946. display: grid;
  1947. grid-template-columns: 50% 50% ;
  1948. grid-template-rows: 340px ;
  1949. }
  1950. .cetificate_gallery img {
  1951. width:99%;
  1952. height:99%;
  1953. }
  1954. /* new style end */