#hh-drag-halftone {
	position: absolute;
	bottom: 0%;
	left: 32%;
	z-index: 0;
	opacity: .12;
	width: 30%;
	height: auto;
	transform: rotate(180deg);
	transform-origin: center;
	max-width: 380px;
}

.hh-drag-holder {
	position: relative;
	width: 342px;
	font-size: 12px;
	line-height: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;

}
.hh-drag-positioner {
	position:absolute;
	left: 50%;
	top: 0%;
	margin-top: 70%;
	transform: translateX(-50%);
}
.hh-hai2-holder .hh-drag-holder {
  margin-left: auto;
  margin-right: auto;
}
  .hh-drag-rail {
		left: 0%;
    width: 100%;
    background-color: #fff;
    padding-bottom: 21%;
    border-radius: 45px;
    position: absolute;
    top: 0px;
  }
.hh-drag-left, .hh-drag-right {
	position: absolute;
    top: 100%;
	padding-top: 5px;

}
.hh-drag-left {
	left: 12%;
	transform: translateX(-50%);
}
.hh-drag-right {
	right: 	10%;
	transform: translateX(50%);
}

  .hh-drag-line {
    width: 80%;
    position: absolute;
    top: 50%;
		margin-top: -1px;
    left: 11%;
    height: 1px;
    opacity: .2;
  }

  .hh-drag-dots span {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    position: absolute;
    margin-top: -5px;
    top: 50%;
    cursor: pointer;
  }
  .hh-drag-dots span:nth-child(1){
    left: 11%;
  }
  .hh-drag-dots span:nth-child(2){
    left: 33%;
  }
  .hh-drag-dots span:nth-child(3){
    left: 61%;
  }
  .hh-drag-dots span:nth-child(4){
    left: 88%;
  }
  .hh-drag-slider {
		margin-left:1%;
    width: 79%;
    padding-bottom: 21%;
    position: relative;
  }
  .hh-drag-slider.ui-slider .ui-slider-handle:focus {
    outline: none;
  }
  .hh-drag-slider.ui-slider .ui-slider-handle {
    margin-top: 1.5%;
    padding-bottom: 24%;
    width: 24%;
    cursor: move;
    display: block;
     position: absolute;
    z-index: 2;
    -ms-touch-action: none;
    touch-action: none;
    border-radius: 50%;
    background-position: center;
    background-size: 46% auto;
    background-repeat: no-repeat;
		box-shadow: 0 2px 5px 0 rgba(38,55,70,0.32);
  }
	.hh-drag-slider.ui-slider .ui-slider-handle {
		background-image: url('../_images/hh-icons.php?icon=drag&color=ffffff');
	}
.hh-hai-header {
	margin-top: 170px;
}
  .hh-hai-holder {

    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
    height: 700px;
    position: relative;
  }
.hh-drag-holder-spacer-fix {
  padding-left: 140px;
}
.hh-hai2-holder {
  margin-top: 70px;
  max-width: 1314px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  height: 780px;
}

.hh-hai-main-content {
	max-width: 650px;
	width: 50%;
}

.hh-user-input ul.hh-drag-list li {
	padding-left: 22px;
}

.hh-user-input ul.hh-drag-list li:before {
	top: .15em;
}
.hh-drag-list-link {
	border-top: 1px solid #1c3145;
	padding-top: 15px;
	margin-top: 25px;
}
.hh-drag-list-link a {
	text-decoration: none;
}
.hh-drag-list-link a:after {
	content: ' \203A';
	font-size: 1.2em;
}
.hh-drag-small {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 1px;
}

.hh-hai-header {
	position: relative;
	z-index: 50;
}

.hh-list-box {
  background-color: #021931;
  color: #fff;
  padding: 30px;
}

.hh-hai-animation {
  position: absolute;
  top: 0%;
  right: 0%;
  height: 100%;
  width: 50%;
	margin-top: -8%;
}
.hh-hai-animation-inner {
  height: 100%;
  width: 100%;
  position: absolute;
}

#hh-hai-portait-lady {
  width: 48%;
  height: auto;
  position: absolute;
  top: 0%;
  margin-top: 20%;
  left: 24%;
  image-rendering: -webkit-optimize-contrast;
}
.hh-drag-left-content {
  position: relative;
}

.hh-drag-left-content .hh-hai-pages {
  position: absolute;
  top: 0px;
  left: 0px;
	-webkit-transform: translateX(100px);
	-ms-transform: translateX(100px);
  transform: translateX(100px);
  opacity: 0;
}

.hh-drag-left-content .hh-hai-page-1 {
  opacity: 1;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
  transform: translateX(0px);
	z-index: 5;
}


.hh-hai-circle {
  position: absolute;
	-webkit-box-shadow: 0 0 0px 0 rgba(255, 255, 255, .2);
  box-shadow: 0 0 0px 0 rgba(255,255,255,.2);
  border-radius: 50%;
}

.hh-hai-small-circle {
  top: 0%;
  margin-top: 20%;
  left: 25%;
  width: 50%;
  padding-bottom: 50%;
	border: 1px solid #475c6e;
}

