.wrap {
    max-width: 1200px;
    padding-left: 15px;
    padding-right: 15px;
}
.site-content-contain {
	background:#f7f7f7;
}
.site-content {
    padding: 70px 0 0;
}
.fence-catagory {
  margin: 0 0 30px;
  position: relative;
  display: inline-block;
  width: 100%;
}
.fence-catagory .step-numbering {
	background: #fff;
	border-radius: 50%;
	font-size: 30px;
	height: 60px;
	line-height: 60px;
	margin: 0 auto;
	text-align: center;
	width: 60px;
    color: #1e1e1e;
}
.fence-catagory .step-question {
    color: #1e1e1e;
    display: inline-block;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: normal;
    margin: 10px 0 20px;
    text-align: center;
    width: 100%;
}
.fence-catagory .step-choices .fence-style {
    background-color: #fff;
    cursor: pointer;
    float: left;
    letter-spacing: normal;
    padding: 108px 0;
    text-align: center;
    transition: all 0.5s ease 0s;
    width: 50%;
}
.fence-catagory .step-choices .fence-style:hover,.fence-catagory .step-choices .fence-style.active {
	background:#1e1e1e;
	color:#fff;
}
.fence-catagory .step-choices .fence-style h5 {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: normal;
    margin: 0;
    text-transform: none;
}
.fence-catagory .step-choices .fence-style:hover h5,
.fence-catagory .step-choices .fence-style.active h5 {
	color:#fff;
}


.wizard-box {text-align:center; background: #fff; margin: 0 0 30px; padding: 25px 30px;	border-radius: 5px; overflow: hidden;}
.wizard-box .inputs > div {display: inline-block; margin:0 20px 0 0 ; vertical-align: middle;}
.wizard-box .inputs > div:last-child{margin:0;}
.wizard-box .inputs > div:last-child input[type="radio"]{margin-left: 10px; margin-right: 10px;}
.wizard-box .inputs > div:last-child input[type="checkbox"]{margin-right: 0px;}
#pinfix-bal-inputs span, #balustrade-inputs span{vertical-align: middle;}

.wizard-box .inputs div p.feedback {display: block; font-weight:bold;}
.wizard-box .inputs div label{
	display: inline-block;
	margin:0 5px 0 0px;
	vertical-align: middle;
	font-size: 16px;
	font-weight:normal;
}
.wizard-box .inputs div p{
	margin:0;    
	display:inline-block;
	vertical-align: middle;
	font-size: 16px;
	letter-spacing: normal;
}    
.wizard-box .inputs div:first-child input {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    height: 30px;
    padding: 0 5px;
    vertical-align: middle;
    width: 100px;
}
.wizard-box .inputs div input{
	display: inline-block;
	vertical-align: middle;
}
.wizard-box .inputs div.drop-options input[type="range"]{
	width:150px;
}
#order > div {
    display: inline-block;
    padding: 0 15px;
    text-align: center;
    vertical-align: top;
    width: 20%;
}
/*#printArea #work-area {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    width: 100%;
}
#printArea #work-area div {
    background-color: #d8e8eb;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.8);
    display: inline-block;
    float: left;
    margin: 0 -20px 30px -40px;
    padding: 10px 0;
    text-align: center;
    vertical-align: top;
    width: auto;
}*/
#work-area {
    display: inline-block;
    margin: 0  0 30px;
    padding:3px 35px 30px;
    position: relative;
    float: left;
    clear: both;
}
#order{ clear: both; }
#work-area::after {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: -1000%;
    position: absolute;
    right: -1000%;
}
#work-area span {
    color: #666;
    float: left;
    font-size: 11px;
    -moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	margin-top: 10px;
}
/*#printArea #work-area span:first-child{
	margin-left:40px;
}*/
#order > div h4{
	font-size:24px;
	font-weight:bold;
	letter-spacing: normal;
	padding:10px 0 0;
}
#order > div p{
	font-size:15px;
	letter-spacing: normal;
}


.page-title h1 {
    color: #282828;
    font-size: 46px;
    font-weight: 100;
    margin-bottom: 0;
    text-align: center;
    text-transform: capitalize;
    letter-spacing: normal;
}
.subtitle {
    display: inline-block;
    margin: 0 0 30px;
    width: 100%;
}
.subtitle p {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
}
.post {
/*     background-image: url("/post.png"); */
    background-repeat: repeat-y;
    float: left;
    height: 75px;
    margin: -1px -6px 0;
    width: 6px;
}
.fence-catagory:last-child .fence-style:first-child {
    background-image: url("https://4050984.fs1.hubspotusercontent-na1.net/hubfs/4050984/calculator/frameless-images.png");
    background-position: center 70px;
    background-repeat: no-repeat;
}
.fence-catagory:last-child .fence-style {
  padding: 160px 0 60px;
}
.fence-catagory:last-child .fence-style:first-child:hover, .fence-catagory:last-child .fence-style.active:first-child{
  background-image: url("https://4050984.fs1.hubspotusercontent-na1.net/hubfs/4050984/calculator/frameless-images-hover.png");
}
.fence-catagory:last-child .fence-style:last-child{
    background-image: url("https://4050984.fs1.hubspotusercontent-na1.net/hubfs/4050984/calculator/pin-fixed.png");
    background-position: center 70px;
    background-repeat: no-repeat;
}
.fence-catagory:last-child .fence-style:last-child:hover, .fence-catagory:last-child .fence-style.active:last-child{
      background-image: url("https://4050984.fs1.hubspotusercontent-na1.net/hubfs/4050984/calculator/pin-fixed-hover.png");
}
#price > p {
    color: #1e1e1e;
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 400;
}
#price {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-weight: 300;
    margin: 0 -30px 30px;
    padding: 10px 0;
    text-align: center;
}
#price > p span {
    font-weight: 400;
}
.fence-catagory .step-choices .box-3 .fence-style{
	width:33.33%;
}
.fence-catagory .box-3 .fence-style:nth-child(2) {
    background-image: url("/Semi-Frameless-Black.png");
    background-position: center 40px;
    background-repeat: no-repeat;
}
.fence-catagory .box-3 .fence-style:hover:nth-child(2), .fence-catagory .box-3 .fence-style.active:nth-child(2){
  background-image: url("Semi-Frameless-White.png");
}

