.scalize .content .body p:last-child, .scalize .content .head .title, .scalize .content.left.top {
margin-bottom: 0
}
.scalize {
transform-origin: top left;
position: relative
}
.scalize img.target {
width: 100%;
position: relative;
z-index: 1
}
.scalize .content {
position: absolute;
background: #fff;
width: 250px;
display: none;
z-index: 99;
height: auto;
}
.scalize .content .head {
position: relative;
padding: 10px 15px;
background: #efefef;
border-bottom: solid 1px #dfdfdf
}
.scalize .content .head .exit {
float: right;
display: block;
width: 38px;
height: 38px;
border-left: solid 1px #ccc;
position: relative;
top: -10px;
left: 15px;
filter: alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-webkit-opacity: .5;
-khtml-opacity: .5;
-moz-opacity: .5;
-ms-opacity: .5;
-o-opacity: .5;
opacity: .5
}
.scalize .content .head .exit:hover {
filter: alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-webkit-opacity: .8;
-khtml-opacity: .8;
-moz-opacity: .8;
-ms-opacity: .8;
-o-opacity: .8;
opacity: .8;
background: rgba(0,0,0,.3)
}
.scalize .content .head .exit img {
padding: 7px;
width: 100%
}
.scalize .content .body {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
padding: 10px 15px;
background: #fff;
position: relative
}
.scalize .content .body img {
width: 100%
}
.scalize .content .body:before {
content: '';
position: absolute;
border: 15px solid transparent;
top: 0;
display: none; }
.scalize .content .footer {
padding: 10px 15px;
border-top: solid 1px #dfdfdf;
position: relative
}
.scalize .content.center .body:before {
top: 50%;
margin-top: -24px
}
.scalize .content.left {
margin-left: -265px
}
.scalize .content.left .body:before {
left: 100%;
border-left-color: #fff;
border-right: 0
}
.scalize .content.left.top {
margin-top: -43px
}
.scalize .content.left.bottom {
margin-top: 50px
}
.scalize .content.left.bottom .body:before {
top: 100%;
margin-top: -56px
}
.scalize .content.right {
margin-left: 35px
}
.scalize .content.right .body:before {
right: 100%;
border-right-color: #fff;
border-left: 0
}
.scalize .content.right.top {
margin-top: -43px;
margin-bottom: 0
}
.scalize .content.right.bottom {
margin-top: 50px
}
.scalize .content.right.bottom .body:before {
top: 100%;
margin-top: -56px
}
.wrap-selector {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 3
}
.scalize .item-point {
display: block;
position: absolute;
width: 20px;
height: 20px;
background: #e42c25;
border: 3px solid #FFF;
text-decoration: none!important;
-webkit-transition: all .3s ease-in-out;
-khtml-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-khtml-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-ms-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-o-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5)
}
.scalize .item-point>div {
position: relative;
cursor: default;
z-index: 9
}
.scalize .item-point>div .toggle {
display: block;
position: absolute;
top: -3px;
left: -3px
}
.scalize .item-point.circle {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%
}
.scalize .item-point.circle.active, .scalize .item-point.circle.disabled {
border: 3px solid #64ffda;
background: #64ffda
}
.scalize .item-point.circle .toggle {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%
}
.scalize .item-point.square {
width: 24px;
height: 24px;
font-weight: 700;
line-height: 27px;
color: #1d1d1d;
background: #a7ffeb;
border: 2px solid #00bfa5;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
text-align: center
}
.scalize .item-point.square.active, .scalize .item-point.square.disabled {
color: #fff;
background: #00bfa5
}
.scalize .item-point.square>div .toggle {
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
top: -2px;
left: -2px
}
.scalize .item-point.disabled .toggle {
cursor: default
}
.scalize .item-point.content {
width: 200px;
height: 0;
border: 0
}
.scalize .item-point.pulse {
box-shadow: 0 0 0 #e42c25;
animation: pulse 2s infinite
}
.scalize .item-point.pulse:hover {
animation: none
}
.scalize .item-point.pulse2:after, .scalize .item-point.pulse2:before {
content: "";
margin: -3px 0 0 -3px;
position: absolute;
box-sizing: border-box;
width: 20px;
height: 20px;
border: 1px solid #e42c25;
border-radius: 50%
}
.scalize .item-point.pulse2:before {
animation: blip1 1s infinite cubic-bezier(0, .6, 1, .6)
}
.scalize .item-point.pulse2:after {
animation: blip2 1s infinite linear
}
.scalize .item-point.marker {
background: 0 0;
-webkit-box-shadow: 0 0 0 rgba(0,0,0,.4);
-khtml-box-shadow: 0 0 0 rgba(0,0,0,.4);
-moz-box-shadow: 0 0 0 rgba(0,0,0,.4);
-ms-box-shadow: 0 0 0 rgba(0,0,0,.4);
-o-box-shadow: 0 0 0 rgba(0,0,0,.4);
box-shadow: 0 0 0 rgba(0,0,0,.4);
border: 0
}
.scalize .item-point.marker.active {
border: 0
}
.scalize .item-point.marker.active .pin {
background: #00bfa5
}
.scalize .item-point.marker.active .pin:after {
background: #64ffda
}
.scalize .item-point.marker .toggle {
width: 30px;
height: 30px;
top: -6px;
left: -6px
}
.scalize .item-point.marker .pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #64ffda;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 50%;
top: 50%;
margin: -15px 0 0 -15px;
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
animation-name: bounce;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
z-index: 3
}
.scalize .item-point.marker .pin:after {
content: '';
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #00bfa5;
position: absolute;
border-radius: 50%
}
.scalize .item-point.marker .pulse {
background: rgba(0,0,0,.5);
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
top: 50%;
margin: 15px 0 0 -7px;
-webkit-transform: rotateX(55deg);
-moz-transform: rotateX(55deg);
-ms-transform: rotateX(55deg);
transform: rotateX(55deg);
z-index: 2
}
.scalize .item-point.marker .pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-moz-animation: pulsate 1s ease-out;
-ms-animation: pulsate 1s ease-out;
animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-webkit-box-shadow: 0 0 1px 2px #a7ffeb;
box-shadow: 0 0 1px 2px #a7ffeb;
-webkit-animation-delay: 1.1s;
-moz-animation-delay: 1.1s;
-ms-animation-delay: 1.1s;
animation-delay: 1.1s
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow:0 0 0 0 #e42c25
}
70% {
-webkit-box-shadow:0 0 0 20px rgba(204,169,44,0)
}
100% {
-webkit-box-shadow:0 0 0 0 rgba(204,169,44,0)
}
}
@keyframes pulse {
0% {
-moz-box-shadow:0 0 0 0 #ca413c;
box-shadow:0 0 0 0 #ca413c
}
70% {
-moz-box-shadow:0 0 0 20px rgba(204,169,44,0);
box-shadow:0 0 0 20px rgba(204,169,44,0)
}
100% {
-moz-box-shadow:0 0 0 0 rgba(204,169,44,0);
box-shadow:0 0 0 0 rgba(204,169,44,0)
}
}
@keyframes blip1 {
to {
transform:scale(3);
opacity:0
}
}
@keyframes blip2 {
to {
transform:scale(2);
opacity:0
}
}
@-moz-keyframes pulsate {
0% {
-webkit-transform:scale(.1, .1);
-moz-transform:scale(.1, .1);
-ms-transform:scale(.1, .1);
transform:scale(.1, .1);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
50% {
opacity:1;
-ms-filter:none;
filter:none
}
100% {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
-ms-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform:scale(.1, .1);
-moz-transform:scale(.1, .1);
-ms-transform:scale(.1, .1);
transform:scale(.1, .1);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
50% {
opacity:1;
-ms-filter:none;
filter:none
}
100% {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
-ms-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
}
@-o-keyframes pulsate {
0% {
-webkit-transform:scale(.1, .1);
-moz-transform:scale(.1, .1);
-ms-transform:scale(.1, .1);
transform:scale(.1, .1);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
50% {
opacity:1;
-ms-filter:none;
filter:none
}
100% {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
-ms-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
}
@keyframes pulsate {
0% {
-webkit-transform:scale(.1, .1);
-moz-transform:scale(.1, .1);
-ms-transform:scale(.1, .1);
transform:scale(.1, .1);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
50% {
opacity:1;
-ms-filter:none;
filter:none
}
100% {
-webkit-transform:scale(1.2, 1.2);
-moz-transform:scale(1.2, 1.2);
-ms-transform:scale(1.2, 1.2);
transform:scale(1.2, 1.2);
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0)
}
}
@-moz-keyframes bounce {
0% {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-webkit-transform:translateY(-2000px) rotate(-45deg);
-moz-transform:translateY(-2000px) rotate(-45deg);
-ms-transform:translateY(-2000px) rotate(-45deg);
transform:translateY(-2000px) rotate(-45deg)
}
60% {
opacity:1;
-ms-filter:none;
filter:none;
-webkit-transform:translateY(30px) rotate(-45deg);
-moz-transform:translateY(30px) rotate(-45deg);
-ms-transform:translateY(30px) rotate(-45deg);
transform:translateY(30px) rotate(-45deg)
}
80% {
-webkit-transform:translateY(-10px) rotate(-45deg);
-moz-transform:translateY(-10px) rotate(-45deg);
-ms-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg)
}
100% {
-webkit-transform:translateY(0) rotate(-45deg);
-moz-transform:translateY(0) rotate(-45deg);
-ms-transform:translateY(0) rotate(-45deg);
transform:translateY(0) rotate(-45deg)
}
}
@-webkit-keyframes bounce {
0% {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-webkit-transform:translateY(-2000px) rotate(-45deg);
-moz-transform:translateY(-2000px) rotate(-45deg);
-ms-transform:translateY(-2000px) rotate(-45deg);
transform:translateY(-2000px) rotate(-45deg)
}
60% {
opacity:1;
-ms-filter:none;
filter:none;
-webkit-transform:translateY(30px) rotate(-45deg);
-moz-transform:translateY(30px) rotate(-45deg);
-ms-transform:translateY(30px) rotate(-45deg);
transform:translateY(30px) rotate(-45deg)
}
80% {
-webkit-transform:translateY(-10px) rotate(-45deg);
-moz-transform:translateY(-10px) rotate(-45deg);
-ms-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg)
}
100% {
-webkit-transform:translateY(0) rotate(-45deg);
-moz-transform:translateY(0) rotate(-45deg);
-ms-transform:translateY(0) rotate(-45deg);
transform:translateY(0) rotate(-45deg)
}
}
@-o-keyframes bounce {
0% {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-webkit-transform:translateY(-2000px) rotate(-45deg);
-moz-transform:translateY(-2000px) rotate(-45deg);
-ms-transform:translateY(-2000px) rotate(-45deg);
transform:translateY(-2000px) rotate(-45deg)
}
60% {
opacity:1;
-ms-filter:none;
filter:none;
-webkit-transform:translateY(30px) rotate(-45deg);
-moz-transform:translateY(30px) rotate(-45deg);
-ms-transform:translateY(30px) rotate(-45deg);
transform:translateY(30px) rotate(-45deg)
}
80% {
-webkit-transform:translateY(-10px) rotate(-45deg);
-moz-transform:translateY(-10px) rotate(-45deg);
-ms-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg)
}
100% {
-webkit-transform:translateY(0) rotate(-45deg);
-moz-transform:translateY(0) rotate(-45deg);
-ms-transform:translateY(0) rotate(-45deg);
transform:translateY(0) rotate(-45deg)
}
}
@keyframes bounce {
0% {
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-webkit-transform:translateY(-2000px) rotate(-45deg);
-moz-transform:translateY(-2000px) rotate(-45deg);
-ms-transform:translateY(-2000px) rotate(-45deg);
transform:translateY(-2000px) rotate(-45deg)
}
60% {
opacity:1;
-ms-filter:none;
filter:none;
-webkit-transform:translateY(30px) rotate(-45deg);
-moz-transform:translateY(30px) rotate(-45deg);
-ms-transform:translateY(30px) rotate(-45deg);
transform:translateY(30px) rotate(-45deg)
}
80% {
-webkit-transform:translateY(-10px) rotate(-45deg);
-moz-transform:translateY(-10px) rotate(-45deg);
-ms-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg)
}
100% {
-webkit-transform:translateY(0) rotate(-45deg);
-moz-transform:translateY(0) rotate(-45deg);
-ms-transform:translateY(0) rotate(-45deg);
transform:translateY(0) rotate(-45deg)
}
}
@media (max-width:480px) {
.scalize>div.content.animated {
top: 30px!important;
left: 50%!important;
margin: 0 0 0 -125px!important
}
.scalize>div.content.animated .body:before {
display: none
}
.scalize .item-point.content {
-ms-transform: scale(.7, .7);
-webkit-transform: scale(.7, .7);
transform: scale(.7, .7);
-ms-transform-origin: 20% 40%;
-webkit-transform-origin: 20% 40%;
transform-origin: 10% 10%
}
}
@media (max-width:360px) {
.item-point.square {
-ms-transform: scale(.7, .7);
-webkit-transform: scale(.7, .7);
transform: scale(.7, .7);
-ms-transform-origin: 20% 40%;
-webkit-transform-origin: 20% 40%;
transform-origin: 10% 10%
}
}