*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bwdihp-hotspot-content {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 35px;
height: 35px;
text-align: center;
background: red;
color: #fff;
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
}
.bwdihp-hotspot-content.yes {
animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
0% {
box-shadow: 0 0 0 0px;
color: rgba(0, 0, 0, 0.305);
}
100% {
box-shadow: 0 0 0 20px;
color: rgba(0, 0, 0, 0);
}
}
.bwdihp-hotspot-content a {
position: relative;
}
.bwdihp-hotspot-icon {
color: #fff;
}
.bwdihp-hotspot-text {
color: #fff;
}
.bwdihp-tooltip-content {
position: absolute;
background: black;
color: #fff;
display: inline-block;
padding: 10px;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
visibility: hidden;
transition: all .3s;
will-change: transform;
}
.bwdihp-tooltip-content.open-tooltip {
opacity: 1!important;
visibility: visible!important;
}
.bwdihp-tooltip-text {
display: block;
text-align: center;
}
.bwdihp-tooltip-img {
display: block;
}
.bwdihp-tooltip-img.left {
margin-left: 0;
margin-right: auto;
}
.bwdihp-tooltip-img.center {
margin: auto;
}
.bwdihp-tooltip-img.right {
margin-left: auto;
margin-right: 0;
}
.bwdihp-hotspot-content .bwdihp-tooltip-content .bwdihp-tooltip-btn {
background: #663399;
color: #fff;
padding: 5px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 1;
display: inline-block;
}
.bwdihp-tooltip-content.yes::before {
content: "";
position: absolute;
top: 98%;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 10px;
clip-path: polygon(50% 100%, 100% 0, 0 0);
background: #000;
}
.bwdihp-hotspot-content:hover .bwdihp-tooltip-content {
opacity: 1;
visibility: visible;
}
.bwdihp-hotspot-content.top .bwdihp-tooltip-content {
top: -11px;
}
.bwdihp-hotspot-content.bottom .bwdihp-tooltip-content {
transform: translate(-50%, 100%);
-webkit-transform: translate(-50%, 100%);
-moz-transform: translate(-50%, 100%);
-ms-transform: translate(-50%, 100%);
-o-transform: translate(-50%, 100%);
}
.bwdihp-wrapper .bwdihp-img-hotspot:hover .bwdihp-hots-point.bottom .bwdihp-tooltip-content {
opacity: 1;
visibility: visible;
top: unset;
}
.bwdihp-hotspot-content.bottom .bwdihp-tooltip-content::before {
bottom: 98%;
top: auto;
transform: translateX(-50%) rotate(180deg);
}
.bwdihp-hotspot-content.left .bwdihp-tooltip-content {
left: -12px!important;
top: 50%!important;
transform: translate(-100%, -50%)!important;
-webkit-transform: translate(-100%, -50%)!important;
-moz-transform: translate(-100%, -50%)!important;
-ms-transform: translate(-100%, -50%)!important;
-o-transform: translate(-100%, -50%)!important;
}
.bwdihp-hotspot-content.left .bwdihp-tooltip-content::before {
top: 50%!important;
right: 1px!important;
left: auto;
transform: translate(98%, -50%)!important;
-webkit-transform: translate(98%, -50%)!important;
-moz-transform: translate(98%, -50%)!important;
-ms-transform: translate(98%, -50%)!important;
-o-transform: translate(98%, -50%)!important;
clip-path: polygon(100% 50%, 0 0, 0 100%);
width: 12px;
height: 20px;
}
.bwdihp-hotspot-content.right .bwdihp-tooltip-content {
right: -14px!important;
top: 50%!important;
left: auto;
transform: translate(100%, -50%)!important;
-webkit-transform: translate(100%, -50%)!important;
-moz-transform: translate(100%, -50%)!important;
-ms-transform: translate(100%, -50%)!important;
-o-transform: translate(100%, -50%)!important;
will-change: transform;
}
.bwdihp-hotspot-content.right .bwdihp-tooltip-content::before {
top: 50%!important;
left: 1px!important;
right: auto;
transform: translate(-98%, -50%)!important;
-webkit-transform: translate(-98%, -50%)!important;
-moz-transform: translate(-98%, -50%)!important;
-ms-transform: translate(-98%, -50%)!important;
-o-transform: translate(-98%, -50%)!important;
clip-path: polygon(0 50%, 100% 100%, 100% 0);
width: 12px;
height: 20px;
}
.bwdihp-hotspot-img-align-left .bwdihp-img {
margin-left: 0;
margin-right: auto;
}
.bwdihp-hotspot-img-align-center .bwdihp-img {
margin-left: auto;
margin-right: auto;
}
.bwdihp-hotspot-img-align-right .bwdihp-img {
margin-left: auto;
margin-right: 0;
}
.bwdihp-hotspot-wrapper .bwdihp-img {
overflow: hidden;
}.her-extra{
display: inline-block;
}