PluginProbe
Visual Slider / trunk
Visual Slider vtrunk
visual-slider / assets / css / layer.css

layer.css in Visual Slider trunk, at assets/css/layer.css

1,323 lines 56.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 .vs-slider.vs-has-scale .vs-slide-list-warp{
3 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-wt));
4 }
5 .vs-single.vs-has-scale .vs-slide-list-warp{
6 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-wt));
7 }
8 .vs-has-tablet.vs-in-tablet.vs-has-scale .vs-slide-list-warp{
9 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-tab-wt));
10 }
11 .vs-has-mobile.vs-in-mobile.vs-has-scale .vs-slide-list-warp{
12 --vs-sc:calc(var(--vs-sc-wt) / var(--vs-mob-wt));
13 }
14
15 .vs-layer-warp{
16
17 width:100%;
18 height:100%;
19 position:relative;
20 margin: auto;
21 z-index: 2;
22 pointer-events: none;
23 display: block;
24 }
25
26 .vs-layer-list{
27
28 width: calc(var(--vs-wt) * 1px);
29 height: calc(var(--vs-ht) * 1px);
30 margin: auto;
31 z-index: 2;
32 position:absolute;
33 transform: translate(50%,-50%);
34 right: 50%;
35 top: 50%;
36 overflow:hidden;
37 display: block;
38
39
40 }
41 .vs-mode-slide .vs-layer-warp{
42 position:absolute;
43 top:0px;
44 right:0px;
45 }
46
47 .vs-has-tablet.vs-in-tablet .vs-tablet-hide{
48 display:none !important;
49
50 }
51 .vs-has-mobile.vs-in-mobile .vs-mobile-hide{
52 display:none !important;
53
54 }
55 .vs-has-tablet.vs-in-tablet .vs-layer-list {
56 width: calc(var(--vs-tab-wt) * 1px);
57 height: calc(var(--vs-tab-ht) * 1px);
58 }
59
60 .vs-has-mobile.vs-in-mobile .vs-layer-list {
61 width: calc(var(--vs-mob-wt) * 1px);
62 height: calc(var(--vs-mob-ht) * 1px);
63 }
64
65 .vs-has-scale .vs-layer-list{
66 transform: translate(-50%,-50%) scale(var(--vs-sc,1));
67 left: 50%;
68 position:absolute;
69 top: 50%;
70 right: auto;
71 }
72 .vs-has-tablet.vs-in-tablet.vs-has-scale .vs-layer-list {
73 transform: translate(-50%,-50%) scale(var(--vs-sc,1));
74 left: 50%;
75 position:absolute;
76 top: 50%;
77 right: auto;
78 }
79 .vs-has-mobile.vs-in-mobile.vs-has-scale .vs-layer-list {
80 transform: translate(-50%,-50%) scale(var(--vs-sc,1));
81 left: 50%;
82 position:absolute;
83 right: auto;
84 }
85
86 /********************************************************************************************************************
87 --------------------------------------------------------------------------------------------------------------------
88 --------------------------------------------------------------------------------------------------------------------
89
90 Desktop
91
92 --------------------------------------------------------------------------------------------------------------------
93 ---------------------------------------------------------------------------------------------------------------------
94 *********************************************************************************************************************/
95
96
97
98 .vs-layer-item.vs-layer-left{
99 left: var(--vs-lr-hor,0px) ;
100 right:auto;
101 --vs-lr-tf-hor: 0;
102 }
103 .vs-layer-item.vs-layer-right{
104 right: var(--vs-lr-hor,0px) ;
105 left:auto;
106 --vs-lr-tf-hor: 0;
107 }
108 .vs-layer-item.vs-layer-center{
109 left: calc(50% + var(--vs-lr-hor,0px)) ;
110 right:auto;
111 --vs-lr-tf-hor: -50%;
112 }
113 .vs-layer-item.vs-layer-top{
114 top: var(--vs-lr-ver,0px) ;
115 bottom:auto;
116 --vs-lr-tf-ver: 0;
117 }
118 .vs-layer-item.vs-layer-bottom{
119 top: auto ;
120 bottom:var(--vs-lr-ver,0px) ;
121 --vs-lr-tf-ver: 0;
122 }
123 .vs-layer-item.vs-layer-middle{
124 bottom:auto;top: calc(50% + var(--vs-lr-ver,0px)) ;
125 --vs-lr-tf-ver: -50%;
126
127 }
128
129 .vs-layer-item{
130 position:absolute;
131 z-index:auto;
132 text-align:var(--vs-txt-ag,center) ;
133
134 width: var(--vs-lr-wt,max-content);
135 visibility:visible;
136 height: var(--vs-lr-ht,max-content);
137 transform: translate(var(--vs-lr-tf-hor,0),var(--vs-lr-tf-ver,0));
138 }
139
140
141 /********************************************************************************************************************
142 --------------------------------------------------------------------------------------------------------------------
143 --------------------------------------------------------------------------------------------------------------------
144
145 Desktop Position
146
147 --------------------------------------------------------------------------------------------------------------------
148 ---------------------------------------------------------------------------------------------------------------------
149 *********************************************************************************************************************/
150 .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-left{
151 left: var(--vs-lr-hor,0px) !important;
152 right:auto !important;
153 --vs-lr-tf-hor: 0 !important;
154
155 }
156 .vs-slide-item.vs-animte-active .vs-slide-item.active .vs-layer-item.vs-layer-right{
157 right: var(--vs-lr-hor,0px) !important;
158 left:auto;
159 --vs-lr-tf-hor: 0 !important;
160
161 }
162 .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-center{
163 left: calc(50% + var(--vs-lr-hor,0px)) !important;
164 right:auto !important;
165 --vs-lr-tf-hor: -50% !important;
166
167 }
168 .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-top{
169 top: var(--vs-lr-ver,0px) !important;
170 bottom:auto !important;
171 --vs-lr-tf-ver: 0;
172
173 }
174 .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-bottom{
175 top: auto !important;
176 bottom:var(--vs-lr-ver,0px) !important;
177 --vs-lr-tf-ver: 0;
178
179 }
180 .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-middle{
181 bottom:auto;
182 top: calc(50% + var(--vs-lr-ver,0px)) !important;
183 transform: translate(0,50%)!important;
184 --vs-lr-tf-ver: -50% !important;
185
186 }
187
188 .vs-slide-item.vs-animte-active .vs-layer-item{
189 visibility:visible !important;
190 width: var(--vs-lr-wt,max-content) !important;
191 height: var(--vs-lr-ht,max-content) !important;
192 transform: translate(var(--vs-lr-tf-hor,0),var(--vs-lr-tf-ver,0)) !important;
193
194 }
195
196
197
198 /********************************************************************************************************************
199 --------------------------------------------------------------------------------------------------------------------
200 --------------------------------------------------------------------------------------------------------------------
201
202 Tablet Position
203
204 --------------------------------------------------------------------------------------------------------------------
205 ---------------------------------------------------------------------------------------------------------------------
206 *********************************************************************************************************************/
207 /*tablet item*/
208 /*top bottom*/
209 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-top,
210 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-top {
211 bottom: auto ;
212 top:var(--vs-lr-tab-ver,var(--vs-lr-ver,0px)) ;
213 --vs-lr-tab-tf-ver: 0;
214
215 }
216 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-bottom,
217 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-bottom {
218 top: auto ;
219 bottom:var(--vs-lr-tab-ver,var(--vs-lr-ver,0px)) ;
220 --vs-lr-tab-tf-ver: 0;
221
222 }
223 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-middle,
224 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-middle {
225 top: calc(50% + var(--vs-lr-tab-ver,var(--vs-lr-ver,0px))) ;
226 bottom:auto;
227 --vs-lr-tab-tf-ver: -50%;
228
229 }
230
231
232
233 /*left right*/
234 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-left,
235 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-left {
236 left: var(--vs-lr-tab-hor,var(--vs-lr-hor,0px)) ;
237 right:auto;
238 --vs-lr-tab-tf-hor: 0%;
239
240 }
241
242 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-right,
243 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-right {
244 right: var(--vs-lr-tab-hor,var(--vs-lr-hor,0px)) ;
245 left:auto;
246 --vs-lr-tab-tf-hor: 0%;
247
248 }
249
250
251
252 .vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-center,
253 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-layer-item.vs-layer-tablet-center {
254 left: calc(50% + var(--vs-lr-tab-hor,var(--vs-lr-hor,0px))) ;
255 right:auto;
256 --vs-lr-tab-tf-hor: -50%;
257
258 }
259
260
261 .vs-has-tablet.vs-in-tablet .vs-layer-item{
262 width: var(--vs-lr-tab-wt,var(--vs-lr-wt,max-content));
263 height: var(--vs-lr-tab-ht,var(--vs-lr-ht,max-content));
264 transform: translate(
265 var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),
266 var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))
267 );
268 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) ;
269
270
271 }
272 /********************************************************************************************************************
273 --------------------------------------------------------------------------------------------------------------------
274 --------------------------------------------------------------------------------------------------------------------
275
276 Tablet Position Animte Active
277
278 --------------------------------------------------------------------------------------------------------------------
279 ---------------------------------------------------------------------------------------------------------------------
280 *********************************************************************************************************************/
281 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-top,
282 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-top {
283 top: var(--vs-lr-tab-ver,var(--vs-lr-ver,0px))!important;
284 bottom:auto !important;
285 --vs-lr-tab-tf-ver: 0 !important;
286
287
288 }
289 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-bottom,
290 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-bottom {
291 top: auto !important;
292 bottom:var(--vs-lr-tab-ver,var(--vs-lr-ver,0px)) !important;
293 --vs-lr-tab-tf-ver: 0 !important;
294
295 }
296 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-middle,
297 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-middle {
298 top: calc(50% + var(--vs-lr-tab-ver,var(--vs-lr-ver,0px))) !important;
299 bottom: auto !important;
300 --vs-lr-tab-tf-hor: -50% !important;
301
302
303 }
304
305
306 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-left,
307 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-left {
308 left: var(--vs-lr-tab-hor,var(--vs-lr-hor,0px)) !important;
309 right:auto !important;
310 --vs-lr-tab-tf-hor: 0 !important;
311
312 }
313 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-right,
314 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-right {
315 right: var(--vs-lr-tab-hor,var(--vs-lr-hor,0px)) !important;
316 left:auto !important;
317 --vs-lr-tab-tf-hor: 0 !important;
318
319
320 }
321 .vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-center,
322 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-tablet-center {
323 left: calc(50% + var(--vs-lr-tab-hor,var(--vs-lr-hor,0px)))!important;
324 right:auto !important;
325 --vs-lr-tab-tf-hor: -50% !important;
326 }
327
328
329 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item.vs-animte-active .vs-layer-item{
330 width: var(--vs-lr-tab-wt,var(--vs-lr-wt,max-content)) !important;
331 height: var(--vs-lr-tab-ht,var(--vs-lr-ht,max-content)) !important;
332 transform: translate(
333 var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),
334 var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))
335 ) !important;
336 }
337
338
339
340 /********************************************************************************************************************
341 --------------------------------------------------------------------------------------------------------------------
342 --------------------------------------------------------------------------------------------------------------------
343
344 Mobile Position
345
346 --------------------------------------------------------------------------------------------------------------------
347 ---------------------------------------------------------------------------------------------------------------------
348 *********************************************************************************************************************/
349 /*mobile item*/
350
351
352 /*mobile item*/
353 /*top bottom*/
354 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-top,
355 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-top {
356 bottom: auto ;
357 top:var(--vs-lr-mob-ver,var(--vs-lr-ver,0px)) ;
358 --vs-lr-mob-tf-ver: 0;
359
360 }
361 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-bottom,
362 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-bottom {
363 top: auto ;
364 bottom:var(--vs-lr-mob-ver,var(--vs-lr-ver,0px)) ;
365 --vs-lr-mob-tf-ver: 0;
366
367 }
368 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-middle,
369 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-middle {
370 top: calc(50% + var(--vs-lr-mob-ver,var(--vs-lr-ver,0px))) ;
371 bottom:auto;
372 --vs-lr-mob-tf-ver: -50%;
373
374 }
375
376
377
378 /*left right*/
379 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-left,
380 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-left {
381 left: var(--vs-lr-mob-hor,var(--vs-lr-hor,0px)) ;
382 right:auto;
383 --vs-lr-mob-tf-hor: 0%;
384
385 }
386
387 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-right,
388 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-right {
389 right: var(--vs-lr-mob-hor,var(--vs-lr-hor,0px)) ;
390 left:auto;
391 --vs-lr-mob-tf-hor: 0%;
392
393 }
394
395
396
397 .vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-center,
398 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-layer-item.vs-layer-mobile-center {
399 left: calc(50% + var(--vs-lr-mob-hor,var(--vs-lr-hor,0px))) ;
400 right:auto;
401 --vs-lr-mob-tf-hor: -50%;
402
403 }
404
405
406 .vs-has-mobile.vs-in-mobile .vs-layer-item{
407 width: var(--vs-lr-mob-wt,var(--vs-lr-wt,max-content));
408 height: var(--vs-lr-mob-ht,var(--vs-lr-ht,max-content));
409 transform: translate(
410 var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),
411 var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))
412 );
413 text-align:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) ;
414
415
416 }
417 /********************************************************************************************************************
418 --------------------------------------------------------------------------------------------------------------------
419 --------------------------------------------------------------------------------------------------------------------
420
421 Mobile Position Animte Active
422
423 --------------------------------------------------------------------------------------------------------------------
424 ---------------------------------------------------------------------------------------------------------------------
425 *********************************************************************************************************************/
426 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-top,
427 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-top {
428 top: var(--vs-lr-mob-ver,var(--vs-lr-ver,0px))!important;
429 bottom:auto !important;
430 --vs-lr-mob-tf-ver: 0 !important;
431
432
433 }
434 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-bottom,
435 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-bottom {
436 top: auto !important;
437 bottom:var(--vs-lr-mob-ver,var(--vs-lr-ver,0px)) !important;
438 --vs-lr-mob-tf-ver: 0 !important;
439
440 }
441 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-middle,
442 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-middle {
443 top: calc(50% + var(--vs-lr-mob-ver,var(--vs-lr-ver,0px))) !important;
444 bottom: auto !important;
445 --vs-lr-mob-tf-hor: -50% !important;
446
447
448 }
449
450
451
452
453
454
455 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-left,
456 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-left {
457 left: var(--vs-lr-mob-hor,var(--vs-lr-hor,0px)) !important;
458 bottom:auto !important;
459 --vs-lr-mob-tf-hor: 0 !important;
460
461 }
462 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-right,
463 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-right {
464 right: var(--vs-lr-mob-hor,var(--vs-lr-hor,0px)) !important;
465 left:auto !important;
466 --vs-lr-mob-tf-hor: 0 !important;
467
468
469 }
470 .vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-center,
471 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item.vs-layer-mobile-center {
472 left: calc(50% + var(--vs-lr-mob-hor,var(--vs-lr-hor,0px)))!important;
473 right:auto !important;
474 --vs-lr-mob-tf-hor: -50% !important;
475 }
476
477
478 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item.vs-animte-active .vs-layer-item{
479 width: var(--vs-lr-mob-wt,var(--vs-lr-wt,max-content)) !important;
480 height: var(--vs-lr-mob-ht,var(--vs-lr-ht,max-content)) !important;
481 transform: translate(
482 var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),
483 var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))
484 ) !important;
485 }
486
487 /********************************************************************************************************************
488 --------------------------------------------------------------------------------------------------------------------
489 --------------------------------------------------------------------------------------------------------------------
490
491 Desktop Effect
492
493 --------------------------------------------------------------------------------------------------------------------
494 ---------------------------------------------------------------------------------------------------------------------
495 *********************************************************************************************************************/
496 .vs-visualslider{
497 --vs-transition:background 350ms,color 350ms,border 350ms,box-shadow,text-shadow 350ms;
498
499 }
500 .vs-not-transition .vs-slide-item .vs-layer-item[class*="vs-effect-"]{
501 transition:none !important;
502 }
503 .vs-not-transition .vs-slide-list,
504 .vs-not-transition .vs-slide-item{
505 transition:none !important;
506 }
507 .vs-slide-item .vs-layer-item[class*="vs-effect-"] {
508
509 opacity:1!important;
510 transform:translate(1),scale(1) !important;
511 transition-delay: var(--vs-lr-ef-st,0ms)!important;
512 transition-duration: var(--vs-lr-ef-en,ms) !important;
513 transition-property: transform,right,top,bottom,left,opacity !important;
514 }
515
516 .vs-visualslider .vs-slide-item.first-active .vs-layer-item[class*="vs-effect-"]{
517 transition-delay: var(--vs-lr-ef-st,0ms)!important;
518 transition-duration: var(--vs-lr-ef-en,0ms) !important;
519 }
520
521 .vs-mode-fade .vs-slide-item .vs-layer-item[class*="vs-effect-"]{
522 transition-delay: calc((var(--vs-sp,0ms) / 2) + var(--vs-lr-ef-st,0ms)) !important;
523 }
524 .vs-mode-slide .vs-slide-item .vs-layer-item[class*="vs-effect-"]{
525 transition-delay: calc(var(--vs-sp,0ms) + var(--vs-lr-ef-st,0ms)) !important;
526 }
527
528
529
530 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-fade{
531 opacity:0 !important;
532
533 }
534 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-scale {
535 transform: translate(var(--vs-lr-tf-hor,0),var(--vs-lr-tf-ver,0)) scale(var(--vs-lr-ef-sc,0.01)) !important;
536 opacity:0 !important;
537
538 }
539
540
541
542 .vs-slide-item:not(.vs-animte-active) .vs-layer-item[class*="vs-effect-"]{
543 transition:var(--vs-lr-ef-en)!important;
544 }
545
546
547 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-top{
548 top:0px !important;
549 bottom:auto !important;
550 }
551
552 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-bottom{
553 top:100%!important;
554 bottom:auto !important;
555
556 }
557
558 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-left{
559 left:0px!important;
560 right:auto !important;
561 }
562
563 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-right{
564 left: 100% !important;
565 right:auto !important;
566
567 }
568
569 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-bottom.vs-effect-move-top{
570 bottom:100%!important;
571 top:auto !important;
572
573 }
574
575 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-bottom.vs-effect-move-bottom{
576 bottom:0 !important;
577 top:auto !important;
578
579 }
580 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-right.vs-effect-move-left{
581 left: auto !important;
582 right: 100% !important;
583
584 }
585 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-right.vs-effect-move-right{
586 left:auto !important;
587 right:0 !important;
588
589 }
590 /*top*/
591 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-top{
592 transform: translate(var(--vs-lr-tf-hor,0),-101%) !important;
593
594 }
595 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-bottom,
596 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-bottom.vs-effect-move-top {
597 transform: translate(var(--vs-lr-tf-hor,0),0%) !important;
598
599 }
600 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-bottom.vs-effect-move-bottom{
601 transform: translate(var(--vs-lr-tf-hor,0),101%) !important;
602
603 }
604
605 /*left*/
606 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-left{
607 transform: translate(-101%,var(--vs-lr-tf-ver,0)) !important;
608 }
609 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-move-right,
610 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-right.vs-effect-move-left{
611 transform: translate(0%,var(--vs-lr-tf-ver,0)) !important;
612
613 }
614
615 .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-layer-right.vs-effect-move-right{
616
617 transform: translate(101%,var(--vs-lr-tf-ver,0)) !important;
618
619 }
620 /********************************************************************************************************************
621 --------------------------------------------------------------------------------------------------------------------
622 --------------------------------------------------------------------------------------------------------------------
623
624 Tablet Effect
625
626 --------------------------------------------------------------------------------------------------------------------
627 ---------------------------------------------------------------------------------------------------------------------
628 *********************************************************************************************************************/
629 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-top.vs-effect-move-top,
630 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-middle.vs-effect-move-top{
631 top:0px !important;
632 bottom:auto !important;
633 }
634
635 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-top.vs-effect-move-bottom,
636 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-middle.vs-effect-move-bottom{
637 top:100%!important;
638 bottom:auto !important;
639
640 }
641
642 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-left.vs-effect-move-left,
643 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-center.vs-effect-move-left{
644 left:0px!important;
645 right:auto !important;
646 }
647
648 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-left.vs-effect-move-right,
649 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-center.vs-effect-move-right{
650 left: 100% !important;
651 right:auto !important;
652
653 }
654
655 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-bottom.vs-effect-move-top{
656 bottom:100%!important;
657 top:auto !important;
658
659 }
660
661 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-bottom.vs-effect-move-bottom{
662 bottom:0 !important;
663 top:auto !important;
664
665 }
666 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-right.vs-effect-move-left{
667 left: auto !important;
668 right: 100% !important;
669
670 }
671 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-right.vs-effect-move-right{
672 left:auto !important;
673 right:0 !important;
674
675 }
676
677
678 /*top*/
679 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-top.vs-effect-move-top,
680 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-middle.vs-effect-move-top,
681 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-top.vs-effect-move-top,
682 .vs-visualslidervs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-middle.vs-effect-move-top{
683 transform: translate(var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),-101%) !important;
684
685 }
686 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-top.vs-effect-move-bottom,
687 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-middle.vs-effect-move-bottom,
688 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-bottom.vs-effect-move-top,
689 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-top.vs-effect-move-bottom,
690 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-middle.vs-effect-move-bottom,
691 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-bottom.vs-effect-move-top {
692 transform: translate(var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),0%) !important;
693
694 }
695 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-bottom.vs-effect-move-bottom,
696 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-bottom.vs-effect-move-bottom{
697 transform: translate(var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),101%) !important;
698
699 }
700
701 /*left*/
702 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-left.vs-effect-move-left,
703 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-center.vs-effect-move-left,
704 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-left.vs-effect-move-left,
705 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-center.vs-effect-move-left{
706 transform: translate(-101%,var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))) !important;
707 }
708 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-left.vs-effect-move-right,
709 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-center.vs-effect-move-right,
710 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-right.vs-effect-move-left,
711 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-left.vs-effect-move-right,
712 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-center.vs-effect-move-right,
713 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-right.vs-effect-move-left{
714 transform: translate(0%,var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))) !important;
715
716 }
717
718 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-right.vs-effect-move-right,
719 .vs-visualslider.vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-tablet-right.vs-effect-move-right
720 {
721
722 transform: translate(101%,var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))) !important;
723
724 }
725 .vs-has-tablet.vs-in-tablet .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-scale {
726 transform: translate(
727 var(--vs-lr-tab-tf-hor,var(--vs-lr-tf-hor,0)),
728 var(--vs-lr-tab-tf-ver,var(--vs-lr-tf-ver,0))
729 ) scale(var(--vs-lr-ef-sc,0.01)) !important;
730 }
731 /********************************************************************************************************************
732 --------------------------------------------------------------------------------------------------------------------
733 --------------------------------------------------------------------------------------------------------------------
734
735 Mobile Effect
736
737 --------------------------------------------------------------------------------------------------------------------
738 ---------------------------------------------------------------------------------------------------------------------
739 *********************************************************************************************************************/
740
741 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-top.vs-effect-move-top,
742 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-middle.vs-effect-move-top{
743 top:0px !important;
744 bottom:auto !important;
745 }
746
747 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-top.vs-effect-move-bottom,
748 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-middle.vs-effect-move-bottom{
749 top:100%!important;
750 bottom:auto !important;
751
752 }
753
754 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-left.vs-effect-move-left,
755 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-center.vs-effect-move-left{
756 left:0px!important;
757 right:auto !important;
758 }
759
760 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-left.vs-effect-move-right,
761 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-center.vs-effect-move-right{
762 left: 100% !important;
763 right:auto !important;
764
765 }
766
767 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-bottom.vs-effect-move-top{
768 bottom:100%!important;
769 top:auto !important;
770
771 }
772
773 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-bottom.vs-effect-move-bottom{
774 bottom:0 !important;
775 top:auto !important;
776
777 }
778 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-right.vs-effect-move-left{
779 left: auto !important;
780 right: 100% !important;
781
782 }
783 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-right.vs-effect-move-right{
784 left:auto !important;
785 right:0 !important;
786
787 }
788
789
790 /*top*/
791 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-top.vs-effect-move-top,
792 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-middle.vs-effect-move-top,
793 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-top.vs-effect-move-top,
794 .vs-visualslidervs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-middle.vs-effect-move-top{
795 transform: translate(var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),-101%) !important;
796
797 }
798 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-top.vs-effect-move-bottom,
799 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-middle.vs-effect-move-bottom,
800 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-bottom.vs-effect-move-top,
801 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-top.vs-effect-move-bottom,
802 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-middle.vs-effect-move-bottom,
803 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-bottom.vs-effect-move-top {
804 transform: translate(var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),0%) !important;
805
806 }
807 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-bottom.vs-effect-move-bottom,
808 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-bottom.vs-effect-move-bottom{
809 transform: translate(var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),101%) !important;
810
811 }
812
813 /*left*/
814 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-left.vs-effect-move-left,
815 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-center.vs-effect-move-left,
816 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-left.vs-effect-move-left,
817 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-center.vs-effect-move-left{
818 transform: translate(-101%,var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))) !important;
819 }
820 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-left.vs-effect-move-right,
821 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-center.vs-effect-move-right,
822 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-right.vs-effect-move-left,
823 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-left.vs-effect-move-right,
824 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-center.vs-effect-move-right,
825 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-right.vs-effect-move-left{
826 transform: translate(0%,var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))) !important;
827
828 }
829
830 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-right.vs-effect-move-right,
831 .vs-visualslider.vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-mobile-right.vs-effect-move-right
832 {
833
834 transform: translate(101%,var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))) !important;
835
836 }
837 .vs-has-mobile.vs-in-mobile .vs-slide-item:not(.vs-animte-active) .vs-layer-item.vs-effect-scale {
838 transform: translate(
839 var(--vs-lr-mob-tf-hor,var(--vs-lr-tf-hor,0)),
840 var(--vs-lr-mob-tf-ver,var(--vs-lr-tf-ver,0))
841 ) scale(var(--vs-lr-ef-sc,0.01)) !important;
842 }
843 /*************************************************************************************************************************************************************************
844 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
845 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
846 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
847 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
848
849 Text
850
851 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
852 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
853 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
854 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
855 **************************************************************************************************************************************************************************/
856 .vs-layer-text{
857 text-align:var(--vs-txt-ag,center) !important;
858 }
859 .vs-visualslider .vs-layer-item a[href]{
860 pointer-events: all;
861 }
862
863 .vs-has-tablet.vs-in-tablet .vs-layer-text{
864 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
865
866 }
867 .vs-has-mobile.vs-in-mobile .vs-layer-text{
868 text-align:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
869
870 }
871 .vs-visualslider .vs-layer-item .vs-text{
872 padding:0px !important;
873 transition:350ms all !important;
874 color:var(--vs-txt-cr,#ffffff) !important;
875 display:inline-block !important;
876 text-shadow:var(--vs-txt-sd,none) !important;
877 text-align:var(--vs-txt-ag,center) !important;
878 float:var(--vs-txt-ag,center) !important;
879 font-family:var(--vs-txt-fn-fm,var(--vs-fn-fm,var(--vs-fn-fm,inherit))) !important;
880 font-size:var(--vs-txt-fn-sz,30px) !important;
881 font-weight:var(--vs-txt-fn-wt,400) !important;
882 line-height:var(--vs-txt-li-ht,1.5em) !important;
883 text-decoration:var(--vs-txt-fn-de,inherit) !important;
884 text-transform:var(--vs-txt-fn-tf,inherit) !important;
885 margin:0px !important;
886 letter-spacing:var(--vs-txt-lt-sp,inherit)!important;
887 font-style:var(--vs-txt-fn-st,inherit)!important;
888 transition:var(--vs-transition) !important;
889 vertical-align: top;
890
891 }
892 .vs-has-tablet.vs-in-tablet .vs-layer-item .vs-text{
893 font-size:var(--vs-tab-txt-fn-sz,var(--vs-txt-fn-sz,30px)) !important;
894 line-height:var(--vs-tab-txt-li-ht,var(--vs-txt-li-ht,1.5em)) !important;
895 float:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
896 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
897
898
899 }
900
901 .vs-has-mobile.vs-in-mobile .vs-layer-item .vs-text{
902 font-size:var(--vs-mob-txt-fn-sz,var(--vs-txt-fn-sz,30px)) !important;
903 line-height:var(--vs-mob-txt-li-ht,var(--vs-txt-li-ht,1.5em)) !important;
904 float:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
905 text-align:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
906 }
907
908 .vs-visualslider .vs-layer-item .vs-text a{
909 transition:inherit !important;
910 color:inherit !important;
911 display:inherit !important;
912 text-shadow:inherit !important;
913 text-align:inherit !important;
914 float:inherit !important;
915 font-family:inherit !important;
916 font-size:inherit !important;
917 font-weight:inherit !important;
918 line-height:inherit !important;
919 text-decoration:inherit !important;
920 text-transform:inherit !important;
921 letter-spacing:inherit !important;
922 font-style:inherit !important;
923 }
924 .vs-visualslider .vs-layer-item .vs-text strong,
925 .vs-visualslider .vs-layer-item .vs-text span,
926 .vs-visualslider .vs-layer-item .vs-text *{
927 font-family:inherit !important;
928
929 }
930
931 .vs_draggable_hover.vs-layer-item .vs-text,
932 .vs-visualslider .vs-layer-item .vs-text:hover{
933 transition:var(--vs-transition) !important;
934 color:var(--vs-txt-hv-cr,var(--vs-txt-cr,#ffffff))!important;
935 text-shadow:var(--vs-txt-hv-sd,none)!important;
936
937
938 }
939 .vs-visualslider .vs-layer-item .vs-text.vs-text-boxed{
940 position:relative;
941
942 padding:var(--vs-txt-box-pd,1em 2.5em) !important;
943 }
944 .vs-visualslider .vs-layer-item .vs-text.vs-text-boxed::after{
945 z-index: -1;
946 position: absolute;
947 content: '';
948 box-sizing:border-box;
949 width: 100%; transition:var(--vs-transition) !important;
950
951 height: 100%;
952 right: 0;
953 top: 0;
954
955 background:var(--vs-txt-box-bg-cr,transparent) !important;
956 border-width:var(--vs-txt-box-br-wt,0px) !important;
957 border-style:var(--vs-txt-box-br-st,solid) !important;
958 border-color:var(--vs-txt-box-br-cr,#ffffff) !important;
959
960 box-shadow:var(--vs-txt-box-sd,none) !important;
961 border-radius:var(--vs-txt-box-rd,0px) !important;
962 }
963 .vs_draggable_hover.vs-layer-item .vs-text.vs-text-boxed::after,
964 .vs-visualslider .vs-layer-item .vs-text.vs-text-boxed:hover::after{
965 transition:var(--vs-transition) !important;
966
967 background:var(--vs-txt-box-hv-bg-cr,var(--vs-txt-box-bg-cr,transparent)) !important;
968 border-width:var(--vs-txt-box-hv-br-wt,var(--vs-txt-box-br-wt,0px)) !important;
969 border-style:var(--vs-txt-box-hv-br-st,var(--vs-txt-box-br-st,solid)) !important;
970 border-color:var(--vs-txt-box-hv-br-cr,var(--vs-txt-box-br-cr,#ffffff)) !important;
971 box-shadow:var(--vs-txt-box-hv-sd,var(--vs-txt-box-sd,none)) !important;
972
973 }
974
975 .vs-visualslider .vs-layer-item .vs-text i::before{
976 font-size:1em !important;
977 transition:350ms !important;
978
979 color:var(--vs-icn-cr,inherit) !important;
980 }
981
982 .vs_draggable_hover.vs-layer-item .vs-text i::before,
983 .vs-visualslider .vs-layer-item .vs-text:hover i::before{
984 transition:350ms !important;
985
986 color:var(--vs-icn-hv-cr,var(--vs-icn-cr,inherit)) !important;
987 }
988 .vs-visualslider .vs-layer-item i {
989 text-align:var(--vs-txt-ag,right) !important;
990 float:var(--vs-txt-ag,center) !important;
991
992
993 }
994 .vs-visualslider .vs-layer-item .vs-text i{
995 float:right !important;
996 margin-left:.5em !important;
997
998 }
999 .vs-visualslider .vs-layer-item .vs-text.vs-icon-left i{
1000 float:left !important;
1001 margin-left:0px !important;
1002 margin-right:0.5em !important;
1003
1004
1005 }
1006 /*************************************************************************************************************************************************************************
1007 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1008 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1009 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1010 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1011
1012 Icon
1013
1014 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1015 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1016 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1017 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1018 **************************************************************************************************************************************************************************/
1019 .vs-visualslider .vs-layer-item .vs-icon i{
1020 transition:350ms all;
1021 color:var(--vs-icn-cr,#ffffff) !important;
1022 text-shadow:var(--vs-icn-sd,none) !important;
1023 text-align: center !important;
1024 float:var(--vs-txt-ag,center) !important;
1025 font-size:var(--vs-icn-fn-sz,70px) !important;
1026 font-weight:400 !important;
1027 line-height:1em !important;
1028 display:inline-block !important;
1029 text-decoration:var(--vs-icn-fn-de,inherit) !important;
1030 font-style:var(--vs-icn-fn-st,inherit) !important;
1031
1032 display: inline-block !important;
1033 transition:var(--vs-transition) !important;
1034
1035 }
1036 .vs-visualslider .vs-layer-item .vs-icon.vs-icon-boxed{
1037 padding:var(--vs-icn-box-pd,20px) !important;
1038 position:relative;
1039
1040 }
1041 .vs-visualslider .vs-layer-item .vs-icon.vs-icon-boxed i::after{
1042 z-index: -1;
1043 position: absolute;
1044 content: '';
1045 width: 100%;
1046 height: 100%;
1047 right: 0;
1048 box-sizing:border-box;
1049 transition:var(--vs-transition) !important;
1050
1051 top: 0;
1052
1053 background:var(--vs-icn-box-bg-cr,transparent) !important;
1054 border-width:var(--vs-icn-box-br-wt,0px) !important;
1055 box-sizing:border-box;
1056 border-style:var(--vs-icn-box-br-st,solid) !important;
1057 border-color:var(--vs-icn-box-br-cr,#ffffff) !important;
1058 box-shadow:var(--vs-icn-box-sd,none) !important;
1059 border-radius:var(--vs-icn-box-rd,0px) !important;
1060
1061 }
1062
1063 .vs-has-tablet.vs-in-tablet .vs-layer-item .vs-icon i{
1064 font-size:var(--vs-tab-icn-fn-sz,var(--vs-icn-fn-sz,70px)) !important;
1065 float:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
1066 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
1067 }
1068
1069 .vs-has-mobile.vs-in-mobile .vs-layer-item .vs-icon i{
1070 font-size:var(--vs-mob-icn-fn-sz,var(--vs-icn-fn-sz,70px)) !important;
1071 float:var(--vs-txt-txt-ag,var(--vs-txt-ag,center)) !important;
1072 text-align:var(--vs-icn-btn-txt,var(--vs-txt-ag,center)) !important;
1073 }
1074 .vs-visualslider .vs-layer-item .vs-icon.vs-icon-boxed i::before{
1075 width:1.3em !important;
1076 line-height:1.3em !important;
1077 height:1.3em !important;
1078 }
1079 .vs-visualslider .vs-layer-item .vs-icon i::before{
1080 color:inherit !important;
1081 text-shadow:inherit !important;
1082 display: inline-block;
1083 line-height:1em;
1084
1085 }
1086
1087 .vs_draggable_hover.vs-layer-item .vs-icon i,
1088 .vs-visualslider .vs-layer-item .vs-icon i:hover{
1089 transition:350ms all !important;
1090 color:var(--vs-icn-hv-cr,var(--vs-icn-cr,#ffffff)) !important;
1091 text-shadow:var(--vs-icn-hv-sd,none) !important;
1092
1093
1094 }
1095 .vs_draggable_hover.vs-layer-item .vs-icon.vs-icon-boxed i::after,
1096 .vs-visualslider .vs-layer-item .vs-icon.vs-icon-boxed i:hover::after{
1097
1098 background:var(--vs-icn-box-hv-bg-cr,var(--vs-icn-box-bg-cr,transparent)) !important;
1099 border-width:var(--vs-icn-box-hv-br-wt,var(--vs-icn-box-br-wt,0px)) !important;
1100 border-style:var(--vs-icn-box-hv-br-st,var(--vs-icn-box-br-st,solid)) !important;
1101 border-color:var(--vs-icn-box-hv-br-cr,var(--vs-icn-box-br-cr,#ffffff)) !important;
1102 box-shadow:var(--vs-icn-box-hv-sd,var(--vs-icn-box-sd,none)) !important;
1103 transition:var(--vs-transition) !important;
1104
1105
1106 }
1107
1108 /*************************************************************************************************************************************************************************
1109 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1110 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1111 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1112 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1113
1114 Button
1115
1116 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1117 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1118 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1119 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1120 **************************************************************************************************************************************************************************/
1121 .vs-visualslider .vs-layer-item .vs-button{
1122 transition:350ms all !important;
1123 color:var(--vs-btn-cr,#ffffff) !important;
1124 display:inline-block !important;
1125 text-shadow:var(--vs-btn-sd,none) !important;
1126 text-align:var(--vs-txt-ag,center) !important;
1127 float:var(--vs-txt-ag,center) !important;
1128 font-family:var(--vs-btn-fn-fm,var(--vs-fn-fm,var(--vs-fn-fm,inherit))) !important;
1129 font-size:var(--vs-btn-fn-sz,20px) !important;
1130 font-weight:var(--vs-btn-fn-wt,500) !important;
1131 line-height:1em !important;
1132 text-decoration:var(--vs-btn-fn-de,inherit) !important;
1133 text-transform:var(--vs-btn-fn-tf,inherit) !important;
1134 margin:0px !important;
1135 letter-spacing:var(--vs-btn-lt-sp,inherit)!important;
1136 font-style:var(--vs-btn-fn-st,inherit)!important;
1137 transition:var(--vs-transition) !important;
1138
1139 }
1140 .vs-has-tablet.vs-in-tablet .vs-layer-item .vs-button{
1141 font-size:var(--vs-tab-btn-fn-sz,var(--vs-btn-fn-sz,20px)) !important;
1142 float:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
1143 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
1144 }
1145
1146 .vs-has-mobile.vs-in-mobile .vs-layer-item .vs-button{
1147 font-size:var(--vs-mob-btn-fn-sz,var(--vs-btn-fn-sz,20px)) !important;
1148 float:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
1149 text-align:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
1150 }
1151
1152 .vs-visualslider .vs-layer-item .vs-button a{
1153 transition:inherit !important;
1154 color:inherit !important;
1155 display:inherit !important;
1156 text-shadow:inherit !important;
1157 text-align:inherit !important;
1158 float:inherit !important;
1159 font-family:inherit !important;
1160 font-size:inherit !important;
1161 font-weight:inherit !important;
1162 line-height:inherit !important;
1163 text-decoration:inherit !important;
1164 text-transform:inherit !important;
1165 letter-spacing:inherit !important;
1166 font-style:inherit !important;
1167 }
1168 .vs-visualslider .vs-layer-item .vs-button strong,
1169 .vs-visualslider .vs-layer-item .vs-button span{
1170 font-family:inherit !important;
1171
1172 }
1173 .vs_draggable_hover.vs-layer-item .vs-button,
1174 .vs-visualslider .vs-layer-item .vs-button:hover{
1175 transition:var(--vs-transition) !important;
1176
1177 color:var(--vs-btn-hv-cr,var(--vs-btn-cr,#ffffff))!important;
1178 text-shadow:var(--vs-btn-hv-sd,none)!important;
1179
1180
1181 }
1182 .vs-visualslider .vs-layer-item .vs-button.vs-button-boxed{
1183 padding:var(--vs-btn-box-pd,0.5em 2em) !important;
1184 position:relative;
1185 }
1186 .vs-visualslider .vs-layer-item .vs-button.vs-button-boxed::after{
1187 z-index: -1;
1188 transition:var(--vs-transition) !important;
1189
1190 position: absolute;
1191 content: '';
1192 width: 100%;
1193 height: 100%;
1194 right: 0;
1195 box-sizing: border-box;
1196 top: 0;
1197 background:var(--vs-btn-box-bg-cr,transparent) !important;
1198 border-width:var(--vs-btn-box-br-wt,0px) !important;
1199 border-style:var(--vs-btn-box-br-st,solid) !important;
1200 border-color:var(--vs-btn-box-br-cr,#ffffff) !important;
1201 box-shadow:var(--vs-btn-box-sd,none) !important;
1202 border-radius:var(--vs-btn-box-rd,0px) !important;
1203 }
1204 .vs_draggable_hover.vs-layer-item .vs-button.vs-button-boxed::after,
1205 .vs-visualslider .vs-layer-item .vs-button.vs-button-boxed:hover::after{
1206 background:var(--vs-btn-box-hv-bg-cr,var(--vs-btn-box-bg-cr,transparent)) !important;
1207 border-width:var(--vs-btn-box-hv-br-wt,var(--vs-btn-box-br-wt,0px)) !important;
1208 border-style:var(--vs-btn-box-hv-br-st,var(--vs-btn-box-br-st,solid)) !important;
1209 border-color:var(--vs-btn-box-hv-br-cr,var(--vs-btn-box-br-cr,#ffffff)) !important;
1210 box-shadow:var(--vs-btn-box-hv-sd,var(--vs-btn-box-sd,none)) !important;
1211 transition:var(--vs-transition) !important;
1212 }
1213
1214 .vs-visualslider .vs-layer-item .vs-button i::before{
1215 font-size:1em !important;
1216 transition:350ms !important;
1217
1218 color:var(--vs-icn-cr,inherit) !important;
1219 }
1220
1221 .vs_draggable_hover.vs-layer-item .vs-button i::before,
1222 .vs-visualslider .vs-layer-item .vs-button:hover i::before{
1223
1224 color:var(--vs-icn-hv-cr,var(--vs-icn-cr,inherit)) !important;
1225 }
1226 .vs-visualslider .vs-layer-item i {
1227 text-align:var(--vs-txt-ag,right) !important;
1228 float:var(--vs-txt-ag,center) !important;
1229
1230
1231 }
1232 .vs-visualslider .vs-layer-item .vs-button i{
1233 float:right !important;
1234 margin-left:.5em !important;
1235
1236 }
1237 .vs-visualslider .vs-layer-item .vs-button.vs-icon-left i{
1238 float:left !important;
1239 margin-left:0px !important;
1240 margin-right:0.5em !important;
1241
1242
1243 }
1244 /*************************************************************************************************************************************************************************
1245 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1246 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1247 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1248 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1249
1250 box
1251
1252 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1253 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1254 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1255 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1256 **************************************************************************************************************************************************************************/
1257
1258 .vs-visualslider .vs-layer-item .vs-box{
1259
1260 background:var(--vs-box-bg-cr,rgb(2, 159, 253)) !important;
1261 border-width:var(--vs-box-br-wt,0px) !important;
1262 border-style:var(--vs-box-br-st,solid) !important;
1263 border-color:var(--vs-box-br-cr,#ffffff) !important;
1264 transition:350ms all !important;
1265 display:inline-block !important;
1266 position: absolute;
1267 box-sizing:border-box;
1268 width: 100%;
1269 height: 100%;
1270 right: 0;
1271 top: 0;
1272
1273 transition:var(--vs-transition) !important;
1274 box-shadow:var(--vs-box-sd,none) !important;
1275 border-radius:var(--vs-box-rd,0px) !important;
1276 }
1277 .vs_draggable_hover.vs-layer-item .vs-box,
1278 .vs-visualslider .vs-layer-item .vs-box:hover{
1279 transition:var(--vs-transition) !important;
1280
1281 background:var(--vs-box-hv-bg-cr,var(--vs-box-bg-cr,rgb(2, 159, 253))) !important;
1282 border-width:var(--vs-box-hv-br-wt,var(--vs-box-br-wt,0px)) !important;
1283 border-style:var(--vs-box-hv-br-st,var(--vs-box-br-st,solid)) !important;
1284 border-color:var(--vs-box-hv-br-cr,var(--vs-box-br-cr,#ffffff)) !important;
1285 box-shadow:var(--vs-box-hv-sd,var(--vs-box-sd,none)) !important;
1286
1287 }
1288
1289 /*************************************************************************************************************************************************************************
1290 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1291 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1292 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1293 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1294
1295 Button
1296
1297 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1298 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1299 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1300 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1301 **************************************************************************************************************************************************************************/
1302 .vs-visualslider .vs-layer-item .vs-image img{
1303 max-width:100%;
1304 max-height:100%;
1305 display:inline-block;
1306 vertical-align:middle;
1307 text-align: var(--vs-txt-ag,center);
1308
1309 }
1310 .vs-visualslider .vs-layer-item .vs-image{
1311 width:100%;
1312 height:100%;
1313 text-align: var(--vs-txt-ag,center);
1314 }
1315 .vs-has-tablet.vs-in-tablet .vs-layer-item .vs-image{
1316
1317 text-align:var(--vs-tab-txt-ag,var(--vs-txt-ag,center)) !important;
1318 }
1319 .vs-has-mobile.vs-in-mobile .vs-layer-item .vs-image{
1320
1321 text-align:var(--vs-mob-txt-ag,var(--vs-txt-ag,center)) !important;
1322 }
1323