:root {
--sc-hotspot-content-item-size: 20px;
--sc-hotspot-content-item-size-half: calc( var(--sc-hotspot-content-item-size) / 2 );
--sc-hotspot-content-item-size-half-: calc( var(--sc-hotspot-content-item-size) / -2 );
--sc-hotspot-content-item-size-double: calc( var(--sc-hotspot-content-item-size) * 2 );
--sc-hotspot-content-item-size-double-: calc( var(--sc-hotspot-content-item-size) * -2 );
--sc-hotspot-content-item-popup-z-index: 10;
}
.sc_hotspot_content {
position: relative;
}
.sc_hotspot_image_link {
display: block;
position: absolute;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.sc_hotspot_item {
position: absolute;
min-width: var(--sc-hotspot-content-item-size);
min-height: var(--sc-hotspot-content-item-size);
margin: var(--sc-hotspot-content-item-size-half-) 0 0 var(--sc-hotspot-content-item-size-half-);
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: var(--sc-hotspot-content-item-size);
-ms-border-radius: var(--sc-hotspot-content-item-size);
border-radius: var(--sc-hotspot-content-item-size);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.sc_hotspot_image_loaded ~ .sc_hotspot_item_visible_always,
.sc_hotspot_image_loaded:hover ~ .sc_hotspot_item_visible_hover,
.sc_hotspot_image_loaded ~ .sc_hotspot_image_link:hover ~ .sc_hotspot_item_visible_hover,
.sc_hotspot_image_loaded ~ .sc_hotspot_item_visible_hover.sc_hotspot_item_hovered {
opacity: 1;
}
.sc_hotspot_item_sonar {
display: block;
background-color: #fff;
position: absolute;
z-index: 1;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
-webkit-border-radius: var(--sc-hotspot-content-item-size);
-ms-border-radius: var(--sc-hotspot-content-item-size);
border-radius: var(--sc-hotspot-content-item-size);
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-animation: sc-hotspot-sonar 2s ease infinite;
-ms-animation: sc-hotspot-sonar 2s ease infinite;
animation: sc-hotspot-sonar 2s ease infinite;
}
.sc_hotspot_item_icon:not(.sc_hotspot_item_icon_type_custom) {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
line-height: var(--sc-hotspot-content-item-size);
}
.sc_hotspot_item_icon_type_custom {
position: relative;
z-index: 2;
display: block;
text-align: center;
line-height: 1;
min-width: var(--sc-hotspot-content-item-size);
min-height: var(--sc-hotspot-content-item-size);
padding: 4px 6px;
}
.sc_hotspot_item_icon {
background-color: #f0f0f0;
-webkit-border-radius: var(--sc-hotspot-content-item-size);
-ms-border-radius: var(--sc-hotspot-content-item-size);
border-radius: var(--sc-hotspot-content-item-size);
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.sc_hotspot_item_icon:before {
display: none !important;
}
.sc_hotspot_item_icon.sc_hotspot_item_icon_type_svg svg, .sc_hotspot_item_icon.sc_hotspot_item_icon_type_svg object {
width: var(--sc-hotspot-content-item-size);
height: var(--sc-hotspot-content-item-size);
line-height: var(--sc-hotspot-content-item-size);
text-align: center;
overflow: hidden;
-webkit-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}
.sc_hotspot_item_icon.sc_hotspot_item_icon_type_images img {
max-width: var(--sc-hotspot-content-item-size);
height: auto;
overflow: hidden;
-webkit-border-radius: var(--sc-hotspot-content-item-size);
-ms-border-radius: var(--sc-hotspot-content-item-size);
border-radius: var(--sc-hotspot-content-item-size);
}
.sc_hotspot_item_icon span {
color: #000;
}
.sc_hotspot_item_icon span.sc_icon_type_custom,
.sc_hotspot_item_icon span.sc_icon_type_number {
font-size: 10px;
}
.sc_hotspot_item_open_hover span.sc_hotspot_item_icon {
cursor: default;
}
.sc_hotspot_item_open_click .sc_hotspot_item_icon {
cursor: pointer;
} .sc_hotspot_item_popup {
z-index: -1;
padding: 1.5em;
width: 250px;
background: #fff;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.8s ease, transform 0.8s ease;
-ms-transition: opacity 0.8s ease, transform 0.8s ease;
transition: opacity 0.8s ease, transform 0.8s ease;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}
.sc_hotspot_item_popup_tl {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
bottom: var(--sc-hotspot-content-item-size-double-);
right: var(--sc-hotspot-content-item-size-double);
}
.sc_hotspot_item_popup_tc {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
bottom: var(--sc-hotspot-content-item-size-double);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.sc_hotspot_item_popup_tr {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
bottom: var(--sc-hotspot-content-item-size-double-);
left: var(--sc-hotspot-content-item-size-double);
}
.sc_hotspot_item_popup_ml {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: 50%;
right: var(--sc-hotspot-content-item-size-double);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.sc_hotspot_item_popup_mc {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.sc_hotspot_item_popup_mr {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: 50%;
left: var(--sc-hotspot-content-item-size-double);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.sc_hotspot_item_popup_bl {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: var(--sc-hotspot-content-item-size-double-);
right: var(--sc-hotspot-content-item-size-double);
}
.sc_hotspot_item_popup_bc {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: var(--sc-hotspot-content-item-size-double);
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.sc_hotspot_item_popup_br {
position: absolute;
z-index: var(--sc-hotspot-content-item-popup-z-index);
top: var(--sc-hotspot-content-item-size-double-);
left: var(--sc-hotspot-content-item-size-double);
}
.sc_hotspot_item_popup_align_left {
text-align: left;
}
.sc_hotspot_item_popup_align_center {
text-align: center;
}
.sc_hotspot_item_popup_align_right {
text-align: right;
} .sc_hotspot_item_open_hover .sc_hotspot_item_popup:before {
content: ' ';
display: block;
position: absolute;
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_tc:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_bc:before {
left: 0;
width: 100%;
height: var(--sc-hotspot-content-item-size);
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_tc:before {
top: 100%;
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_bc:before {
bottom: 100%;
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_tl:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_tr:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_ml:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_mr:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_bl:before, .sc_hotspot_item_open_hover .sc_hotspot_item_popup_br:before {
top: 0;
height: 100%;
width: var(--sc-hotspot-content-item-size);
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_tl:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_ml:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_bl:before {
left: 100%;
}
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_tr:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_mr:before,
.sc_hotspot_item_open_hover .sc_hotspot_item_popup_br:before {
right: 100%;
} .sc_hotspot_item_popup {
pointer-events: none;
}
.sc_hotspot_item_opened .sc_hotspot_item_popup,
.sc_hotspot_item_open_hover:hover .sc_hotspot_item_popup,
.sc_hotspot_item_open_hover:focus .sc_hotspot_item_popup {
pointer-events: visible;
z-index: var(--sc-hotspot-content-item-popup-z-index);
opacity: 1;
} .sc_hotspot_item_popup_close.trx_addons_button_close {
width: 1.75em;
height: 1.75em;
line-height: 1.75em;
text-align: center;
z-index: 10;
}
.sc_hotspot_item_popup_close.trx_addons_button_close .trx_addons_button_close_icon:before,
.sc_hotspot_item_popup_close.trx_addons_button_close .trx_addons_button_close_icon:after {
border-color: #000;
} .sc_hotspot_item_subtitle {
font-size: 1.15em;
margin: 1em 0 0;
}
.sc_hotspot_item_subtitle .post_meta {
margin: 0;
}
.sc_hotspot_item_title {
margin: 0.2em 0 0;
}
.sc_hotspot_item_price {
font-size: 1.25em;
margin: 0.5em 0 0;
}
.sc_hotspot_item_description {
margin: 1em 0 0;
}
.sc_hotspot_item_description span {
display: block;
margin-top: 0.25em;
}
.sc_hotspot_item_link {
margin: 1.5em 0 0;
}
.sc_hotspot_item_popup > [class*="sc_hotspot_item_"]:first-child {
margin-top: 0;
}
.sc_hotspot_item_link_cover {
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
} @-webkit-keyframes sc-hotspot-sonar {
0% {
opacity: 0;
-webkit-transform: scale(0.2, 0.2);
-ms-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
}
50% {
opacity: .8;
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes sc-hotspot-sonar {
0% {
opacity: 0;
-webkit-transform: scale(0.2, 0.2);
-ms-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
}
50% {
opacity: .8;
}
100% {
opacity: 0;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
}