.crop-pin-mapper{position: relative;}
.crop-pin-mapper img{position: relative; width: 100%;}
.crop-pin-mapper a.crop-pin-mapper-pin-wrap{text-decoration:none !important; color:var(--main-color);}
.crop-pin-mapper a.crop-pin-mapper-pin-wrap h2{font-size:14px; line-height: 1.2; text-transform:uppercase; min-width: 170px; margin:0; font-weight: 600 !important;}

.crop-pin-mapper .crop-pin-mapper-pin-wrap .crop-pin-mapper-pin-tooltip {
    position: absolute;
    font-size: 14px;
    background-color: #fff;
    /*border-radius: 30px 0 0 10px;*/
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    right: 25px;
    max-width: 100%;
	background: radial-gradient(circle at right, transparent 25px, #fff 25px);
	box-shadow: rgb(0 0 0 / 20%) 0 0 15px;
	transition:all .2s ease-in-out;
	min-width: 230px; 
    padding: 15px 40px 10px 20px; 
    width:230px;
	clip: rect(0px, 230px, 230px, 230px);
    font-weight: 300 !important; color: var(--alt-color);
}

.crop-pin-mapper .crop-pin-mapper-pin-wrap.left-side .crop-pin-mapper-pin-tooltip{
    right: auto;
    left: 25px;
    padding: 15px 20px 10px 40px; 
    background: radial-gradient(circle at left, transparent 25px, #fff 25px);
    clip: rect(0px, 0px, 230px, 0px);
}

.crop-pin-mapper .crop-pin-mapper-pin-wrap .crop-pin-mapper-pin-dot {
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
    background-color: rgba(255,255,255,.9);
    box-shadow: #000 0 0 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 99;
    margin: 12.5px auto auto 12.5px;
	animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.crop-pin-mapper .crop-pin-mapper-pin-wrap {
    position: absolute;
    min-width: 50px;
    height: 50px;
    z-index: 99;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.crop-pin-mapper a.crop-pin-mapper-pin-wrap:hover,
.crop-pin-mapper a.crop-pin-mapper-pin-wrap:focus,
.crop-pin-mapper a.crop-pin-mapper-pin-wrap:active{ z-index: 1000;}

.crop-pin-mapper a.crop-pin-mapper-pin-wrap:hover .crop-pin-mapper-pin-tooltip,
.crop-pin-mapper a.crop-pin-mapper-pin-wrap:focus .crop-pin-mapper-pin-tooltip,
.crop-pin-mapper a.crop-pin-mapper-pin-wrap:active .crop-pin-mapper-pin-tooltip{ clip: rect(0px, 230px, 230px, 0);}

.crop-pin-mapper .crop-pin-mapper-pin-wrap .crop-pin-mapper-pin-dot:before { content: ''; position: absolute; display: block; width: 300%; height: 300%; box-sizing: border-box; margin-left: -100%; margin-top: -100%; border-radius: 45px; border:1px solid #fff; background-color: transparent; animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;}
.crop-pin-mapper .crop-pin-mapper-pin-wrap:hover .crop-pin-mapper-pin-dot{ animation-play-state: paused;}
.crop-pin-mapper .crop-pin-mapper-pin-wrap:hover .crop-pin-mapper-pin-dot:before{opacity: 0 !important;}

@keyframes pulse-ring {
  0% {transform: scale(.3); }
  80%, 100% { opacity: 0;}
}
@keyframes pulse-dot {
  0% { transform: scale(0.8);}
  50% { transform: scale(1);}
  100% { transform: scale(0.8);}
}

@media (max-width:767px){
    
    .crop-pin-mapper-pin-tooltip{display:none !important;}
    /*
    .crop-pin-mapper .crop-pin-mapper-pin-wrap .crop-pin-mapper-pin-dot { height: 15px; width: 15px;}
    .crop-pin-mapper .crop-pin-mapper-pin-wrap .crop-pin-mapper-pin-tooltip {
    position: absolute;
    font-size: 12px;
    background-color: #fff;
    border-radius: 30px 0 0 10px;
    top: 41%;
    transform: translateY(-50%);
    z-index: -1;
    right: 28px;
    max-width: 50vw;
    background: radial-gradient(circle at right, transparent 15px, #fff 15px);
    box-shadow: rgb(0 0 0 / 15%) 0 0 15px;
    transition: all .2s ease-in-out;
    min-width: 20vw;
    padding: 6px 21px 6px 23px;
    width: 38vw;
    clip: rect(0px, 50vw, 20vh, 50vw);}
    .crop-pin-mapper a.crop-pin-mapper-pin-wrap:hover .crop-pin-mapper-pin-tooltip, .crop-pin-mapper a.crop-pin-mapper-pin-wrap:focus .crop-pin-mapper-pin-tooltip, .crop-pin-mapper a.crop-pin-mapper-pin-wrap:active .crop-pin-mapper-pin-tooltip { clip: rect(0px, 50vw, 20vh, 0); }
    .crop-pin-mapper a.crop-pin-mapper-pin-wrap h2{font-size:12px;     min-width: 100%;}*/
}