PluginProbe
WP Directory Kit / 1.2.3
WP Directory Kit v1.2.3
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.3, at elementor-elements/assets/css/widgets/wdk-map.css

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