#top-menu {
	padding-left: 15px
}

#features-menu a {
	padding-top: 7px;
	padding-bottom: 7px
}

#buy-item {
	float: right;
	width: 200px
}

#browsers {
	display: inline-block;
	float: right;
	font-size: 12px;
	margin: 48px 20px 0 0
}

#logo {
	padding-top: 100px;
	text-align: center;
	font-size: 12px
}

#logo .hs-area {
	display: inline-block
}

#description {
	margin: 70px 20px 30px
}


.xhtl{margin-top: 70px;}
.tl-tit{width: 80%;margin: 0 auto;padding-top: 3%;    text-align: center;    font-size: 32px;color: #000;}

section {
	padding: 10px 20px 0 20px;
	        overflow-x: scroll;
}

section ul {
	list-style-type: circle;
	margin: 0 0 10px 25px;
	padding: 0 25px
}

section .hs-area {
	display: inline-block;
	font-size: 12px;
	display: block;
	    margin: 0 auto;
	    width: 1300px;
}

.img-title:before {
	left: 50px !important
}

#default-spots-container,
#responsive-fluid-container {
	text-align: center;
	padding: 30px 0 20px
}

#aiming_effect .hs-area {
	margin-top: 50px
}

#resize {
	width: 500px
}

#control_spots_with_javascript table {
	margin-top: 40px;
	margin-bottom: 40px
}

#control_spots_with_javascript table button {
	width: 150px
}

#visiblity-btns {
	text-align: center;
	padding-bottom: 20px
}

#control-btns {
	padding-right: 20px
}

#custom-spots-container {
	margin: 25px 0 25px;
	text-align: center
}

#custom_spots {
	padding-bottom: 200px
}

#custom-spots-container .hs-area {
	display: inline-block
}



.hs-area {
	position: relative
}

.hs-wrap,
.tt-wrap {
	position: absolute;
	display: none
}

.tt-wrap {
	border: 10px solid transparent;
	z-index: 1000
}

.tt-wrap.left {
	top: -2px;
	right: 100%
}

.tt-wrap.right {
	top: -2px;
	left: 100%
}

.tt-wrap.top {
	bottom: 100%;
	left: -2px
}

.tt-wrap.bottom {
	top: 100%;
	left: -2px
}

.invisible-spot,
.red-spot,
.onhover-spot {
	background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}

.red-spot {
	border: 2px solid #f00;
	opacity: .7;
	box-shadow: 0 0 10px #000
}

.red-spot.active {
	box-shadow: 0 0 5px #ff0d0d inset;
	border-color: #ff0d0d;
	opacity: .6
}

.shadow-spot {
	box-shadow: 1px 1px 7px -1px #e1baba;
	
}

.shadow-spot.active {
	box-shadow: 0 0 10px #e1baba, 0 0 20px #c58888;   
	transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
	
	
	
}


.glass-spot {
	box-shadow: 0 0 20px #fff
}

.glass-spot.active {
	box-shadow: 0 0 50px #fff
}

.sniper-spot {
	background-color: #f00;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	z-index: 10;
	opacity: .8;
	border: 2px solid #752424;
	box-shadow: 0 0 12px #000 inset
}

.sniper-spot:before,
.sniper-spot:after {
	content: "";
	position: absolute;
	background-color: #f00
}

.sniper-spot:before {
	top: 3px;
	left: 11px;
	width: 2px;
	height: 19px
}

.sniper-spot:after {
	top: 11px;
	left: 3px;
	width: 19px;
	height: 2px
}

.sniper-spot.active:before,
.sniper-spot.active:after {
	width: 0;
	height: 0
}

.sniper-spot.active {
	border: 2px solid #000;
	background-color: #f99;
	opacity: .4;
	box-shadow: 0 0 10px #000
}

.onhover-spot {
	border: 2px solid transparent
}

.onhover-spot.active {
	border: 2px solid #f00;
	opacity: .7;
	box-shadow: 0 0 10px #000
}

.img-spot img,
.markup-spot div:last-child {
	display: none
}

.tip-tooltip {
	display: block;
	border-radius: 8px;
	padding: 8px 5px 5px 5px;
	min-height: 20px;
	min-width: 30px;
	background-color: #000;
	color: #fff;
	box-shadow: 0 0 10px #000
}

.tip-tooltip:before {
	content: "";
	position: absolute;
	border: 8px solid;
	width: 0;
	height: 0;
	z-index: 999
}

.tip-tooltip.right:before {
	top: 10px;
	right: 100%;
	border-color: transparent #000 transparent transparent
}

.tip-tooltip.left:before {
	top: 10px;
	left: 100%;
	border-color: transparent transparent transparent #000
}

.tip-tooltip.top:before {
	top: 100%;
	left: 12px;
	border-color: #000 transparent transparent transparent
}

.tip-tooltip.bottom:before {
	bottom: 100%;
	left: 12px;
	border-color: transparent transparent #000 transparent
}

.tip-tooltip.white {
	background-color: #fff;
	color: #000
}

.tip-tooltip.white.right:before {
	border-color: transparent #fff transparent transparent
}

.tip-tooltip.white.left:before {
	border-color: transparent transparent transparent #fff
}

.tip-tooltip.white.top:before {
	border-color: #fff transparent transparent transparent
}

.tip-tooltip.white.bottom:before {
	border-color: transparent transparent #fff transparent
}

.bubble-tooltip {
	display: block;
	position: relative;
	background-color: #fff;
	color: #000;
	border-radius: 10px;
	box-shadow: 0 0 10px #fff;
	padding: 10px 5px 8px 5px;
	opacity: .8;
	z-index: 999;
	min-height: 20px;
	min-width: 30px
}

.bubble-tooltip:before {
	content: "";
	position: absolute;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	bottom: -10px;
	left: 9px;
	height: 16px;
	width: 20px
}

.bubble-tooltip:after {
	content: "";
	position: absolute;
	background-color: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 20px;
	bottom: -17px;
	left: 18px;
	height: 9px;
	width: 11px
}

.aim-tooltip {
	display: none;
	position: absolute;
	background-color: #000;
	color: #fff;
	padding: 6px
}

.aim-tooltip .tt-content {
	display: none
}

.aim-tooltip.top {
	border-radius: 10px 10px 0 0
}

.aim-tooltip.right {
	border-radius: 0 10px 10px 0
}

.aim-tooltip.bottom {
	border-radius: 0 0 10px 10px
}

.aim-tooltip.left {
	border-radius: 10px 0 0 10px
}

.hs-aim-rect,
.hs-aim-pillar {
	display: none;
	position: absolute;
	background-color: #000;
	opacity: .75;
	z-index: 1000
}

.hs-aim-pillar {
	opacity: .2;
	z-index: 1001;
	background-color: #fff
}

.hs-flatten {
	border-radius: 0 !important
}