.hh-hai-med-circle {
  top: 0%;
  margin-top: 12%;
  left: 15%;
  width: 68%;
  padding-bottom: 68%;
}

.hh-hai-large-circle {
  top: 0%;
  margin-top: 3%;
  left: 6%;
  width: 86%;
  padding-bottom: 86%;
}


#hai-circles-icons-step-1 {
  position: absolute;
  top: 0%;
  margin-top: 8%;
  left: 19%;
  width: 66%;
  height: auto;
	opacity: .6;
}

#hai-circles-icons-step-2 {
  position: absolute;
  top: 0%;
  margin-top: 5%;
  left: 14%;
  width: 74%;
  height: auto;
	opacity: .6;
}

#hai-circles-icons-step-3 {
  position: absolute;
  top: 0%;
  margin-top: 4%;
  left: 12%;
  width: 76%;
  height: auto;
	opacity: .6;
}

#hai-circles-icons-step-4 {
  position: absolute;
  top: 0%;
  margin-top: 1%;
  left: 7%;
  width: 81%;
  height: auto;
	opacity: .6;
}

.hh-hai2-box {
  background-color: #021931;
	padding: 50px;
	;
}
.hh-hai2-holder .hh-drag-left-content .hh-hai-pages {
   width: 52%;
	margin-left: 48%;
}

.hh-hai2-ha {
  position: absolute;
  top: 0%;
  left: 24%;
  width: 50%;
  height: auto;
  opacity: 0;
}

#hh-hai2-ha-1 {
  opacity: 1;
}

.hh-hai2-ears {
	position: absolute;
	top: 0px;
	 left: 0px;
	width: 48%;
}
.hh-hai2-ears-inner {
	width: 100%;
	position: relative;
	padding-bottom: 95%;
}
#hh-hai2-highlight-image {
	position: absolute;
	top: 0px;
	left: -3%;
	width: 100%;
	height: auto;
	z-index: 100;
}
.hh-hai2-drag-positioner {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 101;
}
.hh-hai-label {
  text-transform: uppercase;
  padding-bottom: 9px;
  margin-bottom: 12px;
  border-bottom: 2px solid #1a3044;
  font-size: 12px;
  line-height: 1.2em;
  letter-spacing: 2px;
  font-weight: 500;
}
.hh-hai2-box ul {
  margin-bottom: 10px;
}
.hh-hai2-box ul li {
  margin-bottom: 20px;
  padding-left: 20px;
}

.hh-hai2-chart-holder {
  border-top: 2px solid #1a3044;
  margin-top: 30px;
  padding-top: 30px;

  padding-left: 70px;
  position: relative;
  font-size: 24px;
  line-height: 1.4em;
  font-weight: 500;
  letter-spacing: -0.44px;
}

.hh-hai2-chart-holder .hh-pie-chart * {
  position: absolute;
  top: 22px;
  left: 0px;
  width: 50px;
  height: 50px;
}

.hh-hai2-box-title {
  max-width: 550px;
}

@media(max-width: 1200px){
	.hh-hai-animation {
		margin-top: -4%;
	}

	.hh-hai-header {
    margin-top: 120px;
	}
}

@media(max-width: 900px){
	#hh-drag-halftone {
    left: 58%;
    width: 76%;
	}
	.hh-hai-holder {
    margin-top: 80px;
		height: auto;
	}
	.hh-hai-animation {
		position: relative;
		top: auto;
		right: auto;
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		margin-top: -80px;

	}
	.hh-hai-animation-inner {
		position: relative;
		padding-bottom: 100%;
	}
	.hh-hai-main-content {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: 600px;
	}
	.hh-drag-positioner {
		margin-top: 75%;
	}
	.hh-hai2-ears {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
	}
	.hh-hai2-holder {
		height: auto;
	}
	.hh-hai2-holder .hh-drag-left-content .hh-hai-pages {
		width: 100%;
		margin-left: 0%;
	}
	.hh-hai2-holder .hh-drag-left-content {
		height: 700px;
		margin-top: 40px;
	}
	.hh-hai2-holder {
		margin-top: 20px;
	}
	.hh-hai2-box ul li {
    margin-bottom: 15px;
	}
}

@media(max-width: 500px){
	.hh-hai-main-content{
	  height: 740px;
		margin-top: 105px;
	}
	.hh-hai2-holder {
		margin-top: 0px;
	}
	.hh-hai2-holder .hh-drag-left-content {
		margin-top: 20px;
	}
	.hh-hai2-box ul li {
    margin-bottom: 10px;
	}
	.hh-hai2-ears-inner {
		padding-bottom: 105%;
	}
	.hh-drag-holder {
		width: 320px;
	}
	.hh-hai2-box {
		padding: 20px;
	}
	.hh-hai-animation {
		overflow: visible;
	}
	.hh-hai-animation-inner {
		width: 150%;
		left: -25%;
		padding-bottom: 130%;
	}
	.hh-drag-positioner {
		margin-top: 115%;
	}
}