sempli-website-lib 7.1.0-beta.2 → 7.1.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/README.md +25 -25
  2. package/assets/fonts/Lato/Lato-Black.ttf +0 -0
  3. package/assets/fonts/Lato/Lato-BlackItalic.ttf +0 -0
  4. package/assets/fonts/Lato/Lato-Bold.ttf +0 -0
  5. package/assets/fonts/Lato/Lato-BoldItalic.ttf +0 -0
  6. package/assets/fonts/Lato/Lato-Hairline.ttf +0 -0
  7. package/assets/fonts/Lato/Lato-HairlineItalic.ttf +0 -0
  8. package/assets/fonts/Lato/Lato-Italic.ttf +0 -0
  9. package/assets/fonts/Lato/Lato-Light.ttf +0 -0
  10. package/assets/fonts/Lato/Lato-LightItalic.ttf +0 -0
  11. package/assets/fonts/Lato/Lato-Regular.ttf +0 -0
  12. package/assets/fonts/Lato/OFL.txt +0 -0
  13. package/assets/interface/documents.svg +136 -136
  14. package/assets/interface/icons/alert-success.svg +17 -17
  15. package/assets/interface/icons/arrow-left.svg +8 -8
  16. package/assets/interface/icons/arrow-right-02.svg +10 -10
  17. package/assets/interface/icons/arrow-right.svg +8 -8
  18. package/assets/interface/icons/basic-check-magenta.svg +1 -1
  19. package/assets/interface/icons/bulb-example.svg +20 -20
  20. package/assets/interface/icons/bulb-tip.svg +32 -32
  21. package/assets/interface/icons/check-green-circle-large.svg +23 -23
  22. package/assets/interface/icons/check-green.svg +16 -16
  23. package/assets/interface/icons/check-purple.svg +20 -20
  24. package/assets/interface/icons/cloud-download.svg +20 -20
  25. package/assets/interface/icons/document-pdf.svg +13 -13
  26. package/assets/interface/icons/document-review.svg +20 -20
  27. package/assets/interface/icons/document-status-approved.svg +21 -21
  28. package/assets/interface/icons/document-status-empty.svg +18 -18
  29. package/assets/interface/icons/document-status-error.svg +23 -23
  30. package/assets/interface/icons/document-status-success.svg +19 -19
  31. package/assets/interface/icons/eye-action.svg +1 -1
  32. package/assets/interface/icons/hand-stop.svg +19 -19
  33. package/assets/interface/icons/happy-01.svg +0 -0
  34. package/assets/interface/icons/happy-02.svg +0 -0
  35. package/assets/interface/icons/happy-03.svg +0 -0
  36. package/assets/interface/icons/happy-04.svg +0 -0
  37. package/assets/interface/icons/happy-05.svg +0 -0
  38. package/assets/interface/icons/heart.svg +13 -13
  39. package/assets/interface/icons/intercom-messenger-icon.svg +1 -1
  40. package/assets/interface/icons/lock-icon.svg +1 -1
  41. package/assets/interface/icons/mail-circle.svg +32 -32
  42. package/assets/interface/icons/mail-edit.svg +20 -20
  43. package/assets/interface/icons/pen-edit.svg +22 -22
  44. package/assets/interface/icons/plus-circle.svg +22 -22
  45. package/assets/interface/icons/question-sign.svg +10 -10
  46. package/assets/interface/icons/shield.svg +31 -31
  47. package/assets/interface/icons/signature-modal-approved.svg +17 -17
  48. package/assets/interface/icons/signature-modal-waiting.svg +23 -23
  49. package/assets/interface/icons/signature-pending.svg +25 -25
  50. package/assets/interface/icons/signature-step-active.svg +19 -19
  51. package/assets/interface/icons/signature-step-completed.svg +19 -19
  52. package/assets/interface/icons/signature-step-default.svg +19 -19
  53. package/assets/interface/icons/skull.svg +23 -23
  54. package/assets/interface/icons/step-incomplete.svg +18 -18
  55. package/assets/interface/icons/trash-delete.svg +20 -20
  56. package/assets/interface/icons/warning-sign.svg +22 -22
  57. package/assets/interface/icons/x-circle.svg +14 -14
  58. package/assets/interface/sempli_2.0/17-dale_superpoderes.jpeg +0 -0
  59. package/assets/interface/sempli_2.0/17-dale_superpoderes.webp +0 -0
  60. package/assets/interface/sempli_2.0/5-seguridad-y-control-min.png +0 -0
  61. package/assets/interface/sempli_2.0/5-seguridad-y-control-min.webp +0 -0
  62. package/assets/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.webp +0 -0
  63. package/assets/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2.webp +0 -0
  64. package/assets/interface/sempli_2.0/credito-a-termino.jpg +0 -0
  65. package/assets/interface/sempli_2.0/credito-a-termino.webp +0 -0
  66. package/assets/interface/sempli_2.0/credito-flexi-sub-img.jpg +0 -0
  67. package/assets/interface/sempli_2.0/credito-flexi-sub-img.webp +0 -0
  68. package/assets/interface/sempli_2.0/dale_superpoderes.jpg +0 -0
  69. package/assets/interface/sempli_2.0/dale_superpoderes.webp +0 -0
  70. package/assets/interface/sempli_2.0/flexi-01.webp +0 -0
  71. package/assets/interface/sempli_2.0/video-hero-main.mp4 +0 -0
  72. package/assets/interface/sempli_2.0/video-main.mp4 +0 -0
  73. package/assets/interface/sempli_2.0/video-main.webm +0 -0
  74. package/esm2022/lib/sempli-website-lib.module.mjs +5 -5
  75. package/esm2022/public-api.mjs +1 -1
  76. package/fesm2022/sempli-website-lib.mjs +4 -4
  77. package/fesm2022/sempli-website-lib.mjs.map +1 -1
  78. package/package.json +1 -1
  79. package/styles/_main.scss +2 -2
  80. package/styles/master-app.scss +17839 -18114
  81. package/styles/master-landing.scss +20644 -20834
  82. package/styles/modules/_functions.scss +37 -37
  83. package/styles/modules/_mixins.scss +68 -68
  84. package/styles/modules/_variables.scss +54 -54
  85. package/styles/partials/_base.scss +277 -277
  86. package/styles/partials/_buttons.scss +446 -453
  87. package/styles/partials/_fonts.scss +83 -83
  88. package/styles/partials/_forms.scss +839 -1107
  89. package/styles/partials/_icons.scss +12 -12
  90. package/styles/partials/_layout.scss +149 -149
  91. package/styles/partials/_modals.scss +254 -254
  92. package/styles/partials/_panels.scss +51 -51
  93. package/styles/partials/_progress-bars.scss +60 -60
  94. package/styles/partials/_tooltips.scss +128 -128
  95. package/styles/partials/_videos.scss +32 -32
  96. package/styles/partials/animations.scss +155 -155
  97. package/styles/partials/app/_blocks.scss +101 -101
  98. package/styles/partials/app/_cards.scss +155 -155
  99. package/styles/partials/app/_general.scss +1193 -1193
  100. package/styles/partials/app/_header.scss +713 -713
  101. package/styles/partials/app/_layout.scss +219 -219
  102. package/styles/partials/app/_my-account.scss +203 -203
  103. package/styles/partials/app/_my-loan-applications.scss +165 -165
  104. package/styles/partials/app/_my-products.scss +1019 -1019
  105. package/styles/partials/app/_signatures.scss +16 -16
  106. package/styles/partials/landing/_footer.scss +234 -234
  107. package/styles/partials/landing/_general.scss +2612 -2527
  108. package/styles/partials/landing/_header.scss +968 -968
  109. package/styles/partials/landing/_hero-wrappers.scss +650 -650
  110. package/styles/vendor/_animate.scss +3 -3
  111. package/styles/vendor/_compass.scss +4 -4
  112. package/styles/vendor/_lemonade.scss +37 -37
  113. package/styles/vendor/_modules_export.scss +11212 -11212
  114. package/styles/vendor/_normalize.scss +341 -341
  115. package/styles/vendor/animation/_animate.scss +31 -31
  116. package/styles/vendor/animation/_core.scss +127 -127
  117. package/styles/vendor/animation/_shared.scss +21 -21
  118. package/styles/vendor/animation/animate/_attention-seekers.scss +151 -151
  119. package/styles/vendor/animation/animate/_bouncing.scss +2 -2
  120. package/styles/vendor/animation/animate/_classes.scss +21 -21
  121. package/styles/vendor/animation/animate/_fading.scss +2 -2
  122. package/styles/vendor/animation/animate/_flippers.scss +87 -87
  123. package/styles/vendor/animation/animate/_lightspeed.scss +23 -23
  124. package/styles/vendor/animation/animate/_rotating.scss +3 -3
  125. package/styles/vendor/animation/animate/_specials.scss +42 -42
  126. package/styles/vendor/animation/animate/bouncing/_bouncing-entrances.scss +68 -68
  127. package/styles/vendor/animation/animate/bouncing/_bouncing-exits.scss +60 -60
  128. package/styles/vendor/animation/animate/fading/_fading-entrances.scss +86 -86
  129. package/styles/vendor/animation/animate/fading/_fading-exits.scss +86 -86
  130. package/styles/vendor/animation/animate/rotating/_rotating-entrances.scss +58 -58
  131. package/styles/vendor/animation/animate/rotating/_rotating-exits.scss +58 -58
  132. package/styles/vendor/compass/_css3.scss +21 -21
  133. package/styles/vendor/compass/_functions.scss +7 -7
  134. package/styles/vendor/compass/_layout.scss +3 -3
  135. package/styles/vendor/compass/_reset-legacy.scss +3 -3
  136. package/styles/vendor/compass/_reset.scss +3 -3
  137. package/styles/vendor/compass/_support.scss +40 -40
  138. package/styles/vendor/compass/_typography.scss +4 -4
  139. package/styles/vendor/compass/_utilities.scss +9 -9
  140. package/styles/vendor/compass/css3/_animation.scss +2 -2
  141. package/styles/vendor/compass/css3/_appearance.scss +16 -16
  142. package/styles/vendor/compass/css3/_background-clip.scss +43 -43
  143. package/styles/vendor/compass/css3/_background-origin.scss +42 -42
  144. package/styles/vendor/compass/css3/_background-size.scss +26 -26
  145. package/styles/vendor/compass/css3/_border-radius.scss +130 -130
  146. package/styles/vendor/compass/css3/_box-shadow.scss +76 -76
  147. package/styles/vendor/compass/css3/_box-sizing.scss +18 -18
  148. package/styles/vendor/compass/css3/_box.scss +110 -110
  149. package/styles/vendor/compass/css3/_columns.scss +157 -157
  150. package/styles/vendor/compass/css3/_filter.scss +24 -24
  151. package/styles/vendor/compass/css3/_flexbox.scss +86 -86
  152. package/styles/vendor/compass/css3/_font-face.scss +48 -48
  153. package/styles/vendor/compass/css3/_hyphenation.scss +77 -77
  154. package/styles/vendor/compass/css3/_images.scss +133 -133
  155. package/styles/vendor/compass/css3/_inline-block.scss +22 -22
  156. package/styles/vendor/compass/css3/_opacity.scss +19 -19
  157. package/styles/vendor/compass/css3/_pie.scss +73 -73
  158. package/styles/vendor/compass/css3/_regions.scss +21 -21
  159. package/styles/vendor/compass/css3/_shared.scss +38 -38
  160. package/styles/vendor/compass/css3/_text-shadow.scss +88 -88
  161. package/styles/vendor/compass/css3/_transform-legacy.scss +87 -87
  162. package/styles/vendor/compass/css3/_transform.scss +598 -598
  163. package/styles/vendor/compass/css3/_transition.scss +222 -222
  164. package/styles/vendor/compass/css3/_user-interface.scss +47 -47
  165. package/styles/vendor/compass/functions/_colors.scss +37 -37
  166. package/styles/vendor/compass/functions/_constants.scss +18 -18
  167. package/styles/vendor/compass/functions/_cross_browser_support.scss +72 -72
  168. package/styles/vendor/compass/functions/_display.scss +36 -36
  169. package/styles/vendor/compass/functions/_font_files.scss +95 -95
  170. package/styles/vendor/compass/functions/_gradient_support.scss +14 -14
  171. package/styles/vendor/compass/functions/_lists.scss +90 -90
  172. package/styles/vendor/compass/layout/_grid-background.scss +178 -178
  173. package/styles/vendor/compass/layout/_sticky-footer.scss +23 -23
  174. package/styles/vendor/compass/layout/_stretching.scss +23 -23
  175. package/styles/vendor/compass/reset/_utilities-legacy.scss +135 -135
  176. package/styles/vendor/compass/reset/_utilities.scss +142 -142
  177. package/styles/vendor/compass/typography/_links.scss +3 -3
  178. package/styles/vendor/compass/typography/_lists.scss +4 -4
  179. package/styles/vendor/compass/typography/_text.scss +4 -4
  180. package/styles/vendor/compass/typography/_vertical_rhythm.scss +229 -229
  181. package/styles/vendor/compass/typography/links/_hover-link.scss +5 -5
  182. package/styles/vendor/compass/typography/links/_link-colors.scss +28 -28
  183. package/styles/vendor/compass/typography/links/_unstyled-link.scss +7 -7
  184. package/styles/vendor/compass/typography/lists/_bullets.scss +34 -34
  185. package/styles/vendor/compass/typography/lists/_horizontal-list.scss +61 -61
  186. package/styles/vendor/compass/typography/lists/_inline-block-list.scss +50 -50
  187. package/styles/vendor/compass/typography/lists/_inline-list.scss +44 -44
  188. package/styles/vendor/compass/typography/text/_ellipsis.scss +25 -25
  189. package/styles/vendor/compass/typography/text/_force-wrap.scss +12 -12
  190. package/styles/vendor/compass/typography/text/_nowrap.scss +2 -2
  191. package/styles/vendor/compass/typography/text/_replacement.scss +68 -68
  192. package/styles/vendor/compass/utilities/_general.scss +6 -6
  193. package/styles/vendor/compass/utilities/_links.scss +5 -5
  194. package/styles/vendor/compass/utilities/_lists.scss +6 -6
  195. package/styles/vendor/compass/utilities/_print.scss +17 -17
  196. package/styles/vendor/compass/utilities/_sprites.scss +2 -2
  197. package/styles/vendor/compass/utilities/_tables.scss +3 -3
  198. package/styles/vendor/compass/utilities/_text.scss +5 -5
  199. package/styles/vendor/compass/utilities/color/_contrast.scss +27 -27
  200. package/styles/vendor/compass/utilities/general/_clearfix.scss +44 -44
  201. package/styles/vendor/compass/utilities/general/_float.scss +29 -29
  202. package/styles/vendor/compass/utilities/general/_hacks.scss +47 -47
  203. package/styles/vendor/compass/utilities/general/_min.scss +16 -16
  204. package/styles/vendor/compass/utilities/general/_reset.scss +2 -2
  205. package/styles/vendor/compass/utilities/general/_tabs.scss +1 -1
  206. package/styles/vendor/compass/utilities/general/_tag-cloud.scss +18 -18
  207. package/styles/vendor/compass/utilities/links/_hover-link.scss +3 -3
  208. package/styles/vendor/compass/utilities/links/_link-colors.scss +3 -3
  209. package/styles/vendor/compass/utilities/links/_unstyled-link.scss +3 -3
  210. package/styles/vendor/compass/utilities/lists/_bullets.scss +3 -3
  211. package/styles/vendor/compass/utilities/lists/_horizontal-list.scss +3 -3
  212. package/styles/vendor/compass/utilities/lists/_inline-block-list.scss +3 -3
  213. package/styles/vendor/compass/utilities/lists/_inline-list.scss +3 -3
  214. package/styles/vendor/compass/utilities/sprites/_base.scss +65 -65
  215. package/styles/vendor/compass/utilities/sprites/_sprite-img.scss +78 -78
  216. package/styles/vendor/compass/utilities/tables/_alternating-rows-and-columns.scss +22 -22
  217. package/styles/vendor/compass/utilities/tables/_borders.scss +33 -33
  218. package/styles/vendor/compass/utilities/tables/_scaffolding.scss +9 -9
  219. package/styles/vendor/compass/utilities/text/_ellipsis.scss +3 -3
  220. package/styles/vendor/compass/utilities/text/_nowrap.scss +3 -3
  221. package/styles/vendor/compass/utilities/text/_replacement.scss +3 -3
  222. package/assets/interface/icons/check-circle.svg +0 -1
  223. package/assets/interface/icons/x-circle-alert.svg +0 -1
  224. package/core/intelli-styles.js +0 -55