#printArea #work-area div.newSemi ~ div {
    float: left;
}
.new, .newSemi, .newBal, .newAluminium, .newPinfixPool, .newPinfixBal{-moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: transform; border-color: #bebebe; border-image: none; border-style: solid; border-width: 1px 1px 1px; float: left; font-size: 12px; height: 60px; text-align: center; width:80px !important;}
.new, .newBal, .newPinfixPool, .newPinfixBal {display: block; float: left; margin: 0 -3px 14px; padding: 0px 0 10px; vertical-align: top;}
.newPinfixPool, .newPinfixBal {position: relative;}
.newPinfixPool, .newPinfixBal, .pinfixLeft, 
.pinfixRight{
  background-image: url("https://4050984.fs1.hubspotusercontent-na1.net/hubfs/4050984/calculator/pinfix.png");
  background-position: center bottom; 
  background-repeat: no-repeat;
}
.pinfixLeft {bottom: 0; float: left; height: 25px; left: 0; position: absolute;  width: 18px;}
.pinfixRight { bottom: 0;  float: right;  height: 25px;  position: absolute;  right: 0;   width: 18px;}
.handrail {background-color: #cccccc;  height: 1px;  margin: 7px -12px 0;}
.wizard-box .inputs div:last-child label {margin: 0 5px 0 0;}
.site-footer {border-top: 0 solid transparent;}
.fence-catagory .step-choices .fence-style:first-child{border-radius: 5px 0 0 5px;}
.fence-catagory .step-choices .fence-style ~ .fence-style{border-radius: 0 5px 5px 0;}
.cost-est{float: left; width: 122px;}
#work-area .newSemi{margin:0 0 35px; width: 100px !important;}


.footer-content{font-size: 13px; line-height: 14px;}
.step-choices .fence-style:first-child{border-right:1px solid rgba(0, 0, 0, 0.1);}
.box-3 .fence-style:last-child{border-left:1px solid rgba(0, 0, 0, 0.1);}
#balustrade-inputs{text-align: center;}



@media screen and (max-width:1260px){
#work-area {margin: 0 0 30px;}
}

@media screen and (max-width:1024px){
	
}

@media screen and (min-width:991px){
.new, .newBal, .newPinfixPool, .newPinfixBal{/*margin:0 -0px 14px;*/}
}

@media screen and (max-width:991px){
.fence-catagory .step-choices .fence-style h5{font-size:26px;}
.page-title h1 {font-size: 36px;}
.fence-catagory .step-question{font-size:22px;}
#order > div{width:50%;}
}


@media screen and (max-width:800px){
	
}

@media screen and (max-width:768px){
.fence-catagory .step-choices .fence-style, .fence-catagory .step-choices .box-3 .fence-style{width:100%;}
.page-title h1 {font-size: 26px;}
.subtitle p{font-size:14px;}
.new, .newBal, .newPinfixPool, .newPinfixBal{margin: 0 0px 14px;}	
.new{margin: 0px 3px 14px;}
}

@media screen and (max-width:767px){
#price > p {font-size: 14px;}
.header {padding: 10px 0;}
}

@media screen and (max-width:640px){
.fence-catagory .step-question {font-size: 20px;}
.fence-catagory .step-choices .fence-style h5 {font-size: 22px;}
.fence-catagory .step-choices .fence-style{padding:50px 0;}
.fence-catagory:last-child .fence-style {padding:110px 0 30px;}
.fence-catagory:last-child .fence-style:first-child, .fence-catagory:last-child .fence-style:last-child, .fence-catagory .box-3 .fence-style:nth-child(2){background-position: center 30px;}
#order > div{width:100%;}
#order > div h4 {margin: 0 0 5px; padding: 5px 0 0;}
}

@media screen and (max-width:480px){
.fence-catagory .step-question {font-size: 18px;}
.wizard-box .inputs > div,.wizard-box .inputs div p{width:100%;	margin: 0 0 10px;}
.wizard-box .inputs div:first-child input{width:60px;}
}

@media screen and (max-width:360px){
	
}




@media screen and (max-width:403px){
#work-area{text-align: center;}
.cost-est{float:none;}
}