PluginProbe
WP Directory Kit / 1.2.7
WP Directory Kit v1.2.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 1.4.0 1.4.1 All 35 releases
wpdirectorykit / elementor-elements / assets / css / widgets / wdk-map.css

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

1,294 lines 31.0 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 }
1033
1034 .wdk-element .wdk-map.infobox-basic .leaflet-container a.leaflet-popup-close-button {
1035 position: absolute;
1036 top: -12px;
1037 right: -12px;
1038 }
1039
1040 .wdk-element .wdk-map .leaflet-popup-content-wrapper, .wdk-element .wdk-map .leaflet-popup-tip {
1041 box-shadow: none;
1042 background: transparent;
1043 border: 0;
1044 }
1045
1046 .wdk-element .wdk-map .map-box .listing-img-container img {
1047 width: 100%;
1048 -webkit-border-radius: 4px 4px 0 0;
1049 border-radius: 4px 4px 0 0;
1050 position: relative;
1051 height: calc(100% - 84px);
1052 -o-object-fit: cover;
1053 object-fit: cover;
1054 -webkit-box-shadow: none;
1055 box-shadow: none;
1056 }
1057
1058 .wdk-element .wdk-map .map-box .rate-info > span {
1059 color: #fff;
1060 text-transform: uppercase;
1061 font-size: 12px;
1062 background: rgba(145, 147, 152, 0.7);
1063 -webkit-border-radius: 50px;
1064 border-radius: 50px;
1065 padding: 5px 13px;
1066 float: right;
1067 margin-top: 2px;
1068 background: #a357de;
1069 z-index: 5;
1070 }
1071
1072 .wdk-element .wdk-map .rate-info:before {
1073 content: '';
1074 position: absolute;
1075 top: 0;
1076 left: 0;
1077 width: 100%;
1078 height: 100%;
1079 background-image: -o-linear-gradient(rgba(255, 255, 255, 0.02), rgba(44, 44, 47, 0.75));
1080 background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.02)), to(rgba(44, 44, 47, 0.75)));
1081 background-image: linear-gradient(rgba(255, 255, 255, 0.02), rgba(44, 44, 47, 0.75));
1082 z-index: 0;
1083 }
1084
1085 .wdk-element .wdk-map a {
1086 -webkit-box-shadow: none !important;
1087 box-shadow: none !important;
1088 }
1089
1090 .wdk-element .wdk-map .leaflet-top {
1091 top: 50%;
1092 margin-top: -37px;
1093 }
1094
1095 .wdk-element .wdk-map .leaflet-touch .leaflet-bar {
1096 border: 0;
1097 background-clip: padding-box;
1098 }
1099
1100 .wdk-element .wdk-map .leaflet-touch .leaflet-bar a {
1101 background-color: #fff;
1102 color: #333;
1103 cursor: pointer;
1104 border-radius: 50% !important;
1105 margin: 5px 15px;
1106 -webkit-transition: color 0.3s, background-color 0.3s;
1107 -o-transition: color 0.3s, background-color 0.3s;
1108 transition: color 0.3s, background-color 0.3s;
1109 -webkit-box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2) !important;
1110 box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2) !important;
1111 text-align: center;
1112 font-size: 15px;
1113 height: 34px;
1114 width: 34px;
1115 display: flex;
1116 align-items: center;
1117 justify-content: center;
1118 line-height: 1;
1119 }
1120
1121 .wdk-element .wdk-map .leaflet-touch .leaflet-bar a:hover {
1122 background-color: #66676b;
1123 color: #fff;
1124 }
1125
1126 .wdk-element .wdk-map .wdk-infobox {
1127 padding: 15px 20px;
1128 width: 180px;
1129 }
1130
1131 .wdk-element .wdk-map .wdk-infobox .wdk-infobox_title {
1132 font-size: 16px;
1133 margin: 0;
1134 padding-bottom: 10px;
1135 }
1136
1137 .wdk-element .wdk-map .wdk-infobox .wdk-infobox_text {
1138 font-size: 12px;
1139 margin: 0;
1140 }
1141
1142 .wdk-element .wdk-map .gmnoprint img {
1143 max-width: initial;
1144 }
1145
1146 .wdk-element .wdk-map .marker-cluster {
1147 background: transparent !important;
1148 }
1149
1150 .wdk-element .wdk-map .marker-cluster div {
1151 background: #0074e4;
1152 color: #fff;
1153 }
1154
1155 .wdk-element .wdk-map .marker-cluster div::before {
1156 border: 7px solid #0074e4;
1157 opacity: 0.25;
1158 -webkit-box-shadow: inset 0 0 0 4px #0074e4;
1159 box-shadow: inset 0 0 0 4px #0074e4;
1160 content: '';
1161 position: absolute;
1162 border-radius: 50%;
1163 top: 0;
1164 left: 0;
1165 width: 100%;
1166 height: 100%;
1167 -webkit-animation: cluster-animation 2.5s infinite;
1168 animation: cluster-animation 2.5s infinite;
1169 }
1170
1171 .wdk-element .wdk-map .wdk-listing-card .wdk-subtitle-part span {
1172 overflow: hidden;
1173 text-overflow: ellipsis;
1174 display: -webkit-box;
1175 -webkit-line-clamp: 2;
1176 -webkit-box-orient: vertical;
1177 }
1178
1179 .wdk-element .wdk-map .leaflet-container a.leaflet-popup-close-button {
1180 top: 6px;
1181 }
1182
1183 @media (max-width: 767px) {
1184 .wdk-element .wdk-map .infobox {
1185 width: 320px !important;
1186 }
1187 .wdk-element .wdk-map .infobox .wdk-listing-card {
1188 display: grid;
1189 grid-auto-rows: minmax(0px, auto);
1190 }
1191 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail {
1192 grid-column: 1;
1193 grid-row: 10 / 1;
1194 width: 120px;
1195 }
1196 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail .wdk-image {
1197 height: 100% !important;
1198 }
1199 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail .wdk-over-image-bottom {
1200 padding: 7px 10px 5px;
1201 }
1202 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail .wdk-over-image-top {
1203 margin: 5px 5px;
1204 }
1205 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail .wdk-compare-listing-button-actions,
1206 .wdk-element .wdk-map .infobox .wdk-listing-card .wdk-thumbnail .wdk-favorites-actions .fa {
1207 font-size: 17px;
1208 }
1209 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(2) {
1210 grid-column: 2;
1211 grid-row: 1 / 1;
1212 }
1213 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(3) {
1214 grid-column: 2;
1215 grid-row: 2 / 2;
1216 }
1217 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(4) {
1218 grid-column: 2;
1219 grid-row: 3 / 3;
1220 }
1221 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(5) {
1222 grid-column: 2;
1223 grid-row: 4 / 4;
1224 }
1225 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(6) {
1226 grid-column: 2;
1227 grid-row: 5 / 5;
1228 }
1229 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(7) {
1230 grid-column: 2;
1231 grid-row: 6 / 6;
1232 }
1233 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(8) {
1234 grid-column: 2;
1235 grid-row: 7 / 7;
1236 }
1237 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(9) {
1238 grid-column: 2;
1239 grid-row: 8 / 8;
1240 }
1241 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(10) {
1242 grid-column: 2;
1243 grid-row: 9 / 9;
1244 }
1245 .wdk-element .wdk-map .infobox .wdk-listing-card > div:nth-child(11) {
1246 grid-column: 2;
1247 grid-row: 10 / 10;
1248 }
1249 .wdk-element .wdk-map .infobox .map_infowindow .loading_content {
1250 height: 134px;
1251 overflow: hidden;
1252 }
1253 }
1254
1255 @media not all and (min-resolution: 0.001dpcm) {
1256 @supports (-webkit-appearance: none) and (stroke-color: transparent) {
1257 body .wdk-element .wdk-map .wdk_marker-card::before,
1258 body .wdk-element .wdk-map .wdk_marker-card::after {
1259 -webkit-transform: perspective(0) rotateX(0deg) rotateZ(-44deg);
1260 transform: perspective(0) rotateX(0deg) rotateZ(-44deg);
1261 }
1262 body .wdk-element .wdk-map .wdk_marker-card::after {
1263 top: 10px;
1264 }
1265 body .wdk-element .wdk-map .wdk_marker-card::before {
1266 top: 8px;
1267 }
1268 }
1269 }
1270
1271 @-webkit-keyframes cluster-animation {
1272 0%,
1273 100% {
1274 -webkit-transform: scale(1.1) rotate(0deg);
1275 transform: scale(1.1) rotate(0deg);
1276 }
1277 50% {
1278 -webkit-transform: scale(1.35) rotate(90deg);
1279 transform: scale(1.35) rotate(90deg);
1280 }
1281 }
1282
1283 @keyframes cluster-animation {
1284 0%,
1285 100% {
1286 -webkit-transform: scale(1.1) rotate(0deg);
1287 transform: scale(1.1) rotate(0deg);
1288 }
1289 50% {
1290 -webkit-transform: scale(1.35) rotate(90deg);
1291 transform: scale(1.35) rotate(90deg);
1292 }
1293 }
1294