PluginProbe
WP Directory Kit / 1.5.9
WP Directory Kit v1.5.9
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
wpdirectorykit / elementor-elements / assets / css / widgets / wdk-map.css

wdk-map.css in WP Directory Kit 1.5.9, at elementor-elements/assets/css/widgets/wdk-map.css

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