.zp-txt, .zp-ttl, .zp-txt:after, path, .zp-pulse, .zp-txt2, .zp-arrow, .zp-btn
{transition: all 500ms; -webkit-transition: all 500ms; -moz-transition: all 500ms; -o-transition: all 500ms;}
.zp-point:after
{transition: all 250ms; -webkit-transition: all 250ms; -moz-transition: all 250ms; -o-transition: all 250ms;}    
.zp-points {display: inline-block; width: 100%; vertical-align: top; z-index: 20; text-align: center;}
.zp-points, .zp-points * {box-sizing: border-box; -webkit-box-sizing: border-box; outline: 0px;}
.zp-points-c {display: inline-block; max-width: 100%; vertical-align: top; position: relative; counter-reset: points}
.zp-points-cc {display: inline-block; width: 100%; vertical-align: top; position: relative;}
.zp-points-cc img {position: absolute; left: 0px; top: 0px; max-width: 100%; max-height: 100%; width: auto; height: auto;}
.zp-point {display: inline-block; background-color: transparent; border-radius: 99px; -webkit-border-radius: 99px; position: absolute; cursor: pointer; z-index: 30; border: 0px; width: 30px; margin-left: -15px; margin-top: -15px; padding: 0px; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
.zp-point.active {z-index: 40;}
.zp-point .zp-pulse {width: 22px; height: 22px; margin: 4px; background-color: #ff0f30; border-radius: 99px; -webkit-border-radius: 99px; display: inline-block; float: left; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
.zp-point:hover .zp-pulse, .zp-point.active .zp-pulse {transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5);}
.zp-point:hover .zp-pulse {background-color: #000}
.zp-point .zp-pulse:before {counter-increment: points; content: counter(points); color: #fff; font-size: 12px; line-height: 24px;  position: absolute; left: 0px; top: 0px; width: 100%; display: inline-block; text-align: center;}
.zp-point:hover .zp-pulse:before, .zp-point.active .zp-pulse:before {line-height: 22px;}
.zp-point:before {content: ''; display: inline-block; width: 22px; height: 22px; border-radius: 99px; -webkit-border-radius: 99px; border: 1px solid #ff0f30; position: absolute; left: 3px; top: 3px; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); animation: zp_point 1500ms ease-in-out infinite; -webkit-animation: zp_point 1500ms ease-in-out infinite;}         .zp-txt > *, .zp-txt2c > * {display: inline-block; width: 100%; vertical-align: top; text-align: center; color: #fff; padding: 10px;}
.zp-txt *, .zp-txt2c * {color: #fff;}
.zp-ttl {font-size: 20px; line-height: 24px; font-weight: 500; background-color: #ff0f30; color: #fff;}
.zp-description {font-size: 14px; font-weight: 300; text-align: justify; max-height: 400px; overflow-y: auto;}
.zp-description a {color: #fff !important; text-decoration: underline;}
.zp-description a:hover {text-decoration: none;}
.zp-description {line-height: 24px;}
.zp-description.wp-editor ul > li::before {top: 12px;}
.zp-description.wp-editor ul > li:first-child:after {top: 12px;}
.zp-description.wp-editor ul > li:last-child::after {height: 12px;}
.zp-txt2 {width: 100%; padding: 0px 20px; position: absolute; margin-top: 30px; transform: scale(0); z-index: 35; cursor: pointer;}
.zp-txt2.active {transform: scale(1)}
.zp-txt2 .zp-txt2c {background-color: rgba(0,0,0,0.8); width: 100% !important; display: inline-block; vertical-align: top;}
.zp-arrow {position: absolute; top: 100%; margin-top: 0px; width: 0px; height: 0px; left: 50%; border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 12px solid #ff0f30; opacity: 0; margin-left: -5px; margin-top: 3px; transform: scale(0); transform-origin: 50% 100%;}
.zp-point.active .zp-arrow {opacity: 1; transform: scale(1)}
.zp-legend {display: inline-block; width: 100%; vertical-align: top; margin: 0px; margin-top: 0px; padding: 0px;}
.zp-legend li {margin: 0px; padding: 10px 5px 0px 5px; width: 50%; clear: none; vertical-align: top; float: left;}
.zp-legend li:nth-child(odd) {clear: both; padding-left: 0px;}
.zp-legend li:nth-child(even) {padding-right: 0px;}
.zp-legend li .zp-btn {width: 100%; background-color: #ff0f30; padding: 10px; text-align: left; color: #fff; border: 0px; outline: 0px; cursor: pointer;}
.zp-legend li .zp-btn:hover, .zp-legend li .zp-btn.active {background-color: #4a4a4c}
@-webkit-keyframes zp_point {
0% {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
50% {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3);}
100% {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
}
@keyframes zp_point {
0% {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
50% {transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3);}
100% {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
}
@media all and (max-width: 750px){
.zp-legend li {width: 100%; padding-left: 0px; padding-right: 0px; padding-top: 5px}
}