@@ -1,2527 +1,2612 @@
1
- /*#############################################################################
2
- # GENERAL CONTENT ELEMENTS
3
- #############################################################################*/
4
-
5
- // Content Box - Content Elements
6
-
7
- .div-border-red {
8
- border: 2px solid red;
9
- }
10
-
11
- .content-box {
12
- .content-subtitle {
13
- color: #00C8E1;
14
- text-transform: uppercase;
15
- }
16
-
17
- .content-description {
18
- color: $color-secondary-dark;
19
- }
20
-
21
- .content-cta {
22
- font-weight: 900;
23
- }
24
-
25
- .content-image {
26
- max-width: 500px;
27
- display: block;
28
- margin: 0 auto;
29
- }
30
- }
31
-
32
- .rounded-image {
33
- border-radius: 50%;
34
- }
35
-
36
- .text-general-description {
37
- color: $color-secondary-dark;
38
- }
39
-
40
- .center-box {
41
- margin: 0 15%;
42
- padding: 60px 0;
43
-
44
- .content-description {
45
- color: $color-secondary-dark;
46
- }
47
- }
48
-
49
- .testimonials-wrapper {
50
- display: flex;
51
- flex-wrap: wrap;
52
- justify-content: space-between;
53
- margin: 50px 0 20px;
54
-
55
- .testimonial-box {
56
- flex: 0 1 calc(100% - 40px);
57
- margin: 0 20px 20px;
58
-
59
- @include responsive($breakpoint-medium) {
60
- flex: 0 1 calc(50% - 40px);
61
- }
62
-
63
- @include responsive($breakpoint-large) {
64
- flex: 0 1 calc(25% - 40px);
65
- margin-bottom: 0;
66
- }
67
- }
68
-
69
- // Elements
70
- p.testimonial {
71
- font-size: rem-calc(14px);
72
- font-style: italic;
73
- opacity: 0.6;
74
- }
75
-
76
- .testimonial-person {
77
- display: grid;
78
- grid-template-columns: 40px 1fr;
79
- grid-column-gap: 15px;
80
-
81
- img.photo {
82
- max-width: 40px;
83
- @include border-radius(100%);
84
- @include box-shadow(
85
- 0 0 0 4px rgba(white,0.1),
86
- 0 0 0 1px rgba(white,1)
87
- );
88
- }
89
-
90
- h6.name {
91
- font-size: rem-calc(14px);
92
- }
93
- }
94
- }
95
-
96
- .logo-list-wrapper {
97
- display: flex;
98
- flex-wrap: wrap;
99
- align-items: center;
100
- align-content: center;
101
- justify-content: center;
102
-
103
- &.title-line {
104
- font-size: 0.8em;
105
- font-weight: 100;
106
- margin-top: 30px;
107
- text-align: center;
108
- position: relative;
109
- z-index: 1;
110
- background: #fff;
111
- padding: 0 15px;
112
-
113
- &:before {
114
- border-top: 1px solid #eeeeee;
115
- content: "";
116
- margin: 0 auto;
117
- position: absolute;
118
- top: 50%;
119
- left: 0;
120
- right: 0;
121
- bottom: 0;
122
- width: 95%;
123
- z-index: -1;
124
- }
125
- span {
126
- background: #fff;
127
- padding: 0 15px;
128
- }
129
-
130
- .line-logo {
131
- background-color: #FFFFFF;
132
- padding-right: 15px;
133
- }
134
- }
135
-
136
- img.allies-logo {
137
- max-width: 80px;
138
- max-height: 60px;
139
- margin: 10px 20px;
140
-
141
- @include responsive($breakpoint-medium) {
142
- max-width: 100px;
143
- max-height: 80px;
144
- margin: 20px 40px;
145
- }
146
-
147
- @include responsive($breakpoint-large) {
148
- max-width: 125px;
149
- max-height: 80px;
150
- }
151
- }
152
-
153
- &.logo-7x {
154
- img.allies-logo {
155
- @include responsive($breakpoint-medium) {
156
- margin: 20px 25px;
157
- }
158
- }
159
- }
160
- }
161
-
162
- .faqs-box {
163
- margin: 0 15%;
164
- padding: 60px 0;
165
-
166
- header {
167
- text-align: center;
168
- margin-bottom: 70px;
169
- }
170
-
171
- ul.faqs {
172
- list-style: none;
173
- padding: 0;
174
- margin: 0;
175
-
176
- li {
177
- margin: 0 0 40px;
178
- @include transition(all 0.3s cubic-bezier(.7, 0, .175, 1) 0s);
179
-
180
- &:last-child {
181
- margin: 0;
182
- }
183
-
184
- &:hover {
185
- @include transform(scale(1.05));
186
- }
187
-
188
- .question {
189
- margin: 0;
190
- }
191
-
192
- .answer {
193
- color: $color-secondary-dark;
194
- margin: 0;
195
- }
196
- }
197
- }
198
- }
199
-
200
- .required-documentation-box {
201
- @include responsive($breakpoint-medium) {
202
- background-image: url("/assets/swl/interface/documents.svg");
203
- background-position: 110% 50%;
204
- background-size: 340px 558px;
205
- background-repeat: no-repeat;
206
- }
207
-
208
- @include responsive($breakpoint-xmedium) {
209
- background-size: 420px 690px;
210
- }
211
-
212
- @include responsive($breakpoint-large) {
213
- background-size: 554px 910px;
214
- }
215
-
216
- .required-documentation-title {
217
- font-size: rem-calc(28px);
218
- margin: 0 0 40px;
219
- }
220
-
221
- ul.required-documentation {
222
- list-style: none;
223
- margin: 0 0 80px;
224
- padding: 0;
225
-
226
- li {
227
- background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
228
- margin-bottom: 40px;
229
- padding-left: 50px;
230
- min-height: 32px;
231
-
232
- &:last-child {
233
- margin-bottom: 0;
234
- }
235
-
236
- .document-title {
237
- font-size: rem-calc(18px);
238
- line-height: 32px;
239
- margin: 0;
240
- }
241
-
242
- .document-description {
243
- font-size: rem-calc(18px);
244
- color: $color-secondary;
245
- }
246
- }
247
- }
248
-
249
- .secure {
250
- margin: 0;
251
-
252
- img {
253
- height: 70px;
254
- margin: 0 10px -25px 0;
255
- }
256
- }
257
- }
258
-
259
-
260
- section.email-confirmation, section.credit-lines, section.sempli-comfama, section.insurance {
261
- ul.confirmation-check-list {
262
- list-style: none;
263
- margin: 0 0 40px;
264
- padding: 0;
265
- font-weight: 100;
266
-
267
- li {
268
- background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
269
- margin-bottom: 40px;
270
- padding-left: 50px;
271
- min-height: 32px;
272
-
273
- &:last-child {
274
- margin-bottom: 0;
275
- }
276
-
277
- .checklist-item {
278
- font-size: rem-calc(18px);
279
- line-height: 32px;
280
- margin: 0;
281
- }
282
- }
283
-
284
- &.basic-check {
285
- li {
286
- background: url("/assets/swl/interface/icons/basic-check.svg") no-repeat 0 0;
287
- margin-bottom: 10px;
288
-
289
- }
290
-
291
- &.magenta {
292
- li {
293
- background: url("/assets/swl/interface/icons/basic-check-magenta.svg") no-repeat 0 0;
294
- }
295
- }
296
- }
297
- }
298
- }
299
-
300
- .contact-us-wrapper {
301
- border-bottom: 1px solid $color-secondary-light;
302
- padding-bottom: 120px;
303
-
304
- img.contact-us-image {
305
- display: block;
306
- max-width: 560px;
307
- margin: 0 auto;
308
- }
309
- }
310
-
311
- .comparison-table-title {
312
- margin-bottom: 80px;
313
- }
314
-
315
- .comparison-table {
316
- // Structural Blocks
317
- .row {
318
- display: grid;
319
- grid-template-columns: 2fr 1fr;
320
-
321
- @include responsive($breakpoint-medium) {
322
- grid-template-columns: 2fr repeat(3, 1fr);
323
- }
324
-
325
- // Turn Grid Items into Flex Containers
326
- // for alignment purposes
327
- > * {
328
- display: flex;
329
- justify-content: center;
330
- align-items: center;
331
- border-bottom: 1px solid rgba(black,0.08);
332
- padding: 12px 10px;
333
- position: relative;
334
- }
335
-
336
- // Row Grid Items
337
-
338
- .item-name {
339
- justify-content: flex-start;
340
- }
341
-
342
- .sempli {
343
- background-color: $color-primary-darker;
344
- color: #ffffff;
345
- }
346
-
347
- .banks {
348
- display: none;
349
- color: $color-secondary;
350
-
351
- @include responsive($breakpoint-medium) {
352
- display: flex;
353
- }
354
- }
355
-
356
- .others {
357
- display: none;
358
- color: $color-secondary;
359
-
360
- @include responsive($breakpoint-medium) {
361
- display: flex;
362
- }
363
- }
364
-
365
- // Even Rows
366
-
367
- &:nth-child(even) {
368
- background-color: rgba(black,0.04);
369
-
370
- .sempli {
371
- background-color: darken($color-primary-darker, 5%);
372
- border-bottom-color: rgba(black,0.2);
373
- }
374
- }
375
-
376
- // Last Child Row
377
-
378
- &:last-child {
379
- .sempli {
380
- &::after {
381
- display: block;
382
- content: "";
383
- background-color: $color-primary-darker;
384
- height: 30px;
385
- width: 100%;
386
- position: absolute;
387
- left: 0;
388
- bottom: 0;
389
- @include border-bottom-radius(5px);
390
- @include transform(translateY(100%));
391
- }
392
- }
393
- }
394
- }
395
-
396
- header {
397
- .sempli {
398
- padding-top: 20px;
399
- padding-bottom: 20px;
400
- @include border-top-radius(5px);
401
- }
402
- }
403
-
404
- // Content elements
405
-
406
- .title {
407
- margin: 0;
408
- text-align: center;
409
- }
410
-
411
- img.icon {
412
- display: block;
413
- }
414
- }
415
-
416
- section.blog-ctas {
417
- .container {
418
- &:first-child {
419
- margin-bottom: 100px;
420
- }
421
- }
422
-
423
- .blog-ctas-title {
424
- br {
425
- display: none;
426
-
427
- @include responsive($breakpoint-xmedium) {
428
- display: block;
429
- }
430
- }
431
- }
432
-
433
- .blog-ctas-subtitle {
434
- br {
435
- display: none;
436
-
437
- @include responsive($breakpoint-xmedium) {
438
- display: block;
439
- }
440
- }
441
- }
442
- }
443
-
444
- // section.how-it-works-props {
445
- // @include background-image(linear-gradient(#f5f6fa, #ffffff));
446
- // }
447
-
448
- section#our-history {
449
- .container {
450
- position: relative;
451
- margin-bottom: 0;
452
- padding: 50px 0;
453
-
454
- &:first-child {
455
- margin-bottom: 100px;
456
- }
457
-
458
- .content-box-col:nth-child(2) {
459
- &::before {
460
- content: "";
461
- display: block;
462
- background-color: lighten($color-secondary-light, 7%);
463
- width: 4px;
464
- height: 100%;
465
- position: absolute;
466
- left: 50%;
467
- top: 0;
468
- @include transform(translateX(-50%));
469
- }
470
-
471
- &::after {
472
- content: "";
473
- display: block;
474
- background-color: lighten($color-secondary-light, 7%);
475
- width: 23px;
476
- height: 23px;
477
- position: absolute;
478
- left: 50%;
479
-
480
- @include border-radius(100%);
481
- @include transform(translate(-50%, -50%));
482
- }
483
- }
484
- }
485
-
486
- .content-image {
487
- max-height: 460px;
488
- max-width: 460px;
489
- @include border-radius(10px);
490
- @include box-shadow(
491
- 0 0 0 1px rgba(white, 0.9),
492
- 0 0 0 8px rgba(black, 0.05)
493
- );
494
- }
495
- }
496
-
497
- section#our-team {
498
- .grid {
499
- .col {
500
- padding: 0 10px;
501
- }
502
- }
503
-
504
- .container {
505
- &:first-child {
506
- margin-bottom: 100px;
507
- }
508
- }
509
-
510
- .team-member {
511
- margin-bottom: 50px;
512
- }
513
-
514
- // Content Elements
515
-
516
- .team-member-photo {
517
- display: block;
518
- margin: 0 auto 20px;
519
- max-width: 100%;
520
- @include border-radius(10px);
521
- @include box-shadow(
522
- 0 0 0 1px rgba(white, 0.9),
523
- 0 0 0 8px rgba(black, 0.05)
524
- );
525
- }
526
-
527
- .team-member-name {
528
- margin: 0 0 3px;
529
- }
530
-
531
- .team-member-job-title {
532
- font-size: rem-calc(12px);
533
- text-transform: uppercase;
534
- margin: 0 0 8px;
535
- }
536
-
537
- .team-member-description {
538
- font-size: rem-calc(14px);
539
- color: $color-secondary;
540
- margin: 0;
541
- }
542
- }
543
-
544
- section#our-clients {
545
- .client {
546
- margin-bottom: 50px;
547
- }
548
- }
549
-
550
- section#our-investors {
551
- .container {
552
- margin-bottom: 80px;
553
- }
554
-
555
- // Content Elements
556
-
557
- .investor-logo {
558
- max-width: 75%;
559
- }
560
-
561
- .investor-description {
562
- color: $color-secondary;
563
- }
564
- }
565
-
566
- section#help-center {
567
- header.help-center-header {
568
- border-bottom: 1px solid $color-secondary-light;
569
- margin-bottom: 40px;
570
- padding-bottom: 40px;
571
- }
572
-
573
- .section-category-group {
574
- margin-bottom: 50px;
575
- }
576
-
577
- .section-category-title {
578
- .centro-de-ayuda.category & {
579
- font-size: rem-calc(26px);
580
- margin: 0 0 30px;
581
- }
582
- }
583
-
584
- .section-category-articles {
585
- padding-left: 20px;
586
-
587
- li {
588
- color: $color-secondary-light;
589
- padding: 5px 0;
590
-
591
- a {
592
- color: $color-text;
593
- white-space: normal;
594
-
595
- &:hover {
596
- color: $color-primary;
597
- }
598
- }
599
-
600
- .centro-de-ayuda.category & {
601
- font-size: rem-calc(18px);
602
- }
603
- }
604
- }
605
-
606
- aside {
607
- display: none;
608
-
609
- @include responsive($breakpoint-medium) {
610
- display: block;
611
- }
612
-
613
- .section-categories {
614
- list-style: none;
615
- padding: 0;
616
- margin: 0;
617
-
618
- li {
619
- margin-bottom: 10px;
620
-
621
- a {
622
- color: $color-secondary-dark;
623
- font-size: rem-calc(18px);
624
-
625
- &:hover {
626
- color: $color-text;
627
- }
628
-
629
- &.active {
630
- color: $color-primary;
631
- }
632
- }
633
- }
634
- }
635
- }
636
-
637
- main {
638
- article {
639
- // font-size: rem-calc(16px);
640
- font-size: 1rem;
641
-
642
- .article-title {
643
- // font-size: rem-calc(34px);
644
- margin: 0 0 30px;
645
- }
646
-
647
- blockquote {
648
- border-left: 3px solid $color-secondary-light;
649
- color: $color-secondary;
650
- margin: 40px 0;
651
- padding-left: 50px;
652
- }
653
-
654
- img {
655
- display: block;
656
- margin: 30px auto;
657
- max-width: 100%;
658
- @include border-radius(10px);
659
- @include box-shadow(
660
- 0 0 0 1px rgba(white, 0.9),
661
- 0 0 0 8px rgba(black, 0.05)
662
- );
663
- }
664
-
665
- .was-this-helpful {
666
- margin: 100px 0;
667
-
668
- ul {
669
- display: flex;
670
- justify-content: center;
671
- align-items: center;
672
- list-style: none;
673
- padding: 0;
674
- margin: 30px 0 0;
675
-
676
- li {
677
- margin: 0 10px;
678
- }
679
- }
680
-
681
- a.satisfaction-option {
682
- display: block;
683
- @include border-radius(100%);
684
-
685
- img.icon {
686
- margin: 0;
687
- @include box-shadow(none);
688
- }
689
-
690
- &:hover, &.rated {
691
- @include box-shadow(0 0 0 5px rgba($color-primary, 0.2));
692
- }
693
- }
694
- }
695
- }
696
- }
697
- }
698
-
699
- section#legal,
700
- section.insurance-details {
701
- aside {
702
- display: none;
703
-
704
- @include responsive($breakpoint-medium) {
705
- display: block;
706
- }
707
-
708
- .categories {
709
- list-style: none;
710
- padding: 0;
711
- margin: 0;
712
-
713
- li {
714
- margin-bottom: 10px;
715
-
716
- a {
717
- color: $color-secondary-dark;
718
- font-size: rem-calc(18px);
719
-
720
- &:hover {
721
- color: $color-text;
722
- }
723
-
724
- &.active {
725
- color: $color-primary;
726
- }
727
- }
728
- }
729
- }
730
- }
731
-
732
- }
733
-
734
- section#in-the-news {
735
- .news-feed {
736
- @include responsive($breakpoint-medium) {
737
- grid-column-gap: 60px;
738
- }
739
- }
740
-
741
- .news-article {
742
- border-bottom: 1px solid $color-secondary-light;
743
- padding-bottom: 30px;
744
- margin-bottom: 40px;
745
- }
746
-
747
- // Content Elements
748
-
749
- img.content-image {
750
- max-width: 100%;
751
- @include border-radius(10px);
752
- @include box-shadow(
753
- 0 0 0 1px rgba(white, 0.9),
754
- 0 0 0 8px rgba(black, 0.05)
755
- );
756
- }
757
-
758
- .news-article-title {
759
- color: $color-text;
760
-
761
- &:hover {
762
- color: $color-primary;
763
- }
764
- }
765
-
766
- .news-article-description {
767
- color: $color-secondary-dark;
768
- }
769
-
770
- .news-article-meta {
771
- font-size: rem-calc(14px);
772
- margin: 0;
773
-
774
- span {
775
- display: inline-block;
776
- margin-right: 10px;
777
- padding-right: 15px;
778
- color: $color-secondary;
779
- position: relative;
780
-
781
- &::after {
782
- content: "";
783
- display: block;
784
- background-color: $color-secondary-light;
785
- height: 5px;
786
- width: 5px;
787
- position: absolute;
788
- right: 0;
789
- top: 50%;
790
- @include transform(translateY(-50%));
791
- @include border-radius(100%);
792
- }
793
-
794
- &:last-child {
795
- margin: 0;
796
- padding: 0;
797
-
798
- &::after {
799
- display: none;
800
- }
801
- }
802
- }
803
- }
804
- }
805
-
806
- section#our-values {
807
- .values-wrapper {
808
- display: grid;
809
- grid-template-columns: 1fr;
810
- grid-row-gap: 40px;
811
-
812
- @include responsive($breakpoint-xmedium) {
813
- grid-template-columns: 1fr 1fr;
814
- grid-column-gap: 40px;
815
- }
816
- }
817
-
818
- .value-box {
819
- background-color: #ffffff;
820
- padding: 40px;
821
- text-align: center;
822
- @include border-radius(5px);
823
- @include box-shadow(4px 4px 25px 0 rgba(black, 0.05));
824
- }
825
-
826
- // Content Elements
827
-
828
- .values-title {
829
- margin-bottom: 50px;
830
- }
831
-
832
- img.value-image {
833
- display: block;
834
- max-width: 160px;
835
- margin: 0 auto 10px;
836
- }
837
-
838
- }
839
-
840
- section#career-opportunities {
841
- header {
842
- margin-bottom: 60px;
843
- }
844
-
845
- .opportunity-feed {
846
- grid-row-gap: 40px;
847
-
848
- .opportunity {
849
- background-color: #ffffff;
850
- padding: 25px 30px;
851
- min-height: 280px;
852
- position: relative;
853
- @include border-radius(5px);
854
- @include box-shadow(4px 4px 25px 0 rgba($color-text, 0.15));
855
-
856
- &:hover {
857
- @include box-shadow(8px 8px 30px 2px rgba($color-text, 0.15));
858
- }
859
- }
860
- }
861
-
862
- // Content Elements
863
-
864
- .opportunity-title {
865
- color: $color-text;
866
- margin: 0;
867
- }
868
-
869
- .opportunity-meta {
870
- color: $color-text;
871
- font-size: rem-calc(14px);
872
- margin: 0;
873
- position: absolute;
874
- bottom: 30px;
875
-
876
- span {
877
- display: inline-block;
878
- margin-right: 10px;
879
- padding-right: 15px;
880
- color: $color-secondary;
881
- position: relative;
882
-
883
- &::after {
884
- content: "";
885
- display: block;
886
- background-color: $color-secondary-light;
887
- height: 5px;
888
- width: 5px;
889
- position: absolute;
890
- right: 0;
891
- top: 50%;
892
- @include transform(translateY(-50%));
893
- @include border-radius(100%);
894
- }
895
-
896
- &:last-child {
897
- margin: 0;
898
- padding: 0;
899
-
900
- &::after {
901
- display: none;
902
- }
903
- }
904
- }
905
- }
906
- }
907
-
908
- .opportunity-type-label {
909
- display: inline-block;
910
- background-color: $color-secondary;
911
- color: #ffffff;
912
- padding: 5px 10px;
913
- margin: 0 0 20px;
914
- @include border-radius(3px);
915
-
916
- &.product {
917
- background-color: #6ceab0;
918
- }
919
-
920
- &.tech {
921
- background-color: #649ef5;
922
- }
923
-
924
- &.operations {
925
- background-color: #b397f7;
926
- }
927
- }
928
-
929
- .hero-description.opportunity-meta {
930
- color: $color-text;
931
- font-size: rem-calc(14px);
932
- margin: 0;
933
- opacity: 1 !important;
934
-
935
- span {
936
- display: inline-block;
937
- margin-right: 10px;
938
- padding-right: 15px;
939
- color: $color-secondary;
940
- position: relative;
941
-
942
- &::after {
943
- content: "";
944
- display: block;
945
- background-color: $color-secondary-light;
946
- height: 5px;
947
- width: 5px;
948
- position: absolute;
949
- right: 0;
950
- top: 50%;
951
- @include transform(translateY(-50%));
952
- @include border-radius(100%);
953
- }
954
-
955
- &:last-child {
956
- margin: 0;
957
- padding: 0;
958
-
959
- &::after {
960
- display: none;
961
- }
962
- }
963
-
964
- &.opportunity-type-label {
965
- color: #ffffff;
966
- font-weight: 400;
967
- padding: 5px 15px;
968
-
969
- &::after {
970
- display: none;
971
- }
972
- }
973
- }
974
- }
975
-
976
- section#referral-program {
977
- .referral-program-title {
978
- font-size: rem-calc(28px);
979
- margin: 0 0 40px;
980
- }
981
-
982
- ul.referral-program-steps {
983
- list-style: none;
984
- margin: 0 0 80px;
985
- padding: 0;
986
-
987
- li {
988
- background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
989
- margin-bottom: 40px;
990
- padding-left: 50px;
991
- min-height: 32px;
992
-
993
- &:last-child {
994
- margin-bottom: 0;
995
- }
996
-
997
- .document-title {
998
- font-size: rem-calc(18px);
999
- line-height: 32px;
1000
- margin: 0;
1001
- }
1002
-
1003
- .document-description {
1004
- font-size: rem-calc(18px);
1005
- color: $color-secondary;
1006
- }
1007
- }
1008
- }
1009
- }
1010
-
1011
- section#why-become-a-referrer {
1012
- header {
1013
- text-align: center;
1014
- margin-bottom: 80px;
1015
- }
1016
-
1017
- ul.why-become-a-referrer {
1018
- display: flex;
1019
- flex-wrap: wrap;
1020
- align-items: center;
1021
- align-content: center;
1022
- justify-content: center;
1023
-
1024
- list-style: none;
1025
- margin: 0;
1026
- padding: 0;
1027
-
1028
- li {
1029
- background-color: #ffffff;
1030
- padding: 40px;
1031
- text-align: center;
1032
- width: calc(33.333% - 20px);
1033
- margin: 0 20px 20px 0;
1034
- @include border-radius(5px);
1035
- @include box-shadow(4px 4px 25px 0 rgba(black, 0.05));
1036
- @include responsive-max($breakpoint-xmedium) {
1037
- width: calc(50% - 20px);
1038
- }
1039
- @include responsive-max($breakpoint-medium) {
1040
- width: 100%;
1041
- margin-right: 0;
1042
- }
1043
- }
1044
- }
1045
- }
1046
-
1047
-
1048
- section.simulators.hero-wrapper {
1049
- background: #fff !important;
1050
- }
1051
-
1052
- section.simulators.simulators-wrapper {
1053
- background-color: #f5f6fa;
1054
- .roi-section-header {
1055
- .section-description {
1056
- color: $color-secondary-dark;
1057
- }
1058
- }
1059
- }
1060
-
1061
- .roi-calculator {
1062
- display: grid;
1063
- grid-template-columns: 1fr;
1064
- background-color: #fff;
1065
- padding: 0;
1066
- @include border-radius(10px);
1067
- @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1068
-
1069
- @include responsive($breakpoint-xmedium) {
1070
- grid-template-columns: 1fr 1fr;
1071
- grid-template-rows: auto auto;
1072
- }
1073
-
1074
- .investment {
1075
- border-bottom: 1px solid $color-secondary-light;
1076
- padding: 20px 40px;
1077
- @include border-top-radius(10px);
1078
-
1079
- @include responsive($breakpoint-xmedium) {
1080
- grid-column: 1 / 3;
1081
- grid-row: 1;
1082
- }
1083
- }
1084
-
1085
- .loan {
1086
- border-right: 1px solid $color-secondary-light;
1087
- padding: 20px 40px;
1088
-
1089
- @include responsive($breakpoint-xmedium) {
1090
- grid-column: 1;
1091
- grid-row: 2;
1092
- }
1093
- }
1094
-
1095
- .roi {
1096
- padding: 20px 40px;
1097
- background-color: rgba($color-secondary-light, 0.1);
1098
- @include border-bottom-right-radius(10px);
1099
-
1100
- @include responsive($breakpoint-xmedium) {
1101
- grid-column: 2;
1102
- grid-row: 2;
1103
- }
1104
- }
1105
- }
1106
-
1107
- .loan-calculator {
1108
- background-color: #fff;
1109
- padding: 0;
1110
- margin-bottom: 30px;
1111
- @include border-radius(10px);
1112
- @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1113
-
1114
- .main-inputs {
1115
- border-bottom: 1px solid $color-secondary-light;
1116
- padding: 20px 40px;
1117
- @include border-top-radius(10px);
1118
- }
1119
- }
1120
-
1121
- .loan-simulation {
1122
- background-color: #fff;
1123
- padding: 20px 40px;
1124
- @include border-radius(10px);
1125
- @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1126
- }
1127
-
1128
- .loan-calculator-panel {
1129
- margin: 30px 0;
1130
-
1131
- h6 {
1132
- font-size: rem-calc(14px);
1133
- font-weight: 400;
1134
- opacity: 0.5;
1135
- margin: 0;
1136
- }
1137
-
1138
- p {
1139
- font-size: rem-calc(16px);
1140
- font-weight: 900;
1141
- margin: 0;
1142
- }
1143
- }
1144
-
1145
- .loan-calculator-table {
1146
- .table-header {
1147
- .table-row {
1148
- border-top: 2px solid $color-secondary;
1149
- border-bottom: 2px solid $color-secondary;
1150
-
1151
- .table-cell {
1152
- color: $color-text;
1153
- font-size: rem-calc(15px);
1154
- font-weight: 900;
1155
- padding: 20px 15px;
1156
- }
1157
- }
1158
- }
1159
-
1160
- .table-footer {
1161
- .table-row {
1162
- border-bottom: none;
1163
-
1164
- .table-cell {
1165
- color: $color-text;
1166
- font-size: rem-calc(15px);
1167
- font-weight: 900;
1168
- }
1169
- }
1170
- }
1171
-
1172
- .table-row {
1173
- display: grid;
1174
- grid-template-columns: 120px repeat(5, 1fr);
1175
- border-bottom: 1px solid $color-secondary-light;
1176
-
1177
- .table-cell {
1178
- color: $color-secondary;
1179
- font-size: rem-calc(13px);
1180
- padding: 15px;
1181
- text-align: center;
1182
-
1183
- &:first-child {
1184
- text-align: left;
1185
- }
1186
-
1187
- &:last-child {
1188
- text-align: right;
1189
- }
1190
- }
1191
-
1192
- &:hover {
1193
- background-color: lighten($color-secondary-light, 15%);
1194
- }
1195
- }
1196
-
1197
- // Cell Specific
1198
-
1199
- .installment-num {
1200
- display: inline-block;
1201
- background-color: lighten($color-secondary, 15%);
1202
- color: $color-text;
1203
- font-weight: 900;
1204
- padding: 1px 6px;
1205
- @include border-radius(4px);
1206
- }
1207
-
1208
- .payment-total {
1209
- color: $color-text;
1210
- font-weight: 900;
1211
- }
1212
-
1213
- // Content Elements
1214
-
1215
- span.payment-amount {
1216
- display: block;
1217
- font-size: rem-calc(15px);
1218
- font-weight: 900;
1219
- }
1220
-
1221
- a.payment {
1222
- img.icon {
1223
- margin: 0 4px -4px 0;
1224
- width: 18px;
1225
- }
1226
- }
1227
- }
1228
-
1229
- ul.results-table {
1230
- list-style: none;
1231
- margin: 0;
1232
- padding: 0;
1233
-
1234
- li {
1235
- margin: 0 0 7px;
1236
- position: relative;
1237
- @include pie-clearfix;
1238
-
1239
- &:last-child {
1240
- margin: 0;
1241
- }
1242
- }
1243
-
1244
- .table-separator {
1245
- border-top: 1px solid $color-secondary-light;
1246
- padding-top: 10px;
1247
- }
1248
-
1249
- .table-total {
1250
- span {
1251
- font-size: rem-calc(22px);
1252
- }
1253
-
1254
- span.results-table-item-value {
1255
- &.positive {
1256
- color: $color-success;
1257
- }
1258
-
1259
- &.negative {
1260
- color: $color-alert;
1261
- }
1262
- }
1263
-
1264
- img.icon.question-sign {
1265
- margin-bottom: 0px;
1266
- }
1267
- }
1268
-
1269
- // SMALL RESULTS
1270
- &.small {
1271
- span {
1272
- font-size: rem-calc(14px);
1273
- }
1274
- }
1275
- }
1276
-
1277
- ul.results-table, label {
1278
- img.icon.question-sign {
1279
- display: inline-block;
1280
- width: 16px;
1281
- margin-bottom: -2px;
1282
- }
1283
- }
1284
-
1285
- span.results-table-item-title {
1286
- font-size: rem-calc(16px);
1287
- font-weight: 900;
1288
- @include float(left);
1289
- }
1290
-
1291
- span.results-table-item-value {
1292
- font-size: rem-calc(16px);
1293
- font-weight: 900;
1294
- @include float(right);
1295
- }
1296
-
1297
- .calculator-wrapper {
1298
- padding: 20px 40px;
1299
- background-color: rgba(255, 255, 255, 1);
1300
- border-radius: 5px;
1301
- box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
1302
- opacity: 0.9;
1303
-
1304
- @include responsive-max($breakpoint-xlarge) {
1305
- margin-right: 40px;
1306
- }
1307
-
1308
- @include responsive-max($breakpoint-xmedium) {
1309
- display: none;
1310
- }
1311
-
1312
- header {
1313
- margin: 0 0 20px;
1314
-
1315
- h1 {
1316
- color: $color-primary;
1317
- font-size: rem-calc(26px);
1318
- font-weight: 900;
1319
- line-height: 36px;
1320
- margin: 0 0 10px;
1321
-
1322
- // @include responsive($breakpoint-medium) {
1323
- // font-size: rem-calc(40px);
1324
- // line-height: 46px;
1325
- // }
1326
- }
1327
-
1328
- p {
1329
- font-size: rem-calc(16px);
1330
- opacity: 0.5;
1331
- margin: 0;
1332
- }
1333
- }
1334
-
1335
- .calc-inputs {
1336
- .grid {
1337
- grid-column-gap: 20px;
1338
- }
1339
- }
1340
-
1341
- .calc-results {
1342
- a.to-simulator {
1343
- display: block;
1344
- font-size: rem-calc(14px);
1345
- margin-top: 20px;
1346
- }
1347
- }
1348
-
1349
- .calc-cta {
1350
- padding: 25px 0 5px;
1351
- }
1352
-
1353
- .footer {
1354
- border-top: 1px solid $color-secondary-light;
1355
- font-size: rem-calc(12px);
1356
- padding-top: 20px;
1357
- }
1358
- }
1359
-
1360
- /*=============== SEMPLI 2.0 ===============*/
1361
- .main {
1362
- overflow: hidden;
1363
- width: 100%;
1364
- margin: 0 auto;
1365
- }
1366
-
1367
- .section-hero-main {
1368
- width: 100%;
1369
- display: flex;
1370
- flex-direction: column;
1371
- margin-top: 70px;
1372
-
1373
- @media screen and (min-width: 769px) {
1374
- flex-direction: row;
1375
- }
1376
-
1377
- @media screen and (max-width: 1023px) {
1378
- margin-top: 56px;
1379
- }
1380
- }
1381
-
1382
- .section-hero-texts {
1383
- width: 100%;
1384
- display: flex;
1385
- align-items: center;
1386
- justify-content: center;
1387
- padding: 20px 20px 20px 40px;
1388
-
1389
- @media screen and (min-width: 769px) {
1390
- width: 50%;
1391
- }
1392
-
1393
- @media screen and (max-width: 768px) {
1394
- padding: 20px;
1395
- }
1396
- }
1397
-
1398
- .section-hero-text {
1399
- width: max-content;
1400
- display: flex;
1401
- flex-direction: column;
1402
- }
1403
-
1404
- .section-hero-img {
1405
- width: 100%;
1406
-
1407
- @media screen and (min-width: 769px) {
1408
- width: 50%;
1409
- }
1410
- }
1411
-
1412
- .border-img {
1413
- border-radius: 0 0 0 0;
1414
-
1415
- @media screen and (min-width: 769px) {
1416
- border-radius: 0 0 0 40%;
1417
- }
1418
- }
1419
-
1420
- .sections-main {
1421
- overflow: hidden;
1422
- max-width: 1280px;
1423
- width: 100%;
1424
- margin: 0 auto;
1425
- }
1426
-
1427
- .hero-trustpilot {
1428
- width: 100%;
1429
- display: flex;
1430
- justify-content: flex-end;
1431
- }
1432
-
1433
- .section-home-first-trustpilot {
1434
- position: absolute;
1435
- display: flex;
1436
- width: 100%;
1437
- margin: -90px 150px -120px 0;
1438
- border-radius: 10px;
1439
- padding: 20px 0px;
1440
- text-align: center;
1441
- background-color: rgba(250, 250, 250, 0.7);
1442
- max-width: 220px;
1443
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
1444
-
1445
- @media screen and (min-width: 1200px) {
1446
- margin: -90px 180px 0 0;
1447
- }
1448
-
1449
- @media screen and (min-width: 1350px) {
1450
- margin: -90px 200px 0 0;
1451
- }
1452
-
1453
- @media screen and (min-width: 1450px) {
1454
- margin: -90px 300px 0 0;
1455
- }
1456
-
1457
- @media screen and (max-width: 995px) {
1458
- margin: -90px 100px 0 0;
1459
- }
1460
-
1461
- @media screen and (max-width: 768px) {
1462
- display: none;
1463
- }
1464
- }
1465
-
1466
- .space-left {
1467
- margin-left: -40px;
1468
- }
1469
-
1470
- .section-home-title {
1471
- font-size: 36px;
1472
- line-height: 1.2em;
1473
- width: 100%;
1474
-
1475
- @media screen and (min-width: 900px) {
1476
- font-size: 34px;
1477
- }
1478
-
1479
- @media screen and (min-width: 1120px) {
1480
- font-size: 36px;
1481
- }
1482
-
1483
- @media screen and (min-width: 1200px) {
1484
- font-size: 38px;
1485
- }
1486
-
1487
- @media screen and (min-width: 1280px) {
1488
- font-size: 40px;
1489
- }
1490
-
1491
- @media screen and (min-width: 1450px) {
1492
- font-size: 44px;
1493
- }
1494
-
1495
- @media screen and (min-width: 1700px) {
1496
- font-size: 48px;
1497
- }
1498
-
1499
- @media screen and (max-width: 995px) {
1500
- font-size: 32px;
1501
- }
1502
-
1503
- @media screen and (max-width: 868px) {
1504
- font-size: 28px;
1505
- }
1506
-
1507
- @media screen and (max-width: 820px) {
1508
- font-size: 18px;
1509
- }
1510
-
1511
- @media screen and (max-width: 768px) {
1512
- font-size: 36px;
1513
- }
1514
-
1515
- @media screen and (max-width: 600px) {
1516
- margin: 0px;
1517
- display: none;
1518
- }
1519
- }
1520
-
1521
- .section-home-title-hide {
1522
- font-size: 36px;
1523
- line-height: 1.2em;
1524
- width: 100%;
1525
- display: none;
1526
-
1527
- @media screen and (max-width: 600px) {
1528
- display: flex;
1529
- margin: 0px;
1530
- }
1531
- }
1532
-
1533
- .section-home-paragrahp {
1534
- font-size: 16px;
1535
- margin-top: 15px;
1536
- width: 100%;
1537
-
1538
- @media screen and (max-width: 600px) {
1539
- width: 100%;
1540
- }
1541
-
1542
- @media screen and (min-width: 769px) {
1543
- width: 70%;
1544
- }
1545
-
1546
- @media screen and (min-width: 900px) {
1547
- width: 100%;
1548
- }
1549
-
1550
- @media screen and (min-width: 1120px) {
1551
- font-size: 18px;
1552
- }
1553
-
1554
- @media screen and (min-width: 1280px) {
1555
- font-size: 20px;
1556
- }
1557
-
1558
- @media screen and (min-width: 1350px) {
1559
- font-size: 22px;
1560
- }
1561
- }
1562
-
1563
- .home-paragraph {
1564
- font-weight: 300;
1565
-
1566
- @media screen and (max-width: 600px) {
1567
- font-weight: 400;
1568
- }
1569
- }
1570
-
1571
- .section-home-cta {
1572
- margin-top: 30px;
1573
- width: 100%;
1574
- display: flex;
1575
- align-items: center;
1576
- gap: 20px;
1577
- flex-wrap: wrap;
1578
-
1579
- @media screen and (max-width: 768px) {
1580
- flex-direction: column;
1581
- }
1582
- }
1583
-
1584
- .cta {
1585
- display: inline-block;
1586
- background: #4335f9;
1587
- color: #fff !important;
1588
- text-decoration: none;
1589
- min-width: 180px;
1590
- padding: 5px 16px;
1591
- border-radius: 30px;
1592
- text-align: center;
1593
- cursor: pointer;
1594
-
1595
- &:hover {
1596
- background: #1414ea;
1597
- color: #fff;
1598
- }
1599
- }
1600
-
1601
- .single-cta-blue {
1602
- display: inline-block;
1603
- position: relative;
1604
- color: #4335f9 !important;
1605
- text-decoration: none;
1606
- cursor: pointer;
1607
-
1608
- &:hover {
1609
- opacity: .8;
1610
- }
1611
- }
1612
-
1613
- .cta-icon {
1614
- transition: margin-left 0.3s;
1615
- }
1616
-
1617
- .single-cta-blue:hover .cta-icon {
1618
- margin-left: 4px;
1619
- }
1620
-
1621
- .text-center {
1622
- width: 100%;
1623
- display: flex;
1624
- align-items: center;
1625
- justify-content: center;
1626
- text-align: center;
1627
- }
1628
-
1629
- .btn-center {
1630
- display: flex;
1631
- align-items: center;
1632
- justify-content: center;
1633
- text-align: center;
1634
- }
1635
-
1636
- .btn-space {
1637
- margin: 30px 0 10px 0;
1638
- }
1639
-
1640
- .section {
1641
- width: 100%;
1642
- padding: 0px 125px;
1643
- margin-top: 70px;
1644
- scroll-margin-top: -80px;
1645
-
1646
- @media screen and (min-width: 900px) {
1647
- padding: 0px 125px;
1648
- }
1649
-
1650
- @media screen and (max-width: 1023px) {
1651
- padding: 0px 40px;
1652
- }
1653
-
1654
- @media screen and (max-width: 600px) {
1655
- min-width: 340px;
1656
- padding: 0px 20px;
1657
- }
1658
- }
1659
-
1660
- .section-container {
1661
- display: flex;
1662
- flex-direction: row;
1663
- flex-wrap: wrap;
1664
- width: 100%;
1665
- height: 100%;
1666
- }
1667
-
1668
- .space-elements {
1669
- justify-content: space-between;
1670
- gap: 20px;
1671
- }
1672
-
1673
- .section-element {
1674
- display: flex;
1675
- flex-direction: column;
1676
- width: 50%;
1677
- min-width: 340px;
1678
- flex: 350px;
1679
-
1680
- @media screen and (max-width: 600px) {
1681
- flex-direction: column;
1682
- width: 100%;
1683
- flex: 350px;
1684
- }
1685
-
1686
- @media screen and (max-width: 820px) {
1687
- width: 100%;
1688
- }
1689
- }
1690
-
1691
- .section-only-title {
1692
- width: 100%;
1693
- display: flex;
1694
- flex-direction: column;
1695
- align-items: center;
1696
- justify-content: center;
1697
- text-align: center;
1698
- }
1699
-
1700
- .section-title {
1701
- font-size: 44px;
1702
- margin: 0px;
1703
- }
1704
-
1705
- .section-custom-title {
1706
- font-size: 30px;
1707
- margin: 0px;
1708
- }
1709
-
1710
- .text-gray {
1711
- color: #848A9E;
1712
- }
1713
-
1714
- .text-gray-subtitle {
1715
- color: #848A9E;
1716
- font-size: 20px;
1717
- width: 80%;
1718
- }
1719
-
1720
- .text-black {
1721
- color: $color-text;
1722
- }
1723
-
1724
- .back-lilac {
1725
- background-color: #efecff;
1726
- border-radius: 30px;
1727
- }
1728
-
1729
- .back-gray {
1730
- background-color: #efefef;
1731
- border-radius: 30px;
1732
- }
1733
-
1734
- .back-navy-blue {
1735
- background-color: #EEFFFF;
1736
- border-radius: 30px;
1737
- }
1738
-
1739
- .section-elements {
1740
- width: 100%;
1741
- height: 100%;
1742
- display: flex;
1743
- flex-direction: column;
1744
- align-items: center;
1745
- }
1746
-
1747
- .custom-section-elements {
1748
- height: 100%;
1749
- display: flex;
1750
- flex-direction: column;
1751
- }
1752
-
1753
- .section-loading-input {
1754
- display: flex;
1755
- flex-direction: column;
1756
- align-items: center;
1757
- justify-content: center;
1758
- gap: 20px;
1759
- min-height: 260px;
1760
- }
1761
-
1762
- .loading-input-50 {
1763
- pointer-events: none;
1764
- border: 1px solid #CCC;
1765
- width: 230px;
1766
- height: 50px;
1767
- font-size: 18px;
1768
- font-weight: 600;
1769
- border-radius: 5px;
1770
- padding: 5px;
1771
- background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1772
- background-size: 200% 100%;
1773
- background-position: 100% 0;
1774
- animation: fill-animation-50 15s ease forwards infinite;
1775
-
1776
- @keyframes fill-animation-50 {
1777
- 0%, 25%, 30%, 45% {
1778
- background-position: 100% 0;
1779
- color: gray;
1780
- }
1781
- 60%, 100% {
1782
- background-position: 45% 0;
1783
- color: #fff;
1784
- }
1785
- }
1786
- }
1787
-
1788
- .loading-input-80 {
1789
- pointer-events: none;
1790
- border: 1px solid #CCC;
1791
- width: 230px;
1792
- height: 50px;
1793
- font-size: 18px;
1794
- font-weight: 600;
1795
- border-radius: 5px;
1796
- padding: 5px;
1797
- background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1798
- background-size: 200% 100%;
1799
- background-position: 100% 0;
1800
- animation: fill-animation-80 15s ease forwards infinite;
1801
-
1802
- @keyframes fill-animation-80 {
1803
- 0%, 25%, 30%, 45% {
1804
- background-position: 100% 0;
1805
- color: gray;
1806
- }
1807
- 60%, 100% {
1808
- background-position: 30% 0;
1809
- color: #fff;
1810
- }
1811
- }
1812
- }
1813
-
1814
- .loading-input-100 {
1815
- pointer-events: none;
1816
- border: 1px solid #CCC;
1817
- width: 230px;
1818
- height: 50px;
1819
- font-size: 18px;
1820
- font-weight: 600;
1821
- border-radius: 5px;
1822
- padding: 5px;
1823
- background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1824
- background-size: 200% 100%;
1825
- background-position: 100% 0;
1826
- animation: fill-animation-100 15s ease forwards infinite;
1827
-
1828
- @keyframes fill-animation-100 {
1829
- 0%, 25%, 30%, 45% {
1830
- background-position: 100% 0;
1831
- color: gray;
1832
- }
1833
- 60%, 100% {
1834
- background-position: 0% 0;
1835
- color: #fff;
1836
- }
1837
- }
1838
- }
1839
-
1840
- .column-direction {
1841
- flex-direction: column;
1842
- }
1843
-
1844
- .section-subtitle {
1845
- width: 100%;
1846
- font-size: 28px;
1847
- display: flex;
1848
- align-items: center;
1849
- line-height: 1.2em;
1850
- }
1851
-
1852
- .section-subtitle-place {
1853
- width: 80%;
1854
- font-size: 28px;
1855
- display: flex;
1856
- align-items: center;
1857
- line-height: 1.2em;
1858
-
1859
- @media screen and (max-width: 1023px) {
1860
- width: 100%;
1861
- }
1862
- }
1863
-
1864
- .section-paragraph-clean {
1865
- display: flex;
1866
- flex-direction: column;
1867
- gap: 5px;
1868
- padding: 20px 0px 10px 0px;
1869
-
1870
- @media screen and (max-width: 600px) {
1871
- padding: 20px 0px 20px 0px;
1872
- }
1873
- }
1874
-
1875
- .section-paragraph {
1876
- display: flex;
1877
- flex-direction: column;
1878
- gap: 5px;
1879
- padding: 20px 0px 10px 0px;
1880
-
1881
- span {
1882
- display: flex;
1883
- align-items: center;
1884
-
1885
- &::before {
1886
- content: '';
1887
- display: inline-block;
1888
- width: 4px;
1889
- height: 4px;
1890
- background-color: #4335f9;
1891
- border-radius: 50%;
1892
- margin-right: 5px;
1893
- }
1894
- }
1895
-
1896
- @media screen and (max-width: 600px) {
1897
- padding: 20px 0px 20px 0px;
1898
- }
1899
- }
1900
-
1901
- .space-only-title {
1902
- padding: 30px 20px 0px 20px;
1903
- }
1904
-
1905
- .section-margin-bottom {
1906
- margin-bottom: 30px;
1907
- }
1908
-
1909
- .padding-section-text {
1910
- padding: 40px;
1911
-
1912
- @media screen and (max-width: 995px) {
1913
- padding: 20px;
1914
- }
1915
- }
1916
-
1917
- .custom-padding-section-text {
1918
- padding: 20px 0px;
1919
-
1920
- @media screen and (max-width: 600px) {
1921
- padding: 20px;
1922
- }
1923
- }
1924
-
1925
- .padding-section-first-text {
1926
- padding: 0 0 20px 0;
1927
-
1928
- @media screen and (max-width: 995px) {
1929
- padding: 20px;
1930
- }
1931
- }
1932
-
1933
- .figure-credit-card {
1934
- margin-bottom: 20px;
1935
-
1936
- @media screen and (max-width: 600px) {
1937
- margin-bottom: 0px;
1938
- }
1939
- }
1940
-
1941
- .img-custom-width {
1942
- width: 85%;
1943
-
1944
- @media screen and (max-width: 600px) {
1945
- width: 100%;
1946
- }
1947
- }
1948
-
1949
- .section-img {
1950
- height: 100%;
1951
- display: block;
1952
- margin: 0 auto;
1953
-
1954
- @media screen and (max-width: 600px) {
1955
- padding: 20px;
1956
- }
1957
- }
1958
-
1959
- .section-img-custom-padding {
1960
- height: 100%;
1961
- display: block;
1962
- margin: 0 auto;
1963
-
1964
- @media screen and (max-width: 600px) {
1965
- padding: 0px;
1966
- }
1967
- }
1968
-
1969
- .mt-10 {
1970
- margin-top: 10px;
1971
- }
1972
-
1973
- .section-padding-20 {
1974
- padding: 20px;
1975
-
1976
- @media screen and (max-width: 600px) {
1977
- padding: 0px;
1978
- }
1979
- }
1980
-
1981
- .cta-space-top {
1982
- display: flex;
1983
- justify-content: center;
1984
- width: 100%;
1985
- }
1986
-
1987
- .margin-cta {
1988
- margin: 30px 0 10px 0;
1989
- }
1990
-
1991
- .section-lending-picture {
1992
- width: 100%;
1993
- padding: 20px;
1994
- box-sizing: border-box;
1995
- background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo.png");
1996
- background-repeat: no-repeat;
1997
- background-position: center;
1998
- background-size: cover;
1999
- height: 80vw;
2000
- max-height: 663px;
2001
- margin: 0 auto;
2002
- border-radius: 50px;
2003
- }
2004
-
2005
- .section-payments-picture {
2006
- width: 100%;
2007
- padding: 20px;
2008
- box-sizing: border-box;
2009
- background-image: url("/assets/swl/interface/sempli_2.0/5-seguridad-y-control.png");
2010
- background-repeat: no-repeat;
2011
- background-position: center;
2012
- background-size: cover;
2013
- height: 80vw;
2014
- max-height: 663px;
2015
- margin: 0 auto;
2016
- border-radius: 50px;
2017
- }
2018
-
2019
- .section-credit-card-picture {
2020
- width: 100%;
2021
- padding: 20px;
2022
- box-sizing: border-box;
2023
- background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores-v2.png");
2024
- background-repeat: no-repeat;
2025
- background-size: contain;
2026
- max-height: 663px;
2027
- margin: 0 auto;
2028
- border-radius: 50px;
2029
-
2030
- @media screen and (max-width: 1100px) {
2031
- background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores-v1.png");
2032
- }
2033
-
2034
- @media screen and (max-width: 768px) {
2035
- background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores.png");
2036
- height: 60vw;
2037
- min-height: 400px;
2038
- background-position: center;
2039
- }
2040
- }
2041
-
2042
- .section-job-to-be-done {
2043
- width: 100%;
2044
- height: 100%;
2045
- display: flex;
2046
- flex-direction: column;
2047
- justify-content: flex-end;
2048
- color: #fff;
2049
- }
2050
-
2051
- .section-job-to-be-done-payments {
2052
- width: 100%;
2053
- height: 100%;
2054
- display: flex;
2055
- flex-direction: column;
2056
- justify-content: space-between;
2057
- color: #fff;
2058
- }
2059
-
2060
- .section-job-to-be-done-hand {
2061
- width: 100%;
2062
- height: 100%;
2063
- display: flex;
2064
- flex-direction: column;
2065
- justify-content: space-between;
2066
- color: $color-text;
2067
- }
2068
-
2069
- .section-content-job-to-be-done {
2070
- width: 100%;
2071
- height: max-content;
2072
- align-self: flex-end;
2073
- padding: 40px 40px 20px 40px;
2074
-
2075
- @media screen and (max-width: 768px) {
2076
- display: none;
2077
- }
2078
- }
2079
-
2080
- .section-content-job-to-be-done-lending {
2081
- width: 100%;
2082
- height: max-content;
2083
- align-self: flex-end;
2084
- padding: 40px;
2085
- }
2086
-
2087
- .section-content-job-to-be-done-payments {
2088
- width: 100%;
2089
- height: max-content;
2090
- align-self: flex-end;
2091
- padding: 40px;
2092
- }
2093
-
2094
- .section-title-job-to-be-done {
2095
- font-size: 32px;
2096
- }
2097
-
2098
- .section-title-job-to-be-done-lending {
2099
- font-size: 32px;
2100
-
2101
- @media screen and (max-width: 768px) {
2102
- font-size: 28px;
2103
- }
2104
- }
2105
-
2106
- .section-title-job-to-be-done-payments {
2107
- font-size: 32px;
2108
-
2109
- @media screen and (max-width: 768px) {
2110
- font-size: 28px;
2111
- }
2112
- }
2113
-
2114
- .section-texts-job-to-be-done {
2115
- width: 100%;
2116
- display: flex;
2117
- gap: 30px;
2118
- color: #e9e9e9;
2119
- }
2120
-
2121
- .section-texts-job-to-be-done-credit-card {
2122
- width: 100%;
2123
- display: flex;
2124
- gap: 30px;
2125
- color: $color-text;
2126
- }
2127
-
2128
- .section-texts-job-to-be-done-lending {
2129
- width: 100%;
2130
- display: flex;
2131
- flex-direction: column;
2132
- gap: 10px;
2133
- color: #e9e9e9;
2134
-
2135
- @media screen and (max-width: 768px) {
2136
- color: $color-text;
2137
- }
2138
- }
2139
-
2140
- .section-texts-job-to-be-done-payments {
2141
- width: 100%;
2142
- display: flex;
2143
- flex-direction: column;
2144
- gap: 10px;
2145
- color: #e9e9e9;
2146
-
2147
- @media screen and (max-width: 768px) {
2148
- color: $color-text;
2149
- }
2150
- }
2151
-
2152
- .section-sub-text-job-to-be-done {
2153
- width: 100%;
2154
- flex: 1;
2155
- }
2156
-
2157
- .section-first-word {
2158
- transition: color 0.3s;
2159
- color: #fff;
2160
- font-size: 18px;
2161
- font-weight: 800;
2162
-
2163
- &:hover {
2164
- color: #838080;
2165
- }
2166
- }
2167
-
2168
- .section-first-word-credit-card {
2169
- transition: color 0.3s;
2170
- color: $color-text;
2171
- font-size: 18px;
2172
- font-weight: 800;
2173
-
2174
- &:hover {
2175
- color: #838080;
2176
- }
2177
- }
2178
-
2179
- .section-first-word-lending {
2180
- transition: color 0.3s;
2181
- color: #fff;
2182
- font-weight: 800;
2183
-
2184
- &:hover {
2185
- color: #838080;
2186
- }
2187
-
2188
- @media screen and (max-width: 768px) {
2189
- color: $color-text;
2190
- }
2191
- }
2192
-
2193
- .section-first-word-payments {
2194
- transition: color 0.3s;
2195
- color: #fff;
2196
- font-weight: 800;
2197
-
2198
- &:hover {
2199
- color: #838080;
2200
- }
2201
-
2202
- @media screen and (max-width: 768px) {
2203
- color: $color-text;
2204
- }
2205
- }
2206
-
2207
- .img-credit-card {
2208
- min-height: 293px;
2209
- max-height: 293px;
2210
-
2211
- @media screen and (max-width: 600px) {
2212
- padding: 20px 20px 0 20px;
2213
- margin-bottom: 0px;
2214
- }
2215
- }
2216
-
2217
- .section-texts {
2218
- height: 100%;
2219
- }
2220
-
2221
- .custom-height-img {
2222
- min-height: 195px;
2223
- padding: 10px;
2224
-
2225
- @media screen and (max-width: 600px) {
2226
- padding: 40px 40px 0 40px;
2227
- }
2228
- }
2229
-
2230
- .custom-img {
2231
- height: 300px;
2232
- max-height: 300px;
2233
- max-width: 300px;
2234
- }
2235
-
2236
- .container-column {
2237
- height: 100%;
2238
- display: flex;
2239
- flex-direction: column;
2240
- justify-content: space-between;
2241
- }
2242
-
2243
- .section-picture {
2244
- width: 100%;
2245
- height: 100%;
2246
- display: flex;
2247
- align-items: center;
2248
- }
2249
-
2250
- .section-picture-custom {
2251
- width: 100%;
2252
- display: flex;
2253
- align-items: center;
2254
- padding: 50px;
2255
-
2256
- @media screen and (max-width: 600px) {
2257
- padding: 0px;
2258
- }
2259
- }
2260
-
2261
- .section-circular {
2262
- width: 100%;
2263
- display: flex;
2264
- justify-content: flex-end;
2265
- padding: 20px;
2266
-
2267
- @media screen and (max-width: 768px) {
2268
- display: none;
2269
- }
2270
- }
2271
-
2272
- .section-circular-two {
2273
- width: 100%;
2274
- display: flex;
2275
- justify-content: center;
2276
- padding: 20px;
2277
- }
2278
-
2279
- .circular-paragraph {
2280
- width: 130px;
2281
- height: 130px;
2282
- background-color: white;
2283
- border: 2px solid #4335F9;
2284
- border-radius: 50%;
2285
- display: flex;
2286
- justify-content: center;
2287
- align-items: center;
2288
- text-align: center;
2289
- padding: 5px;
2290
- }
2291
-
2292
- .circular-paragraph-intern {
2293
- margin: 0px;
2294
- width: 120px;
2295
- height: 120px;
2296
- background-color: white;
2297
- border: 1px solid white;
2298
- border-radius: 50%;
2299
- display: flex;
2300
- justify-content: center;
2301
- align-items: center;
2302
- text-align: center;
2303
- color: #4335f9;
2304
- font-weight: 600;
2305
- position: relative;
2306
- box-shadow: 0 0 0 5px rgba(173, 216, 230, 0.5);
2307
- }
2308
-
2309
- .custom-elements-center {
2310
- height: 100%;
2311
- width: 100%;
2312
- display: flex;
2313
- flex-direction: column;
2314
- justify-content: center;
2315
- align-items: center;
2316
- padding-left: 20px;
2317
- }
2318
-
2319
- .cta-center {
2320
- width: 100%;
2321
- display: flex;
2322
- align-items: center;
2323
- justify-content: center;
2324
-
2325
- @media screen and (max-width: 600px) {
2326
- padding: 20px;
2327
- }
2328
- }
2329
-
2330
- .trustpilot-slider {
2331
- display: flex;
2332
- flex-direction: row;
2333
- }
2334
-
2335
- .trustilot-texts {
2336
- display: flex;
2337
- flex-direction: column;
2338
- align-items: center;
2339
- justify-content: center;
2340
- width: 30%;
2341
- padding-left: 20px;
2342
- gap: 10px;
2343
- }
2344
-
2345
- .trustilot-title {
2346
- width: 100%;
2347
- font-size: 22px;
2348
- font-weight: 600;
2349
- }
2350
-
2351
- .trustilot-description {
2352
- width: 100%;
2353
- color: rgb(87, 87, 87);
2354
- }
2355
-
2356
- .trustpilot-widget-slider {
2357
- background-color: #f8f9fa;
2358
- width: 100%;
2359
-
2360
- @media screen and (max-width: 768px) {
2361
- width: 90% !important;
2362
- margin: 0 auto;
2363
- }
2364
-
2365
- @media screen and (max-width: 600px) {
2366
- padding-bottom: 15px;
2367
- }
2368
- }
2369
-
2370
- .custom-elements-left {
2371
- height: 100%;
2372
- width: 100%;
2373
- display: flex;
2374
- flex-direction: column;
2375
- justify-content: center;
2376
- padding: 20px;
2377
- }
2378
-
2379
- .max-height-300 {
2380
- max-height: 300px;
2381
- }
2382
-
2383
- .min-height-260 {
2384
- min-height: 260px;
2385
- }
2386
-
2387
- .space-down {
2388
- padding: 0 0 20px 0;
2389
- }
2390
-
2391
- .column-center {
2392
- display: flex;
2393
- flex-direction: column;
2394
- justify-content: space-between;
2395
- }
2396
-
2397
- .position-title-job-to-be-done {
2398
- width: 50%;
2399
- margin-left: 55%;
2400
- margin-bottom: 10%;
2401
-
2402
- @media screen and (max-width: 795px) {
2403
- margin-left: 65%;
2404
- }
2405
- }
2406
- /*=============== END MAIN SECTIONS ===============*/
2407
-
2408
- /*=============== BREAKPOINTS ===============*/
2409
- @media screen and (min-width: 769px) {
2410
- .custom-content-lending {
2411
- display: none;
2412
- }
2413
-
2414
- .custom-content-payments {
2415
- display: none;
2416
- }
2417
-
2418
- .section-mobile-trustpilot {
2419
- display: none;
2420
- }
2421
-
2422
- .arrow-down {
2423
- display: none;
2424
- }
2425
- }
2426
-
2427
- @media screen and (min-width: 900px) {
2428
- .section-title-custom-size {
2429
- font-size: 32px;
2430
- }
2431
-
2432
- .section-space-top-20 {
2433
- padding: 0px 125px;
2434
- margin-top: 20px;
2435
- }
2436
- }
2437
-
2438
- @media screen and (max-width: 1023px) {
2439
- .section-space-top-20 {
2440
- padding: 0px 40px;
2441
- margin-top: 20px;
2442
- }
2443
- }
2444
-
2445
- @media screen and (max-width: 820px) {
2446
- .section-container-hand {
2447
- display: flex;
2448
- flex-direction: column;
2449
- width: 100%;
2450
- align-items: center;
2451
- }
2452
-
2453
- .reverse-img-hand {
2454
- flex-direction: column-reverse;
2455
- }
2456
- }
2457
-
2458
- @media screen and (max-width: 768px) {
2459
- .reverse-hero-main {
2460
- flex-direction: column-reverse;
2461
- }
2462
-
2463
- .section-home-second-trustpilot {
2464
- display: flex;
2465
- max-width: 100%;
2466
- height: 100%;
2467
- align-items: center;
2468
- justify-content: center;
2469
- margin: 30px 0px;
2470
- }
2471
-
2472
- .trustpilot-home-mobile {
2473
- border-radius: 10px;
2474
- padding: 20px 0px;
2475
- text-align: center;
2476
- background-color: #FAFAFA;
2477
- box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
2478
- }
2479
-
2480
- .trustilot-texts {
2481
- width: 100% !important;
2482
- margin-bottom: 30px;
2483
- gap: 0px !important;
2484
- }
2485
-
2486
- .trustpilot-slider {
2487
- display: flex;
2488
- flex-direction: column !important;
2489
- }
2490
-
2491
- .ri-arrow-right-s-line {
2492
- display: none;
2493
- }
2494
-
2495
- .arrow-down {
2496
- display: unset;
2497
- }
2498
- }
2499
-
2500
- @media screen and (max-width: 600px) {
2501
- .section-padding-40 {
2502
- padding: 0px;
2503
- }
2504
-
2505
- .btn-arrow-up {
2506
- margin-top: 30px;
2507
- }
2508
-
2509
- .section-space-top-20 {
2510
- width: 100%;
2511
- min-width: 340px;
2512
- padding: 0px 20px;
2513
- margin-top: 20px;
2514
- scroll-margin-top: -80px;
2515
- }
2516
-
2517
- .section-space-top {
2518
- margin-top: 0px;
2519
- }
2520
-
2521
- .reverse {
2522
- flex-direction: column-reverse;
2523
- gap: 0px;
2524
- }
2525
- }
2526
-
2527
- /*=============== END HOME SEMPLI 2.0 ===============*/
1
+ /*#############################################################################
2
+ # GENERAL CONTENT ELEMENTS
3
+ #############################################################################*/
4
+
5
+ // Content Box - Content Elements
6
+
7
+ .div-border-red {
8
+ border: 2px solid red;
9
+ }
10
+
11
+ .content-box {
12
+ .content-subtitle {
13
+ color: #00C8E1;
14
+ text-transform: uppercase;
15
+ }
16
+
17
+ .content-description {
18
+ color: $color-secondary-dark;
19
+ }
20
+
21
+ .content-cta {
22
+ font-weight: 900;
23
+ }
24
+
25
+ .content-image {
26
+ max-width: 500px;
27
+ display: block;
28
+ margin: 0 auto;
29
+ }
30
+ }
31
+
32
+ .rounded-image {
33
+ border-radius: 50%;
34
+ }
35
+
36
+ .text-general-description {
37
+ color: $color-secondary-dark;
38
+ }
39
+
40
+ .center-box {
41
+ margin: 0 15%;
42
+ padding: 60px 0;
43
+
44
+ .content-description {
45
+ color: $color-secondary-dark;
46
+ }
47
+ }
48
+
49
+ .testimonials-wrapper {
50
+ display: flex;
51
+ flex-wrap: wrap;
52
+ justify-content: space-between;
53
+ margin: 50px 0 20px;
54
+
55
+ .testimonial-box {
56
+ flex: 0 1 calc(100% - 40px);
57
+ margin: 0 20px 20px;
58
+
59
+ @include responsive($breakpoint-medium) {
60
+ flex: 0 1 calc(50% - 40px);
61
+ }
62
+
63
+ @include responsive($breakpoint-large) {
64
+ flex: 0 1 calc(25% - 40px);
65
+ margin-bottom: 0;
66
+ }
67
+ }
68
+
69
+ // Elements
70
+ p.testimonial {
71
+ font-size: rem-calc(14px);
72
+ font-style: italic;
73
+ opacity: 0.6;
74
+ }
75
+
76
+ .testimonial-person {
77
+ display: grid;
78
+ grid-template-columns: 40px 1fr;
79
+ grid-column-gap: 15px;
80
+
81
+ img.photo {
82
+ max-width: 40px;
83
+ @include border-radius(100%);
84
+ @include box-shadow(
85
+ 0 0 0 4px rgba(white,0.1),
86
+ 0 0 0 1px rgba(white,1)
87
+ );
88
+ }
89
+
90
+ h6.name {
91
+ font-size: rem-calc(14px);
92
+ }
93
+ }
94
+ }
95
+
96
+ .logo-list-wrapper {
97
+ display: flex;
98
+ flex-wrap: wrap;
99
+ align-items: center;
100
+ align-content: center;
101
+ justify-content: center;
102
+
103
+ &.title-line {
104
+ font-size: 0.8em;
105
+ font-weight: 100;
106
+ margin-top: 30px;
107
+ text-align: center;
108
+ position: relative;
109
+ z-index: 1;
110
+ background: #fff;
111
+ padding: 0 15px;
112
+
113
+ &:before {
114
+ border-top: 1px solid #eeeeee;
115
+ content: "";
116
+ margin: 0 auto;
117
+ position: absolute;
118
+ top: 50%;
119
+ left: 0;
120
+ right: 0;
121
+ bottom: 0;
122
+ width: 95%;
123
+ z-index: -1;
124
+ }
125
+ span {
126
+ background: #fff;
127
+ padding: 0 15px;
128
+ }
129
+
130
+ .line-logo {
131
+ background-color: #FFFFFF;
132
+ padding-right: 15px;
133
+ }
134
+ }
135
+
136
+ img.allies-logo {
137
+ max-width: 80px;
138
+ max-height: 60px;
139
+ margin: 10px 20px;
140
+
141
+ @include responsive($breakpoint-medium) {
142
+ max-width: 100px;
143
+ max-height: 80px;
144
+ margin: 20px 40px;
145
+ }
146
+
147
+ @include responsive($breakpoint-large) {
148
+ max-width: 125px;
149
+ max-height: 80px;
150
+ }
151
+ }
152
+
153
+ &.logo-7x {
154
+ img.allies-logo {
155
+ @include responsive($breakpoint-medium) {
156
+ margin: 20px 25px;
157
+ }
158
+ }
159
+ }
160
+ }
161
+
162
+ .faqs-box {
163
+ margin: 0 15%;
164
+ padding: 60px 0;
165
+
166
+ header {
167
+ text-align: center;
168
+ margin-bottom: 70px;
169
+ }
170
+
171
+ ul.faqs {
172
+ list-style: none;
173
+ padding: 0;
174
+ margin: 0;
175
+
176
+ li {
177
+ margin: 0 0 40px;
178
+ @include transition(all 0.3s cubic-bezier(.7, 0, .175, 1) 0s);
179
+
180
+ &:last-child {
181
+ margin: 0;
182
+ }
183
+
184
+ &:hover {
185
+ @include transform(scale(1.05));
186
+ }
187
+
188
+ .question {
189
+ margin: 0;
190
+ }
191
+
192
+ .answer {
193
+ color: $color-secondary-dark;
194
+ margin: 0;
195
+ }
196
+ }
197
+ }
198
+ }
199
+
200
+ .required-documentation-box {
201
+ @include responsive($breakpoint-medium) {
202
+ background-image: url("/assets/swl/interface/documents.svg");
203
+ background-position: 110% 50%;
204
+ background-size: 340px 558px;
205
+ background-repeat: no-repeat;
206
+ }
207
+
208
+ @include responsive($breakpoint-xmedium) {
209
+ background-size: 420px 690px;
210
+ }
211
+
212
+ @include responsive($breakpoint-large) {
213
+ background-size: 554px 910px;
214
+ }
215
+
216
+ .required-documentation-title {
217
+ font-size: rem-calc(28px);
218
+ margin: 0 0 40px;
219
+ }
220
+
221
+ ul.required-documentation {
222
+ list-style: none;
223
+ margin: 0 0 80px;
224
+ padding: 0;
225
+
226
+ li {
227
+ background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
228
+ margin-bottom: 40px;
229
+ padding-left: 50px;
230
+ min-height: 32px;
231
+
232
+ &:last-child {
233
+ margin-bottom: 0;
234
+ }
235
+
236
+ .document-title {
237
+ font-size: rem-calc(18px);
238
+ line-height: 32px;
239
+ margin: 0;
240
+ }
241
+
242
+ .document-description {
243
+ font-size: rem-calc(18px);
244
+ color: $color-secondary;
245
+ }
246
+ }
247
+ }
248
+
249
+ .secure {
250
+ margin: 0;
251
+
252
+ img {
253
+ height: 70px;
254
+ margin: 0 10px -25px 0;
255
+ }
256
+ }
257
+ }
258
+
259
+
260
+ section.email-confirmation, section.credit-lines, section.sempli-comfama, section.insurance {
261
+ ul.confirmation-check-list {
262
+ list-style: none;
263
+ margin: 0 0 40px;
264
+ padding: 0;
265
+ font-weight: 100;
266
+
267
+ li {
268
+ background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
269
+ margin-bottom: 40px;
270
+ padding-left: 50px;
271
+ min-height: 32px;
272
+
273
+ &:last-child {
274
+ margin-bottom: 0;
275
+ }
276
+
277
+ .checklist-item {
278
+ font-size: rem-calc(18px);
279
+ line-height: 32px;
280
+ margin: 0;
281
+ }
282
+ }
283
+
284
+ &.basic-check {
285
+ li {
286
+ background: url("/assets/swl/interface/icons/basic-check.svg") no-repeat 0 0;
287
+ margin-bottom: 10px;
288
+
289
+ }
290
+
291
+ &.magenta {
292
+ li {
293
+ background: url("/assets/swl/interface/icons/basic-check-magenta.svg") no-repeat 0 0;
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
299
+
300
+ .contact-us-wrapper {
301
+ border-bottom: 1px solid $color-secondary-light;
302
+ padding-bottom: 120px;
303
+
304
+ img.contact-us-image {
305
+ display: block;
306
+ max-width: 560px;
307
+ margin: 0 auto;
308
+ }
309
+ }
310
+
311
+ .comparison-table-title {
312
+ margin-bottom: 80px;
313
+ }
314
+
315
+ .comparison-table {
316
+ // Structural Blocks
317
+ .row {
318
+ display: grid;
319
+ grid-template-columns: 2fr 1fr;
320
+
321
+ @include responsive($breakpoint-medium) {
322
+ grid-template-columns: 2fr repeat(3, 1fr);
323
+ }
324
+
325
+ // Turn Grid Items into Flex Containers
326
+ // for alignment purposes
327
+ > * {
328
+ display: flex;
329
+ justify-content: center;
330
+ align-items: center;
331
+ border-bottom: 1px solid rgba(black,0.08);
332
+ padding: 12px 10px;
333
+ position: relative;
334
+ }
335
+
336
+ // Row Grid Items
337
+
338
+ .item-name {
339
+ justify-content: flex-start;
340
+ }
341
+
342
+ .sempli {
343
+ background-color: $color-primary-darker;
344
+ color: #ffffff;
345
+ }
346
+
347
+ .banks {
348
+ display: none;
349
+ color: $color-secondary;
350
+
351
+ @include responsive($breakpoint-medium) {
352
+ display: flex;
353
+ }
354
+ }
355
+
356
+ .others {
357
+ display: none;
358
+ color: $color-secondary;
359
+
360
+ @include responsive($breakpoint-medium) {
361
+ display: flex;
362
+ }
363
+ }
364
+
365
+ // Even Rows
366
+
367
+ &:nth-child(even) {
368
+ background-color: rgba(black,0.04);
369
+
370
+ .sempli {
371
+ background-color: darken($color-primary-darker, 5%);
372
+ border-bottom-color: rgba(black,0.2);
373
+ }
374
+ }
375
+
376
+ // Last Child Row
377
+
378
+ &:last-child {
379
+ .sempli {
380
+ &::after {
381
+ display: block;
382
+ content: "";
383
+ background-color: $color-primary-darker;
384
+ height: 30px;
385
+ width: 100%;
386
+ position: absolute;
387
+ left: 0;
388
+ bottom: 0;
389
+ @include border-bottom-radius(5px);
390
+ @include transform(translateY(100%));
391
+ }
392
+ }
393
+ }
394
+ }
395
+
396
+ header {
397
+ .sempli {
398
+ padding-top: 20px;
399
+ padding-bottom: 20px;
400
+ @include border-top-radius(5px);
401
+ }
402
+ }
403
+
404
+ // Content elements
405
+
406
+ .title {
407
+ margin: 0;
408
+ text-align: center;
409
+ }
410
+
411
+ img.icon {
412
+ display: block;
413
+ }
414
+ }
415
+
416
+ section.blog-ctas {
417
+ .container {
418
+ &:first-child {
419
+ margin-bottom: 100px;
420
+ }
421
+ }
422
+
423
+ .blog-ctas-title {
424
+ br {
425
+ display: none;
426
+
427
+ @include responsive($breakpoint-xmedium) {
428
+ display: block;
429
+ }
430
+ }
431
+ }
432
+
433
+ .blog-ctas-subtitle {
434
+ br {
435
+ display: none;
436
+
437
+ @include responsive($breakpoint-xmedium) {
438
+ display: block;
439
+ }
440
+ }
441
+ }
442
+ }
443
+
444
+ // section.how-it-works-props {
445
+ // @include background-image(linear-gradient(#f5f6fa, #ffffff));
446
+ // }
447
+
448
+ section#our-history {
449
+ .container {
450
+ position: relative;
451
+ margin-bottom: 0;
452
+ padding: 50px 0;
453
+
454
+ &:first-child {
455
+ margin-bottom: 100px;
456
+ }
457
+
458
+ .content-box-col:nth-child(2) {
459
+ &::before {
460
+ content: "";
461
+ display: block;
462
+ background-color: lighten($color-secondary-light, 7%);
463
+ width: 4px;
464
+ height: 100%;
465
+ position: absolute;
466
+ left: 50%;
467
+ top: 0;
468
+ @include transform(translateX(-50%));
469
+ }
470
+
471
+ &::after {
472
+ content: "";
473
+ display: block;
474
+ background-color: lighten($color-secondary-light, 7%);
475
+ width: 23px;
476
+ height: 23px;
477
+ position: absolute;
478
+ left: 50%;
479
+
480
+ @include border-radius(100%);
481
+ @include transform(translate(-50%, -50%));
482
+ }
483
+ }
484
+ }
485
+
486
+ .content-image {
487
+ max-height: 460px;
488
+ max-width: 460px;
489
+ @include border-radius(10px);
490
+ @include box-shadow(
491
+ 0 0 0 1px rgba(white, 0.9),
492
+ 0 0 0 8px rgba(black, 0.05)
493
+ );
494
+ }
495
+ }
496
+
497
+ section#our-team {
498
+ .grid {
499
+ .col {
500
+ padding: 0 10px;
501
+ }
502
+ }
503
+
504
+ .container {
505
+ &:first-child {
506
+ margin-bottom: 100px;
507
+ }
508
+ }
509
+
510
+ .team-member {
511
+ margin-bottom: 50px;
512
+ }
513
+
514
+ // Content Elements
515
+
516
+ .team-member-photo {
517
+ display: block;
518
+ margin: 0 auto 20px;
519
+ max-width: 100%;
520
+ @include border-radius(10px);
521
+ @include box-shadow(
522
+ 0 0 0 1px rgba(white, 0.9),
523
+ 0 0 0 8px rgba(black, 0.05)
524
+ );
525
+ }
526
+
527
+ .team-member-name {
528
+ margin: 0 0 3px;
529
+ }
530
+
531
+ .team-member-job-title {
532
+ font-size: rem-calc(12px);
533
+ text-transform: uppercase;
534
+ margin: 0 0 8px;
535
+ }
536
+
537
+ .team-member-description {
538
+ font-size: rem-calc(14px);
539
+ color: $color-secondary;
540
+ margin: 0;
541
+ }
542
+ }
543
+
544
+ section#our-clients {
545
+ .client {
546
+ margin-bottom: 50px;
547
+ }
548
+ }
549
+
550
+ section#our-investors {
551
+ .container {
552
+ margin-bottom: 80px;
553
+ }
554
+
555
+ // Content Elements
556
+
557
+ .investor-logo {
558
+ max-width: 75%;
559
+ }
560
+
561
+ .investor-description {
562
+ color: $color-secondary;
563
+ }
564
+ }
565
+
566
+ section#help-center {
567
+ header.help-center-header {
568
+ border-bottom: 1px solid $color-secondary-light;
569
+ margin-bottom: 40px;
570
+ padding-bottom: 40px;
571
+ }
572
+
573
+ .section-category-group {
574
+ margin-bottom: 50px;
575
+ }
576
+
577
+ .section-category-title {
578
+ .centro-de-ayuda.category & {
579
+ font-size: rem-calc(26px);
580
+ margin: 0 0 30px;
581
+ }
582
+ }
583
+
584
+ .section-category-articles {
585
+ padding-left: 20px;
586
+
587
+ li {
588
+ color: $color-secondary-light;
589
+ padding: 5px 0;
590
+
591
+ a {
592
+ color: $color-text;
593
+ white-space: normal;
594
+
595
+ &:hover {
596
+ color: $color-primary;
597
+ }
598
+ }
599
+
600
+ .centro-de-ayuda.category & {
601
+ font-size: rem-calc(18px);
602
+ }
603
+ }
604
+ }
605
+
606
+ aside {
607
+ display: none;
608
+
609
+ @include responsive($breakpoint-medium) {
610
+ display: block;
611
+ }
612
+
613
+ .section-categories {
614
+ list-style: none;
615
+ padding: 0;
616
+ margin: 0;
617
+
618
+ li {
619
+ margin-bottom: 10px;
620
+
621
+ a {
622
+ color: $color-secondary-dark;
623
+ font-size: rem-calc(18px);
624
+
625
+ &:hover {
626
+ color: $color-text;
627
+ }
628
+
629
+ &.active {
630
+ color: $color-primary;
631
+ }
632
+ }
633
+ }
634
+ }
635
+ }
636
+
637
+ main {
638
+ article {
639
+ // font-size: rem-calc(16px);
640
+ font-size: 1rem;
641
+
642
+ .article-title {
643
+ // font-size: rem-calc(34px);
644
+ margin: 0 0 30px;
645
+ }
646
+
647
+ blockquote {
648
+ border-left: 3px solid $color-secondary-light;
649
+ color: $color-secondary;
650
+ margin: 40px 0;
651
+ padding-left: 50px;
652
+ }
653
+
654
+ img {
655
+ display: block;
656
+ margin: 30px auto;
657
+ max-width: 100%;
658
+ @include border-radius(10px);
659
+ @include box-shadow(
660
+ 0 0 0 1px rgba(white, 0.9),
661
+ 0 0 0 8px rgba(black, 0.05)
662
+ );
663
+ }
664
+
665
+ .was-this-helpful {
666
+ margin: 100px 0;
667
+
668
+ ul {
669
+ display: flex;
670
+ justify-content: center;
671
+ align-items: center;
672
+ list-style: none;
673
+ padding: 0;
674
+ margin: 30px 0 0;
675
+
676
+ li {
677
+ margin: 0 10px;
678
+ }
679
+ }
680
+
681
+ a.satisfaction-option {
682
+ display: block;
683
+ @include border-radius(100%);
684
+
685
+ img.icon {
686
+ margin: 0;
687
+ @include box-shadow(none);
688
+ }
689
+
690
+ &:hover, &.rated {
691
+ @include box-shadow(0 0 0 5px rgba($color-primary, 0.2));
692
+ }
693
+ }
694
+ }
695
+ }
696
+ }
697
+ }
698
+
699
+ section#legal,
700
+ section.insurance-details {
701
+ aside {
702
+ display: none;
703
+
704
+ @include responsive($breakpoint-medium) {
705
+ display: block;
706
+ }
707
+
708
+ .categories {
709
+ list-style: none;
710
+ padding: 0;
711
+ margin: 0;
712
+
713
+ li {
714
+ margin-bottom: 10px;
715
+
716
+ a {
717
+ color: $color-secondary-dark;
718
+ font-size: rem-calc(18px);
719
+
720
+ &:hover {
721
+ color: $color-text;
722
+ }
723
+
724
+ &.active {
725
+ color: $color-primary;
726
+ }
727
+ }
728
+ }
729
+ }
730
+ }
731
+
732
+ }
733
+
734
+ section#in-the-news {
735
+ .news-feed {
736
+ @include responsive($breakpoint-medium) {
737
+ grid-column-gap: 60px;
738
+ }
739
+ }
740
+
741
+ .news-article {
742
+ border-bottom: 1px solid $color-secondary-light;
743
+ padding-bottom: 30px;
744
+ margin-bottom: 40px;
745
+ }
746
+
747
+ // Content Elements
748
+
749
+ img.content-image {
750
+ max-width: 100%;
751
+ @include border-radius(10px);
752
+ @include box-shadow(
753
+ 0 0 0 1px rgba(white, 0.9),
754
+ 0 0 0 8px rgba(black, 0.05)
755
+ );
756
+ }
757
+
758
+ .news-article-title {
759
+ color: $color-text;
760
+
761
+ &:hover {
762
+ color: $color-primary;
763
+ }
764
+ }
765
+
766
+ .news-article-description {
767
+ color: $color-secondary-dark;
768
+ }
769
+
770
+ .news-article-meta {
771
+ font-size: rem-calc(14px);
772
+ margin: 0;
773
+
774
+ span {
775
+ display: inline-block;
776
+ margin-right: 10px;
777
+ padding-right: 15px;
778
+ color: $color-secondary;
779
+ position: relative;
780
+
781
+ &::after {
782
+ content: "";
783
+ display: block;
784
+ background-color: $color-secondary-light;
785
+ height: 5px;
786
+ width: 5px;
787
+ position: absolute;
788
+ right: 0;
789
+ top: 50%;
790
+ @include transform(translateY(-50%));
791
+ @include border-radius(100%);
792
+ }
793
+
794
+ &:last-child {
795
+ margin: 0;
796
+ padding: 0;
797
+
798
+ &::after {
799
+ display: none;
800
+ }
801
+ }
802
+ }
803
+ }
804
+ }
805
+
806
+ section#our-values {
807
+ .values-wrapper {
808
+ display: grid;
809
+ grid-template-columns: 1fr;
810
+ grid-row-gap: 40px;
811
+
812
+ @include responsive($breakpoint-xmedium) {
813
+ grid-template-columns: 1fr 1fr;
814
+ grid-column-gap: 40px;
815
+ }
816
+ }
817
+
818
+ .value-box {
819
+ background-color: #ffffff;
820
+ padding: 40px;
821
+ text-align: center;
822
+ @include border-radius(5px);
823
+ @include box-shadow(4px 4px 25px 0 rgba(black, 0.05));
824
+ }
825
+
826
+ // Content Elements
827
+
828
+ .values-title {
829
+ margin-bottom: 50px;
830
+ }
831
+
832
+ img.value-image {
833
+ display: block;
834
+ max-width: 160px;
835
+ margin: 0 auto 10px;
836
+ }
837
+
838
+ }
839
+
840
+ section#career-opportunities {
841
+ header {
842
+ margin-bottom: 60px;
843
+ }
844
+
845
+ .opportunity-feed {
846
+ grid-row-gap: 40px;
847
+
848
+ .opportunity {
849
+ background-color: #ffffff;
850
+ padding: 25px 30px;
851
+ min-height: 280px;
852
+ position: relative;
853
+ @include border-radius(5px);
854
+ @include box-shadow(4px 4px 25px 0 rgba($color-text, 0.15));
855
+
856
+ &:hover {
857
+ @include box-shadow(8px 8px 30px 2px rgba($color-text, 0.15));
858
+ }
859
+ }
860
+ }
861
+
862
+ // Content Elements
863
+
864
+ .opportunity-title {
865
+ color: $color-text;
866
+ margin: 0;
867
+ }
868
+
869
+ .opportunity-meta {
870
+ color: $color-text;
871
+ font-size: rem-calc(14px);
872
+ margin: 0;
873
+ position: absolute;
874
+ bottom: 30px;
875
+
876
+ span {
877
+ display: inline-block;
878
+ margin-right: 10px;
879
+ padding-right: 15px;
880
+ color: $color-secondary;
881
+ position: relative;
882
+
883
+ &::after {
884
+ content: "";
885
+ display: block;
886
+ background-color: $color-secondary-light;
887
+ height: 5px;
888
+ width: 5px;
889
+ position: absolute;
890
+ right: 0;
891
+ top: 50%;
892
+ @include transform(translateY(-50%));
893
+ @include border-radius(100%);
894
+ }
895
+
896
+ &:last-child {
897
+ margin: 0;
898
+ padding: 0;
899
+
900
+ &::after {
901
+ display: none;
902
+ }
903
+ }
904
+ }
905
+ }
906
+ }
907
+
908
+ .opportunity-type-label {
909
+ display: inline-block;
910
+ background-color: $color-secondary;
911
+ color: #ffffff;
912
+ padding: 5px 10px;
913
+ margin: 0 0 20px;
914
+ @include border-radius(3px);
915
+
916
+ &.product {
917
+ background-color: #6ceab0;
918
+ }
919
+
920
+ &.tech {
921
+ background-color: #649ef5;
922
+ }
923
+
924
+ &.operations {
925
+ background-color: #b397f7;
926
+ }
927
+ }
928
+
929
+ .hero-description.opportunity-meta {
930
+ color: $color-text;
931
+ font-size: rem-calc(14px);
932
+ margin: 0;
933
+ opacity: 1 !important;
934
+
935
+ span {
936
+ display: inline-block;
937
+ margin-right: 10px;
938
+ padding-right: 15px;
939
+ color: $color-secondary;
940
+ position: relative;
941
+
942
+ &::after {
943
+ content: "";
944
+ display: block;
945
+ background-color: $color-secondary-light;
946
+ height: 5px;
947
+ width: 5px;
948
+ position: absolute;
949
+ right: 0;
950
+ top: 50%;
951
+ @include transform(translateY(-50%));
952
+ @include border-radius(100%);
953
+ }
954
+
955
+ &:last-child {
956
+ margin: 0;
957
+ padding: 0;
958
+
959
+ &::after {
960
+ display: none;
961
+ }
962
+ }
963
+
964
+ &.opportunity-type-label {
965
+ color: #ffffff;
966
+ font-weight: 400;
967
+ padding: 5px 15px;
968
+
969
+ &::after {
970
+ display: none;
971
+ }
972
+ }
973
+ }
974
+ }
975
+
976
+ section#referral-program {
977
+ .referral-program-title {
978
+ font-size: rem-calc(28px);
979
+ margin: 0 0 40px;
980
+ }
981
+
982
+ ul.referral-program-steps {
983
+ list-style: none;
984
+ margin: 0 0 80px;
985
+ padding: 0;
986
+
987
+ li {
988
+ background: url("/assets/swl/interface/icons/check-green-circle-large.svg") no-repeat 0 0;
989
+ margin-bottom: 40px;
990
+ padding-left: 50px;
991
+ min-height: 32px;
992
+
993
+ &:last-child {
994
+ margin-bottom: 0;
995
+ }
996
+
997
+ .document-title {
998
+ font-size: rem-calc(18px);
999
+ line-height: 32px;
1000
+ margin: 0;
1001
+ }
1002
+
1003
+ .document-description {
1004
+ font-size: rem-calc(18px);
1005
+ color: $color-secondary;
1006
+ }
1007
+ }
1008
+ }
1009
+ }
1010
+
1011
+ section#why-become-a-referrer {
1012
+ header {
1013
+ text-align: center;
1014
+ margin-bottom: 80px;
1015
+ }
1016
+
1017
+ ul.why-become-a-referrer {
1018
+ display: flex;
1019
+ flex-wrap: wrap;
1020
+ align-items: center;
1021
+ align-content: center;
1022
+ justify-content: center;
1023
+
1024
+ list-style: none;
1025
+ margin: 0;
1026
+ padding: 0;
1027
+
1028
+ li {
1029
+ background-color: #ffffff;
1030
+ padding: 40px;
1031
+ text-align: center;
1032
+ width: calc(33.333% - 20px);
1033
+ margin: 0 20px 20px 0;
1034
+ @include border-radius(5px);
1035
+ @include box-shadow(4px 4px 25px 0 rgba(black, 0.05));
1036
+ @include responsive-max($breakpoint-xmedium) {
1037
+ width: calc(50% - 20px);
1038
+ }
1039
+ @include responsive-max($breakpoint-medium) {
1040
+ width: 100%;
1041
+ margin-right: 0;
1042
+ }
1043
+ }
1044
+ }
1045
+ }
1046
+
1047
+
1048
+ section.simulators.hero-wrapper {
1049
+ background: #fff !important;
1050
+ }
1051
+
1052
+ section.simulators.simulators-wrapper {
1053
+ background-color: #f5f6fa;
1054
+ .roi-section-header {
1055
+ .section-description {
1056
+ color: $color-secondary-dark;
1057
+ }
1058
+ }
1059
+ }
1060
+
1061
+ .roi-calculator {
1062
+ display: grid;
1063
+ grid-template-columns: 1fr;
1064
+ background-color: #fff;
1065
+ padding: 0;
1066
+ @include border-radius(10px);
1067
+ @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1068
+
1069
+ @include responsive($breakpoint-xmedium) {
1070
+ grid-template-columns: 1fr 1fr;
1071
+ grid-template-rows: auto auto;
1072
+ }
1073
+
1074
+ .investment {
1075
+ border-bottom: 1px solid $color-secondary-light;
1076
+ padding: 20px 40px;
1077
+ @include border-top-radius(10px);
1078
+
1079
+ @include responsive($breakpoint-xmedium) {
1080
+ grid-column: 1 / 3;
1081
+ grid-row: 1;
1082
+ }
1083
+ }
1084
+
1085
+ .loan {
1086
+ border-right: 1px solid $color-secondary-light;
1087
+ padding: 20px 40px;
1088
+
1089
+ @include responsive($breakpoint-xmedium) {
1090
+ grid-column: 1;
1091
+ grid-row: 2;
1092
+ }
1093
+ }
1094
+
1095
+ .roi {
1096
+ padding: 20px 40px;
1097
+ background-color: rgba($color-secondary-light, 0.1);
1098
+ @include border-bottom-right-radius(10px);
1099
+
1100
+ @include responsive($breakpoint-xmedium) {
1101
+ grid-column: 2;
1102
+ grid-row: 2;
1103
+ }
1104
+ }
1105
+ }
1106
+
1107
+ .loan-calculator {
1108
+ background-color: #fff;
1109
+ padding: 0;
1110
+ margin-bottom: 30px;
1111
+ @include border-radius(10px);
1112
+ @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1113
+
1114
+ .main-inputs {
1115
+ border-bottom: 1px solid $color-secondary-light;
1116
+ padding: 20px 40px;
1117
+ @include border-top-radius(10px);
1118
+ }
1119
+ }
1120
+
1121
+ .loan-simulation {
1122
+ background-color: #fff;
1123
+ padding: 20px 40px;
1124
+ @include border-radius(10px);
1125
+ @include box-shadow(-2px 2px 6px 0 rgba(0, 0, 0, 0.1));
1126
+ }
1127
+
1128
+ .loan-calculator-panel {
1129
+ margin: 30px 0;
1130
+
1131
+ h6 {
1132
+ font-size: rem-calc(14px);
1133
+ font-weight: 400;
1134
+ opacity: 0.5;
1135
+ margin: 0;
1136
+ }
1137
+
1138
+ p {
1139
+ font-size: rem-calc(16px);
1140
+ font-weight: 900;
1141
+ margin: 0;
1142
+ }
1143
+ }
1144
+
1145
+ .loan-calculator-table {
1146
+ .table-header {
1147
+ .table-row {
1148
+ border-top: 2px solid $color-secondary;
1149
+ border-bottom: 2px solid $color-secondary;
1150
+
1151
+ .table-cell {
1152
+ color: $color-text;
1153
+ font-size: rem-calc(15px);
1154
+ font-weight: 900;
1155
+ padding: 20px 15px;
1156
+ }
1157
+ }
1158
+ }
1159
+
1160
+ .table-footer {
1161
+ .table-row {
1162
+ border-bottom: none;
1163
+
1164
+ .table-cell {
1165
+ color: $color-text;
1166
+ font-size: rem-calc(15px);
1167
+ font-weight: 900;
1168
+ }
1169
+ }
1170
+ }
1171
+
1172
+ .table-row {
1173
+ display: grid;
1174
+ grid-template-columns: 120px repeat(5, 1fr);
1175
+ border-bottom: 1px solid $color-secondary-light;
1176
+
1177
+ .table-cell {
1178
+ color: $color-secondary;
1179
+ font-size: rem-calc(13px);
1180
+ padding: 15px;
1181
+ text-align: center;
1182
+
1183
+ &:first-child {
1184
+ text-align: left;
1185
+ }
1186
+
1187
+ &:last-child {
1188
+ text-align: right;
1189
+ }
1190
+ }
1191
+
1192
+ &:hover {
1193
+ background-color: lighten($color-secondary-light, 15%);
1194
+ }
1195
+ }
1196
+
1197
+ // Cell Specific
1198
+
1199
+ .installment-num {
1200
+ display: inline-block;
1201
+ background-color: lighten($color-secondary, 15%);
1202
+ color: $color-text;
1203
+ font-weight: 900;
1204
+ padding: 1px 6px;
1205
+ @include border-radius(4px);
1206
+ }
1207
+
1208
+ .payment-total {
1209
+ color: $color-text;
1210
+ font-weight: 900;
1211
+ }
1212
+
1213
+ // Content Elements
1214
+
1215
+ span.payment-amount {
1216
+ display: block;
1217
+ font-size: rem-calc(15px);
1218
+ font-weight: 900;
1219
+ }
1220
+
1221
+ a.payment {
1222
+ img.icon {
1223
+ margin: 0 4px -4px 0;
1224
+ width: 18px;
1225
+ }
1226
+ }
1227
+ }
1228
+
1229
+ ul.results-table {
1230
+ list-style: none;
1231
+ margin: 0;
1232
+ padding: 0;
1233
+
1234
+ li {
1235
+ margin: 0 0 7px;
1236
+ position: relative;
1237
+ @include pie-clearfix;
1238
+
1239
+ &:last-child {
1240
+ margin: 0;
1241
+ }
1242
+ }
1243
+
1244
+ .table-separator {
1245
+ border-top: 1px solid $color-secondary-light;
1246
+ padding-top: 10px;
1247
+ }
1248
+
1249
+ .table-total {
1250
+ span {
1251
+ font-size: rem-calc(22px);
1252
+ }
1253
+
1254
+ span.results-table-item-value {
1255
+ &.positive {
1256
+ color: $color-success;
1257
+ }
1258
+
1259
+ &.negative {
1260
+ color: $color-alert;
1261
+ }
1262
+ }
1263
+
1264
+ img.icon.question-sign {
1265
+ margin-bottom: 0px;
1266
+ }
1267
+ }
1268
+
1269
+ // SMALL RESULTS
1270
+ &.small {
1271
+ span {
1272
+ font-size: rem-calc(14px);
1273
+ }
1274
+ }
1275
+ }
1276
+
1277
+ ul.results-table, label {
1278
+ img.icon.question-sign {
1279
+ display: inline-block;
1280
+ width: 16px;
1281
+ margin-bottom: -2px;
1282
+ }
1283
+ }
1284
+
1285
+ span.results-table-item-title {
1286
+ font-size: rem-calc(16px);
1287
+ font-weight: 900;
1288
+ @include float(left);
1289
+ }
1290
+
1291
+ span.results-table-item-value {
1292
+ font-size: rem-calc(16px);
1293
+ font-weight: 900;
1294
+ @include float(right);
1295
+ }
1296
+
1297
+ .calculator-wrapper {
1298
+ padding: 20px 40px;
1299
+ background-color: rgba(255, 255, 255, 1);
1300
+ border-radius: 5px;
1301
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
1302
+ opacity: 0.9;
1303
+
1304
+ @include responsive-max($breakpoint-xlarge) {
1305
+ margin-right: 40px;
1306
+ }
1307
+
1308
+ @include responsive-max($breakpoint-xmedium) {
1309
+ display: none;
1310
+ }
1311
+
1312
+ header {
1313
+ margin: 0 0 20px;
1314
+
1315
+ h1 {
1316
+ color: $color-primary;
1317
+ font-size: rem-calc(26px);
1318
+ font-weight: 900;
1319
+ line-height: 36px;
1320
+ margin: 0 0 10px;
1321
+
1322
+ // @include responsive($breakpoint-medium) {
1323
+ // font-size: rem-calc(40px);
1324
+ // line-height: 46px;
1325
+ // }
1326
+ }
1327
+
1328
+ p {
1329
+ font-size: rem-calc(16px);
1330
+ opacity: 0.5;
1331
+ margin: 0;
1332
+ }
1333
+ }
1334
+
1335
+ .calc-inputs {
1336
+ .grid {
1337
+ grid-column-gap: 20px;
1338
+ }
1339
+ }
1340
+
1341
+ .calc-results {
1342
+ a.to-simulator {
1343
+ display: block;
1344
+ font-size: rem-calc(14px);
1345
+ margin-top: 20px;
1346
+ }
1347
+ }
1348
+
1349
+ .calc-cta {
1350
+ padding: 25px 0 5px;
1351
+ }
1352
+
1353
+ .footer {
1354
+ border-top: 1px solid $color-secondary-light;
1355
+ font-size: rem-calc(12px);
1356
+ padding-top: 20px;
1357
+ }
1358
+ }
1359
+
1360
+ /*=============== SEMPLI 2.0 ===============*/
1361
+ .main {
1362
+ overflow: hidden;
1363
+ width: 100%;
1364
+ margin: 0 auto;
1365
+ }
1366
+
1367
+ .section-hero-main {
1368
+ width: 100%;
1369
+ display: flex;
1370
+ flex-direction: column;
1371
+ margin-top: 70px;
1372
+
1373
+ @media screen and (min-width: 769px) {
1374
+ flex-direction: row;
1375
+ }
1376
+
1377
+ @media screen and (max-width: 1023px) {
1378
+ margin-top: 56px;
1379
+ }
1380
+ }
1381
+
1382
+ .section-hero-texts {
1383
+ width: 100%;
1384
+ display: flex;
1385
+ align-items: center;
1386
+ justify-content: center;
1387
+ padding: 20px 20px 20px 40px;
1388
+
1389
+ @media screen and (min-width: 769px) {
1390
+ width: 50%;
1391
+ }
1392
+
1393
+ @media screen and (max-width: 768px) {
1394
+ padding: 20px;
1395
+ }
1396
+ }
1397
+
1398
+ .section-hero-text {
1399
+ width: max-content;
1400
+ display: flex;
1401
+ flex-direction: column;
1402
+ }
1403
+
1404
+ .section-hero-img {
1405
+ width: 100%;
1406
+
1407
+ @media screen and (min-width: 769px) {
1408
+ width: 50%;
1409
+ }
1410
+ }
1411
+
1412
+ .border-img {
1413
+ border-radius: 0 0 0 0;
1414
+
1415
+ @media screen and (min-width: 769px) {
1416
+ border-radius: 0 0 0 40%;
1417
+ }
1418
+ }
1419
+
1420
+ .sections-main {
1421
+ overflow: hidden;
1422
+ max-width: 1280px;
1423
+ width: 100%;
1424
+ margin: 0 auto;
1425
+ }
1426
+
1427
+ .hero-trustpilot {
1428
+ width: 100%;
1429
+ display: flex;
1430
+ justify-content: flex-end;
1431
+ }
1432
+
1433
+ .section-home-first-trustpilot {
1434
+ position: absolute;
1435
+ display: flex;
1436
+ width: 100%;
1437
+ margin: -90px 150px -120px 0;
1438
+ border-radius: 10px;
1439
+ padding: 20px 0px;
1440
+ text-align: center;
1441
+ background-color: rgba(250, 250, 250, 0.7);
1442
+ max-width: 220px;
1443
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
1444
+
1445
+ @media screen and (min-width: 1200px) {
1446
+ margin: -90px 180px 0 0;
1447
+ }
1448
+
1449
+ @media screen and (min-width: 1350px) {
1450
+ margin: -90px 200px 0 0;
1451
+ }
1452
+
1453
+ @media screen and (min-width: 1450px) {
1454
+ margin: -90px 300px 0 0;
1455
+ }
1456
+
1457
+ @media screen and (max-width: 995px) {
1458
+ margin: -90px 100px 0 0;
1459
+ }
1460
+
1461
+ @media screen and (max-width: 768px) {
1462
+ display: none;
1463
+ }
1464
+ }
1465
+
1466
+ .space-left {
1467
+ margin-left: -40px;
1468
+ }
1469
+
1470
+ .section-home-title {
1471
+ font-size: 36px;
1472
+ line-height: 1.2em;
1473
+ width: 100%;
1474
+
1475
+ @media screen and (min-width: 900px) {
1476
+ font-size: 34px;
1477
+ }
1478
+
1479
+ @media screen and (min-width: 1120px) {
1480
+ font-size: 36px;
1481
+ }
1482
+
1483
+ @media screen and (min-width: 1200px) {
1484
+ font-size: 38px;
1485
+ }
1486
+
1487
+ @media screen and (min-width: 1280px) {
1488
+ font-size: 40px;
1489
+ }
1490
+
1491
+ @media screen and (min-width: 1700px) {
1492
+ font-size: 48px;
1493
+ }
1494
+
1495
+ @media screen and (max-width: 995px) {
1496
+ font-size: 32px;
1497
+ }
1498
+
1499
+ @media screen and (max-width: 868px) {
1500
+ font-size: 28px;
1501
+ }
1502
+
1503
+ @media screen and (max-width: 820px) {
1504
+ font-size: 18px;
1505
+ }
1506
+
1507
+ @media screen and (max-width: 768px) {
1508
+ font-size: 36px;
1509
+ }
1510
+
1511
+ @media screen and (max-width: 600px) {
1512
+ margin: 0px;
1513
+ display: none;
1514
+ }
1515
+ }
1516
+
1517
+ .section-home-title-hide {
1518
+ font-size: 36px;
1519
+ line-height: 1.2em;
1520
+ width: 100%;
1521
+ display: none;
1522
+
1523
+ @media screen and (max-width: 600px) {
1524
+ display: flex;
1525
+ margin: 0px;
1526
+ }
1527
+ }
1528
+
1529
+ .section-home-paragrahp {
1530
+ font-size: 16px;
1531
+ margin-top: 15px;
1532
+ width: 100%;
1533
+
1534
+ @media screen and (max-width: 600px) {
1535
+ width: 100%;
1536
+ }
1537
+
1538
+ @media screen and (min-width: 769px) {
1539
+ width: 70%;
1540
+ }
1541
+
1542
+ @media screen and (min-width: 900px) {
1543
+ width: 100%;
1544
+ }
1545
+
1546
+ @media screen and (min-width: 1120px) {
1547
+ font-size: 18px;
1548
+ }
1549
+
1550
+ @media screen and (min-width: 1280px) {
1551
+ font-size: 20px;
1552
+ }
1553
+ }
1554
+
1555
+ .home-paragraph {
1556
+ font-weight: 300;
1557
+
1558
+ @media screen and (max-width: 600px) {
1559
+ font-weight: 400;
1560
+ }
1561
+ }
1562
+
1563
+ .section-home-cta {
1564
+ margin-top: 30px;
1565
+ width: 100%;
1566
+ display: flex;
1567
+ align-items: center;
1568
+ gap: 20px;
1569
+ flex-wrap: wrap;
1570
+
1571
+ @media screen and (max-width: 768px) {
1572
+ flex-direction: column;
1573
+ }
1574
+ }
1575
+
1576
+ .cta {
1577
+ display: inline-block;
1578
+ background: #4335f9;
1579
+ color: #fff !important;
1580
+ text-decoration: none;
1581
+ min-width: 180px;
1582
+ padding: 5px 16px;
1583
+ border-radius: 30px;
1584
+ text-align: center;
1585
+ cursor: pointer;
1586
+
1587
+ &:hover {
1588
+ background: #1414ea;
1589
+ color: #fff;
1590
+ }
1591
+ }
1592
+
1593
+ .single-cta-blue {
1594
+ display: inline-block;
1595
+ position: relative;
1596
+ color: #4335f9 !important;
1597
+ text-decoration: none;
1598
+ cursor: pointer;
1599
+
1600
+ &:hover {
1601
+ opacity: .8;
1602
+ }
1603
+ }
1604
+
1605
+ .cta-icon {
1606
+ transition: margin-left 0.3s;
1607
+ }
1608
+
1609
+ .single-cta-blue:hover .cta-icon {
1610
+ margin-left: 4px;
1611
+ }
1612
+
1613
+ .text-center {
1614
+ width: 100%;
1615
+ display: flex;
1616
+ align-items: center;
1617
+ justify-content: center;
1618
+ text-align: center;
1619
+ }
1620
+
1621
+ .btn-center {
1622
+ display: flex;
1623
+ align-items: center;
1624
+ justify-content: center;
1625
+ text-align: center;
1626
+ }
1627
+
1628
+ .btn-space {
1629
+ margin: 30px 0 0 0;
1630
+ }
1631
+
1632
+ .btn-space-modal {
1633
+ margin: 10px;
1634
+ }
1635
+
1636
+ .custom-height-img-flexi {
1637
+ max-height: 210px;
1638
+ min-height: 210px;
1639
+ padding: 0;
1640
+
1641
+ @media screen and (max-width: 600px) {
1642
+ padding: 40px 40px 0 40px;
1643
+ }
1644
+ }
1645
+
1646
+ .section-custom-texts {
1647
+ height: max-content;
1648
+ }
1649
+
1650
+ .max-height-260 {
1651
+ max-height: 260px !important;
1652
+ }
1653
+
1654
+ .mt-20 {
1655
+ margin-top: 20px !important;
1656
+ }
1657
+
1658
+ .padding-img {
1659
+ @media screen and (max-width: 600px) {
1660
+ padding: 20px !important;
1661
+ }
1662
+ }
1663
+
1664
+ .custom-container-column {
1665
+ @media screen and (max-width: 995px) {
1666
+ padding: 20px;
1667
+ }
1668
+ }
1669
+
1670
+ .section-custom-space-top {
1671
+ margin-top: 150px;
1672
+
1673
+ @media screen and (max-width: 768px) {
1674
+ margin-top: 0px;
1675
+ }
1676
+ }
1677
+
1678
+ .ul-disc {
1679
+ list-style-type: disc;
1680
+ }
1681
+
1682
+ .mtb-15 {
1683
+ margin: 15px 0;
1684
+ }
1685
+
1686
+ .mt-15 {
1687
+ margin-top: 15px;
1688
+ }
1689
+
1690
+ .height-max-content {
1691
+ height: max-content;
1692
+ }
1693
+
1694
+ .img-custom-border {
1695
+ border-radius: 40px;
1696
+ }
1697
+
1698
+ .section {
1699
+ width: 100%;
1700
+ padding: 0px 125px;
1701
+ margin-top: 70px;
1702
+ scroll-margin-top: -80px;
1703
+
1704
+ @media screen and (min-width: 900px) {
1705
+ padding: 0px 125px;
1706
+ }
1707
+
1708
+ @media screen and (max-width: 1023px) {
1709
+ padding: 0px 40px;
1710
+ }
1711
+
1712
+ @media screen and (max-width: 600px) {
1713
+ min-width: 340px;
1714
+ padding: 0px 20px;
1715
+ }
1716
+ }
1717
+
1718
+ .section-container {
1719
+ display: flex;
1720
+ flex-direction: row;
1721
+ flex-wrap: wrap;
1722
+ width: 100%;
1723
+ height: 100%;
1724
+ }
1725
+
1726
+ .section-video-main {
1727
+ width: 100%;
1728
+ height: 100%;
1729
+ display: flex;
1730
+ align-items: center;
1731
+ border-radius: 0 0 0 0;
1732
+
1733
+ @media screen and (min-width: 769px) {
1734
+ border-radius: 0 0 0 40%;
1735
+ }
1736
+ }
1737
+
1738
+ .space-elements {
1739
+ justify-content: space-between;
1740
+ gap: 20px;
1741
+ }
1742
+
1743
+ .section-element {
1744
+ display: flex;
1745
+ flex-direction: column;
1746
+ width: 50%;
1747
+ min-width: 340px;
1748
+ flex: 350px;
1749
+
1750
+ @media screen and (max-width: 600px) {
1751
+ flex-direction: column;
1752
+ width: 100%;
1753
+ flex: 350px;
1754
+ }
1755
+
1756
+ @media screen and (max-width: 820px) {
1757
+ width: 100%;
1758
+ }
1759
+ }
1760
+
1761
+ .section-only-title {
1762
+ width: 100%;
1763
+ display: flex;
1764
+ flex-direction: column;
1765
+ align-items: center;
1766
+ justify-content: center;
1767
+ text-align: center;
1768
+ }
1769
+
1770
+ .section-title {
1771
+ font-size: 44px;
1772
+ margin: 0px;
1773
+ }
1774
+
1775
+ .section-custom-title {
1776
+ font-size: 30px;
1777
+ margin: 0px;
1778
+ }
1779
+
1780
+ .text-gray {
1781
+ color: #848A9E;
1782
+ }
1783
+
1784
+ .text-gray-subtitle {
1785
+ color: #434448;
1786
+ font-size: 20px;
1787
+ width: 80%;
1788
+ }
1789
+
1790
+ .text-black {
1791
+ color: $color-text;
1792
+ }
1793
+
1794
+ .back-lilac {
1795
+ background-color: #efecff;
1796
+ border-radius: 30px;
1797
+ }
1798
+
1799
+ .back-gray {
1800
+ background-color: #efefef;
1801
+ border-radius: 40px;
1802
+ height: 100%;
1803
+ }
1804
+
1805
+ .back-navy-blue {
1806
+ background-color: #EEFFFF;
1807
+ border-radius: 30px;
1808
+ }
1809
+
1810
+ .section-elements {
1811
+ width: 100%;
1812
+ height: 100%;
1813
+ display: flex;
1814
+ flex-direction: column;
1815
+ align-items: center;
1816
+ }
1817
+
1818
+ .custom-section-elements {
1819
+ height: 100%;
1820
+ display: flex;
1821
+ flex-direction: column;
1822
+ }
1823
+
1824
+ .section-loading-input {
1825
+ display: flex;
1826
+ flex-direction: column;
1827
+ align-items: center;
1828
+ justify-content: center;
1829
+ gap: 20px;
1830
+ min-height: 260px;
1831
+ }
1832
+
1833
+ .loading-input-50 {
1834
+ pointer-events: none;
1835
+ border: 1px solid #CCC;
1836
+ width: 230px;
1837
+ height: 50px;
1838
+ font-size: 18px;
1839
+ font-weight: 600;
1840
+ border-radius: 5px;
1841
+ padding: 5px;
1842
+ background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1843
+ background-size: 200% 100%;
1844
+ background-position: 100% 0;
1845
+ animation: fill-animation-50 15s ease forwards infinite;
1846
+
1847
+ @keyframes fill-animation-50 {
1848
+ 0%, 25%, 30%, 45% {
1849
+ background-position: 100% 0;
1850
+ color: gray;
1851
+ }
1852
+ 60%, 100% {
1853
+ background-position: 45% 0;
1854
+ color: #fff;
1855
+ }
1856
+ }
1857
+ }
1858
+
1859
+ .loading-input-80 {
1860
+ pointer-events: none;
1861
+ border: 1px solid #CCC;
1862
+ width: 230px;
1863
+ height: 50px;
1864
+ font-size: 18px;
1865
+ font-weight: 600;
1866
+ border-radius: 5px;
1867
+ padding: 5px;
1868
+ background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1869
+ background-size: 200% 100%;
1870
+ background-position: 100% 0;
1871
+ animation: fill-animation-80 15s ease forwards infinite;
1872
+
1873
+ @keyframes fill-animation-80 {
1874
+ 0%, 25%, 30%, 45% {
1875
+ background-position: 100% 0;
1876
+ color: gray;
1877
+ }
1878
+ 60%, 100% {
1879
+ background-position: 30% 0;
1880
+ color: #fff;
1881
+ }
1882
+ }
1883
+ }
1884
+
1885
+ .loading-input-100 {
1886
+ pointer-events: none;
1887
+ border: 1px solid #CCC;
1888
+ width: 230px;
1889
+ height: 50px;
1890
+ font-size: 18px;
1891
+ font-weight: 600;
1892
+ border-radius: 5px;
1893
+ padding: 5px;
1894
+ background: linear-gradient(to right, #00C8E1 50%, #FFF 0);
1895
+ background-size: 200% 100%;
1896
+ background-position: 100% 0;
1897
+ animation: fill-animation-100 15s ease forwards infinite;
1898
+
1899
+ @keyframes fill-animation-100 {
1900
+ 0%, 25%, 30%, 45% {
1901
+ background-position: 100% 0;
1902
+ color: gray;
1903
+ }
1904
+ 60%, 100% {
1905
+ background-position: 0% 0;
1906
+ color: #fff;
1907
+ }
1908
+ }
1909
+ }
1910
+
1911
+ .column-direction {
1912
+ flex-direction: column;
1913
+ }
1914
+
1915
+ .section-subtitle {
1916
+ width: 100%;
1917
+ font-size: 28px;
1918
+ display: flex;
1919
+ align-items: center;
1920
+ line-height: 1.2em;
1921
+ }
1922
+
1923
+ .section-subtitle-place {
1924
+ width: 80%;
1925
+ font-size: 28px;
1926
+ display: flex;
1927
+ align-items: center;
1928
+ line-height: 1.2em;
1929
+
1930
+ @media screen and (max-width: 1023px) {
1931
+ width: 100%;
1932
+ }
1933
+ }
1934
+
1935
+ .section-paragraph-clean {
1936
+ display: flex;
1937
+ flex-direction: column;
1938
+ gap: 5px;
1939
+ padding: 20px 0px 10px 0px;
1940
+
1941
+ @media screen and (max-width: 600px) {
1942
+ padding: 20px 0px 20px 0px;
1943
+ }
1944
+ }
1945
+
1946
+ .section-paragraph {
1947
+ display: flex;
1948
+ flex-direction: column;
1949
+ gap: 5px;
1950
+ padding: 20px 0px 10px 0px;
1951
+
1952
+ span {
1953
+ display: flex;
1954
+ align-items: center;
1955
+
1956
+ &::before {
1957
+ content: '';
1958
+ display: inline-block;
1959
+ width: 4px;
1960
+ height: 4px;
1961
+ background-color: #4335f9;
1962
+ border-radius: 50%;
1963
+ margin-right: 5px;
1964
+ }
1965
+ }
1966
+
1967
+ @media screen and (max-width: 600px) {
1968
+ padding: 20px 0px 20px 0px;
1969
+ }
1970
+ }
1971
+
1972
+ .space-only-title {
1973
+ padding: 30px 20px 0px 20px;
1974
+ }
1975
+
1976
+ .section-margin-bottom {
1977
+ margin-bottom: 30px;
1978
+ }
1979
+
1980
+ .padding-section-text {
1981
+ padding: 40px;
1982
+
1983
+ @media screen and (max-width: 995px) {
1984
+ padding: 20px;
1985
+ }
1986
+ }
1987
+
1988
+ .custom-padding-section-text {
1989
+ padding: 20px 0px;
1990
+
1991
+ @media screen and (max-width: 600px) {
1992
+ padding: 20px;
1993
+ }
1994
+ }
1995
+
1996
+ .padding-section-first-text {
1997
+ padding: 0 0 20px 0;
1998
+
1999
+ @media screen and (max-width: 995px) {
2000
+ padding: 20px;
2001
+ }
2002
+ }
2003
+
2004
+ .figure-credit-card {
2005
+ margin-bottom: 20px;
2006
+
2007
+ @media screen and (max-width: 600px) {
2008
+ margin-bottom: 0px;
2009
+ }
2010
+ }
2011
+
2012
+ .img-custom-width {
2013
+ width: 85%;
2014
+
2015
+ @media screen and (max-width: 600px) {
2016
+ width: 100%;
2017
+ }
2018
+ }
2019
+
2020
+ .section-img {
2021
+ height: 100%;
2022
+ display: block;
2023
+ margin: 0 auto;
2024
+
2025
+ @media screen and (max-width: 600px) {
2026
+ padding: 20px;
2027
+ }
2028
+ }
2029
+
2030
+ .section-img-custom-padding {
2031
+ height: 100%;
2032
+ display: block;
2033
+ margin: 0 auto;
2034
+
2035
+ @media screen and (max-width: 600px) {
2036
+ padding: 0px;
2037
+ }
2038
+ }
2039
+
2040
+ .mt-10 {
2041
+ margin-top: 10px;
2042
+ }
2043
+
2044
+ .section-padding-20 {
2045
+ padding: 20px;
2046
+
2047
+ @media screen and (max-width: 600px) {
2048
+ padding: 0px;
2049
+ }
2050
+ }
2051
+
2052
+ .cta-space-top {
2053
+ display: flex;
2054
+ justify-content: center;
2055
+ width: 100%;
2056
+ }
2057
+
2058
+ .margin-cta {
2059
+ margin: 30px 0 10px 0;
2060
+ }
2061
+
2062
+ .section-lending-picture {
2063
+ width: 100%;
2064
+ padding: 20px;
2065
+ box-sizing: border-box;
2066
+ background-image: url("/assets/swl/interface/sempli_2.0/credito-a-termino.webp");
2067
+ background-repeat: no-repeat;
2068
+ background-position: center;
2069
+ background-size: cover;
2070
+ height: 80vw;
2071
+ max-height: 663px;
2072
+ margin: 0 auto;
2073
+ border-radius: 50px;
2074
+ }
2075
+
2076
+ .section-flexi-picture {
2077
+ width: 100%;
2078
+ padding: 20px;
2079
+ box-sizing: border-box;
2080
+ background-image: url("/assets/swl/interface/sempli_2.0/7-financia-tu-capital-de-trabajo2-01.webp");
2081
+ background-repeat: no-repeat;
2082
+ background-position: center;
2083
+ background-size: cover;
2084
+ height: 80vw;
2085
+ max-height: 663px;
2086
+ margin: 0 auto;
2087
+ border-radius: 50px;
2088
+ }
2089
+
2090
+ .section-payments-picture {
2091
+ width: 100%;
2092
+ padding: 20px;
2093
+ box-sizing: border-box;
2094
+ background-image: url("/assets/swl/interface/sempli_2.0/5-seguridad-y-control.png");
2095
+ background-repeat: no-repeat;
2096
+ background-position: center;
2097
+ background-size: cover;
2098
+ height: 80vw;
2099
+ max-height: 663px;
2100
+ margin: 0 auto;
2101
+ border-radius: 50px;
2102
+ }
2103
+
2104
+ .section-credit-card-picture {
2105
+ width: 100%;
2106
+ padding: 20px;
2107
+ box-sizing: border-box;
2108
+ background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores-v2.png");
2109
+ background-repeat: no-repeat;
2110
+ background-size: contain;
2111
+ max-height: 663px;
2112
+ margin: 0 auto;
2113
+ border-radius: 50px;
2114
+
2115
+ @media screen and (max-width: 1100px) {
2116
+ background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores-v1.png");
2117
+ }
2118
+
2119
+ @media screen and (max-width: 768px) {
2120
+ background-image: url("/assets/swl/interface/sempli_2.0/10-pago-de-facturas-y-proveedores.png");
2121
+ height: 60vw;
2122
+ min-height: 400px;
2123
+ background-position: center;
2124
+ }
2125
+ }
2126
+
2127
+ .section-job-to-be-done {
2128
+ width: 100%;
2129
+ height: 100%;
2130
+ display: flex;
2131
+ flex-direction: column;
2132
+ justify-content: flex-end;
2133
+ color: #fff;
2134
+ }
2135
+
2136
+ .section-job-to-be-done-payments {
2137
+ width: 100%;
2138
+ height: 100%;
2139
+ display: flex;
2140
+ flex-direction: column;
2141
+ justify-content: space-between;
2142
+ color: #fff;
2143
+ }
2144
+
2145
+ .section-job-to-be-done-hand {
2146
+ width: 100%;
2147
+ height: 100%;
2148
+ display: flex;
2149
+ flex-direction: column;
2150
+ justify-content: space-between;
2151
+ color: $color-text;
2152
+ }
2153
+
2154
+ .section-content-job-to-be-done {
2155
+ width: 100%;
2156
+ height: max-content;
2157
+ align-self: flex-end;
2158
+ padding: 40px 40px 20px 40px;
2159
+
2160
+ @media screen and (max-width: 768px) {
2161
+ display: none;
2162
+ }
2163
+ }
2164
+
2165
+ .section-content-job-to-be-done-lending {
2166
+ width: 100%;
2167
+ height: max-content;
2168
+ align-self: flex-end;
2169
+ padding: 40px;
2170
+ }
2171
+
2172
+ .section-content-job-to-be-done-payments {
2173
+ width: 100%;
2174
+ height: max-content;
2175
+ align-self: flex-end;
2176
+ padding: 40px;
2177
+ }
2178
+
2179
+ .section-title-job-to-be-done {
2180
+ font-size: 32px;
2181
+ }
2182
+
2183
+ .section-title-job-to-be-done-lending {
2184
+ font-size: 32px;
2185
+
2186
+ @media screen and (max-width: 768px) {
2187
+ font-size: 28px;
2188
+ }
2189
+ }
2190
+
2191
+ .section-title-job-to-be-done-payments {
2192
+ font-size: 32px;
2193
+
2194
+ @media screen and (max-width: 768px) {
2195
+ font-size: 28px;
2196
+ }
2197
+ }
2198
+
2199
+ .section-texts-job-to-be-done {
2200
+ width: 100%;
2201
+ display: flex;
2202
+ gap: 30px;
2203
+ color: #e9e9e9;
2204
+ }
2205
+
2206
+ .section-texts-job-to-be-done-credit-card {
2207
+ width: 100%;
2208
+ display: flex;
2209
+ gap: 30px;
2210
+ color: $color-text;
2211
+ }
2212
+
2213
+ .section-texts-job-to-be-done-lending {
2214
+ width: 100%;
2215
+ display: flex;
2216
+ flex-direction: column;
2217
+ gap: 10px;
2218
+ color: #e9e9e9;
2219
+
2220
+ @media screen and (max-width: 768px) {
2221
+ color: $color-text;
2222
+ }
2223
+ }
2224
+
2225
+ .section-texts-job-to-be-done-payments {
2226
+ width: 100%;
2227
+ display: flex;
2228
+ flex-direction: column;
2229
+ gap: 10px;
2230
+ color: #e9e9e9;
2231
+
2232
+ @media screen and (max-width: 768px) {
2233
+ color: $color-text;
2234
+ }
2235
+ }
2236
+
2237
+ .section-sub-text-job-to-be-done {
2238
+ width: 100%;
2239
+ flex: 1;
2240
+ }
2241
+
2242
+ .section-first-word {
2243
+ transition: color 0.3s;
2244
+ color: #fff;
2245
+ font-size: 18px;
2246
+ font-weight: 800;
2247
+
2248
+ &:hover {
2249
+ color: #838080;
2250
+ }
2251
+ }
2252
+
2253
+ .section-first-word-credit-card {
2254
+ transition: color 0.3s;
2255
+ color: $color-text;
2256
+ font-size: 18px;
2257
+ font-weight: 800;
2258
+
2259
+ &:hover {
2260
+ color: #838080;
2261
+ }
2262
+ }
2263
+
2264
+ .section-first-word-lending {
2265
+ transition: color 0.3s;
2266
+ color: #fff;
2267
+ font-weight: 800;
2268
+
2269
+ &:hover {
2270
+ color: #838080;
2271
+ }
2272
+
2273
+ @media screen and (max-width: 768px) {
2274
+ color: $color-text;
2275
+ }
2276
+ }
2277
+
2278
+ .section-first-word-payments {
2279
+ transition: color 0.3s;
2280
+ color: #fff;
2281
+ font-weight: 800;
2282
+
2283
+ &:hover {
2284
+ color: #838080;
2285
+ }
2286
+
2287
+ @media screen and (max-width: 768px) {
2288
+ color: $color-text;
2289
+ }
2290
+ }
2291
+
2292
+ .img-credit-card {
2293
+ min-height: 293px;
2294
+ max-height: 293px;
2295
+
2296
+ @media screen and (max-width: 600px) {
2297
+ padding: 20px 20px 0 20px;
2298
+ margin-bottom: 0px;
2299
+ }
2300
+ }
2301
+
2302
+ .section-texts {
2303
+ height: 100%;
2304
+ }
2305
+
2306
+ .custom-height-img {
2307
+ min-height: 195px;
2308
+ padding: 10px;
2309
+
2310
+ @media screen and (max-width: 600px) {
2311
+ padding: 40px 40px 0 40px;
2312
+ }
2313
+ }
2314
+
2315
+ .custom-img {
2316
+ height: 300px;
2317
+ max-height: 300px;
2318
+ max-width: 300px;
2319
+ }
2320
+
2321
+ .container-column {
2322
+ height: 100%;
2323
+ display: flex;
2324
+ flex-direction: column;
2325
+ justify-content: space-between;
2326
+ }
2327
+
2328
+ .section-picture {
2329
+ width: 100%;
2330
+ height: 100%;
2331
+ display: flex;
2332
+ align-items: center;
2333
+ }
2334
+
2335
+ .section-picture-custom {
2336
+ width: 100%;
2337
+ display: flex;
2338
+ align-items: center;
2339
+ padding: 50px;
2340
+
2341
+ @media screen and (max-width: 600px) {
2342
+ padding: 0px;
2343
+ }
2344
+ }
2345
+
2346
+ .section-circular {
2347
+ width: 100%;
2348
+ display: flex;
2349
+ justify-content: flex-end;
2350
+ padding: 20px;
2351
+
2352
+ @media screen and (max-width: 768px) {
2353
+ display: none;
2354
+ }
2355
+ }
2356
+
2357
+ .section-circular-two {
2358
+ width: 100%;
2359
+ display: flex;
2360
+ justify-content: center;
2361
+ padding: 20px;
2362
+ }
2363
+
2364
+ .circular-paragraph {
2365
+ width: 130px;
2366
+ height: 130px;
2367
+ background-color: white;
2368
+ border: 2px solid #4335F9;
2369
+ border-radius: 50%;
2370
+ display: flex;
2371
+ justify-content: center;
2372
+ align-items: center;
2373
+ text-align: center;
2374
+ padding: 5px;
2375
+ }
2376
+
2377
+ .circular-paragraph-intern {
2378
+ margin: 0px;
2379
+ width: 120px;
2380
+ height: 120px;
2381
+ background-color: white;
2382
+ border: 1px solid white;
2383
+ border-radius: 50%;
2384
+ display: flex;
2385
+ justify-content: center;
2386
+ align-items: center;
2387
+ text-align: center;
2388
+ color: #4335f9;
2389
+ font-weight: 600;
2390
+ position: relative;
2391
+ box-shadow: 0 0 0 5px rgba(173, 216, 230, 0.5);
2392
+ }
2393
+
2394
+ .custom-elements-center {
2395
+ height: 100%;
2396
+ width: 100%;
2397
+ display: flex;
2398
+ flex-direction: column;
2399
+ justify-content: center;
2400
+ align-items: center;
2401
+ padding-left: 20px;
2402
+ }
2403
+
2404
+ .cta-center {
2405
+ width: 100%;
2406
+ display: flex;
2407
+ align-items: center;
2408
+ justify-content: center;
2409
+
2410
+ @media screen and (max-width: 600px) {
2411
+ padding: 20px;
2412
+ }
2413
+ }
2414
+
2415
+ .trustpilot-slider {
2416
+ display: flex;
2417
+ flex-direction: row;
2418
+ }
2419
+
2420
+ .trustilot-texts {
2421
+ display: flex;
2422
+ flex-direction: column;
2423
+ align-items: center;
2424
+ justify-content: center;
2425
+ width: 30%;
2426
+ padding-left: 20px;
2427
+ gap: 10px;
2428
+ }
2429
+
2430
+ .trustilot-title {
2431
+ width: 100%;
2432
+ font-size: 22px;
2433
+ font-weight: 600;
2434
+ }
2435
+
2436
+ .trustilot-description {
2437
+ width: 100%;
2438
+ color: rgb(87, 87, 87);
2439
+ }
2440
+
2441
+ .trustpilot-widget-slider {
2442
+ background-color: #f8f9fa;
2443
+ width: 100%;
2444
+
2445
+ @media screen and (max-width: 768px) {
2446
+ width: 90% !important;
2447
+ margin: 0 auto;
2448
+ }
2449
+
2450
+ @media screen and (max-width: 600px) {
2451
+ padding-bottom: 15px;
2452
+ }
2453
+ }
2454
+
2455
+ .custom-elements-left {
2456
+ height: 100%;
2457
+ width: 100%;
2458
+ display: flex;
2459
+ flex-direction: column;
2460
+ justify-content: center;
2461
+ padding: 20px;
2462
+ }
2463
+
2464
+ .max-height-300 {
2465
+ max-height: 300px;
2466
+ }
2467
+
2468
+ .min-height-260 {
2469
+ min-height: 260px;
2470
+ }
2471
+
2472
+ .space-down {
2473
+ padding: 0 0 20px 0;
2474
+ }
2475
+
2476
+ .column-center {
2477
+ display: flex;
2478
+ flex-direction: column;
2479
+ justify-content: space-between;
2480
+ }
2481
+
2482
+ .position-title-job-to-be-done {
2483
+ width: 50%;
2484
+ margin-left: 55%;
2485
+ margin-bottom: 10%;
2486
+
2487
+ @media screen and (max-width: 795px) {
2488
+ margin-left: 65%;
2489
+ }
2490
+ }
2491
+ /*=============== END MAIN SECTIONS ===============*/
2492
+
2493
+ /*=============== BREAKPOINTS ===============*/
2494
+ @media screen and (min-width: 769px) {
2495
+ .custom-content-lending {
2496
+ display: none;
2497
+ }
2498
+
2499
+ .custom-content-payments {
2500
+ display: none;
2501
+ }
2502
+
2503
+ .section-mobile-trustpilot {
2504
+ display: none;
2505
+ }
2506
+
2507
+ .arrow-down {
2508
+ display: none;
2509
+ }
2510
+ }
2511
+
2512
+ @media screen and (min-width: 900px) {
2513
+ .section-title-custom-size {
2514
+ font-size: 32px;
2515
+ }
2516
+
2517
+ .section-space-top-20 {
2518
+ padding: 0px 125px;
2519
+ margin-top: 20px;
2520
+ }
2521
+ }
2522
+
2523
+ @media screen and (max-width: 1023px) {
2524
+ .section-space-top-20 {
2525
+ padding: 0px 40px;
2526
+ margin-top: 20px;
2527
+ }
2528
+ }
2529
+
2530
+ @media screen and (max-width: 820px) {
2531
+ .section-container-hand {
2532
+ display: flex;
2533
+ flex-direction: column;
2534
+ width: 100%;
2535
+ align-items: center;
2536
+ }
2537
+
2538
+ .reverse-img-hand {
2539
+ flex-direction: column-reverse;
2540
+ }
2541
+ }
2542
+
2543
+ @media screen and (max-width: 768px) {
2544
+ .reverse-hero-main {
2545
+ flex-direction: column-reverse;
2546
+ }
2547
+
2548
+ .section-home-second-trustpilot {
2549
+ display: flex;
2550
+ max-width: 100%;
2551
+ height: 100%;
2552
+ align-items: center;
2553
+ justify-content: center;
2554
+ margin: 30px 0px;
2555
+ }
2556
+
2557
+ .trustpilot-home-mobile {
2558
+ border-radius: 10px;
2559
+ padding: 20px 0px;
2560
+ text-align: center;
2561
+ background-color: #FAFAFA;
2562
+ box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3);
2563
+ }
2564
+
2565
+ .trustilot-texts {
2566
+ width: 100% !important;
2567
+ margin-bottom: 30px;
2568
+ gap: 0px !important;
2569
+ }
2570
+
2571
+ .trustpilot-slider {
2572
+ display: flex;
2573
+ flex-direction: column !important;
2574
+ }
2575
+
2576
+ .ri-arrow-right-s-line {
2577
+ display: none;
2578
+ }
2579
+
2580
+ .arrow-down {
2581
+ display: unset;
2582
+ }
2583
+ }
2584
+
2585
+ @media screen and (max-width: 600px) {
2586
+ .section-padding-40 {
2587
+ padding: 0px;
2588
+ }
2589
+
2590
+ .btn-arrow-up {
2591
+ margin-top: 30px;
2592
+ }
2593
+
2594
+ .section-space-top-20 {
2595
+ width: 100%;
2596
+ min-width: 340px;
2597
+ padding: 0px 20px;
2598
+ margin-top: 20px;
2599
+ scroll-margin-top: -80px;
2600
+ }
2601
+
2602
+ .section-space-top {
2603
+ margin-top: 0px;
2604
+ }
2605
+
2606
+ .reverse {
2607
+ flex-direction: column-reverse;
2608
+ gap: 0px;
2609
+ }
2610
+ }
2611
+
2612
+ /*=============== END HOME SEMPLI 2.0 ===============*/