/* Animation */
@-webkit-keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}
@keyframes 
pulsate {  0% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0.8;
}
 45% {
 -webkit-transform: scale(1.75);
 transform: scale(1.75);
 opacity: 0;
}
}

body { margin: 0; }

/* Hotspot */

.responsive-hotspot-wrap {
  background-color: #ededed;
  background-size: cover;
  background-position: center center;
  position: relative;
}

.responsive-hotspot-wrap .img-responsive { max-width: 100%; }

.responsive-hotspot-wrap .hot-spot {
  position: absolute;
  width: 10px;
  height: 10px;
  top: 5px;
  left: 5px;
  text-align: center;
  background-color: #cd0e2c;
  color: #fff;
  border-radius: 100%;
  cursor: pointer;
  transition: all .3s ease;
}

.responsive-hotspot-wrap .hot-spot .circle {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin: -0.5em auto auto -0.5em;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  border-radius: 50%;
  border: 1px solid #cd0e2c;
  opacity: 0;
  /*-webkit-animation: pulsate 3s ease-out infinite;
  animation: pulsate 3s ease-out infinite;*/
}

.responsive-hotspot-wrap .hot-spot .hot-tool-tip {
  color: #fff;
  display: none;
  font-size: 14px;
  opacity: 1.0;
  left: 0px;
  position: absolute;
  text-align: left;
  bottom: 0;
  z-index: 999;
}

.responsive-hotspot-wrap .hot-spot .hot-tool-tip p:last-child { margin-bottom: 0; }

/* customized */

.responsive-hotspot-wrap .hot-spot .hot-tool-tip {
		-webkit-animation-duration: 0.6s;
		-moz-animation-duration: 0.6s;
		-o-animation-duration: 0.6s;
		animation-duration: 0.6s;
		display: block;
		opacity: 0;
	}
	
	.hotspotanimate {
  -webkit-animation-duration: 0.6s;
     -moz-animation-duration: 0.6s;
       -o-animation-duration: 0.6s;
          animation-duration: 0.6s;

  -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
       -o-animation-fill-mode: both;
          animation-fill-mode: both;


}
	
	@-webkit-keyframes cardIntop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-moz-keyframes cardIntop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@-o-keyframes cardIntop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

@keyframes cardIntop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
}

.cardIntop {
opacity: 1;
  -webkit-animation-name: cardIntop;
  -moz-animation-name: cardIntop;
  -o-animation-name: cardIntop;
  animation-name: cardIntop;
}
	
@-webkit-keyframes cardOuttop {
  0% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -webkit-transform-origin: 50% 100% 0px;
      -webkit-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-moz-keyframes cardOuttop {
  0% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -moz-transform-origin: 50% 100% 0px;
      -moz-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@-o-keyframes cardOuttop {
  0% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100% {
    -o-transform-origin: 50% 100% 0px;
      -o-transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

@keyframes cardOuttop {
  0% {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(0deg) scale(1, 1);
      opacity: 1;
  }
  100%
  {
    transform-origin: 50% 100% 0px;
      transform: perspective(500px) rotateX(-90deg) scale(0.5, 0.5);
      opacity: 0;
  }
}

.cardOuttop {
	-ms-transform: scale(0,0); /* IE 9 */
    -webkit-transform: scale(0,0); /* Safari */
    transform: scale(0,0); /* Standard syntax */
  -webkit-animation-name: cardOuttop;
  -moz-animation-name: cardOuttop;
  -o-animation-name: cardOuttop;
  animation-name: cardOuttop;
  
}

.hot-popover {
	width: 450px;
	font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
	position: absolute;
	z-index: 1010;
	opacity: 0;
	/*display: none;*/
	/*height: 200px;*/
	text-align: left;
	white-space: normal;
	background-color: transparent;
		  cursor: default;
		  padding-bottom: 25px;
	-ms-transform: scale(0,0); /* IE 9 */
    -webkit-transform: scale(0,0); /* Safari */
    transform: scale(0,0); /* Standard syntax */
}

.hot-popover.top {
  margin-top: -10px;
}

.hot-popover h4.popover-title {
	padding: 0 0 15px 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: bold !important;
	line-height: 18px !important;
	border-bottom: 1px solid #ebebeb !important;
	color: #ffffff !important;
	border-radius: 0 !important;
	background-color: transparent !important;
}

.hot-popover .popover-content {
  padding: 10px 0 0 0;
  color: #ffffff;
}

.hot-popover .popover-content p {
	color: #ffffff;
}

.hot-popover .popover-content a {
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}

.hot-popover .popover-content a:hover, .hot-popover .popover-content a:focus {
	color: #ffffff;
	text-decoration: underline;
}

.hot-popover .cq-arrow,
.hot-popover .cq-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.hot-popover .cq-arrow {
  border-width: 11px;
}

.hot-popover .cq-arrow:after {
  border-width: 10px;
  content: "";
}

.hot-popover.top .cq-arrow {
  bottom: 15px;
  left: 50%;
  margin-left: -11px;
/*  border-top-color: #CCC;
  border-top-color: rgba(0, 0, 0, 0);*/
  border-bottom-width: 0;
}

.hot-popover.top .cq-arrow:after {
  bottom: 1px;
  margin-left: -10px;
  border-top-color: #0a0203;
  border-bottom-width: 0;
}

.hot-spot span.lable {
	position: absolute;
	top: -5px;
	left: 100%;
	color: #000000;
	padding: 0 8px;
	white-space: nowrap;
	line-height: 20px;
	text-transform: uppercase;
	    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
}

.hot-popover .popover-inner {
	width: 100%;
	background-color: #0a0203;
	/*border: 1px solid #ccc;*/
	/*border: 1px solid rgba(0, 0, 0, 0.2);*/
	-webkit-border-radius: 6px;
	 -moz-border-radius: 6px;
		  border-radius: 6px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	 -moz-background-clip: padding;
		  background-clip: padding-box;
		  padding: 20px 20px;
}