/********** QUICK CONTACT FORM **********/

/***** FORM DESIGN *****/
#quickform {
display:block;
max-width:1200px;
margin:0 auto;
}
#quickform #hpform {
position:relative;
z-index:9999;
background:rgba(205,0,0,0.8);
top:0px;
left:0;
right:0;
width:500px;
height:300px;
border-radius:5px;
padding:27px 25px 36px;
margin:5px 0 0;
}
#hpform .section {
display:block;
background:#EDEDED;
border-radius:5px;
padding:10px 20px 0;
height:260px;
}
#hpform ul {
padding:0;
margin:0;
}

/***** FORM LABEL *****/
#hpform label.label {
display:block;
font-size:15px;
color:#000;
margin:15px 0 0 15px;
}
#hpform label.H {
display:block;
float:none;
background-color:#000;
border-radius:5px;
color:#FFF;
font-size:17px;
font-weight:500;
text-transform:uppercase;
text-align:center;
width:100%;
padding:5px 2px;
margin:0 0 15px;
}
#hpform label.H.one {
margin:0;
}
#hpform .hp-telephone {
display:block;
margin:0 0 -8px 15px;
}

/***** FORM NEXT BUTTON *****/
#hpform .question {
height:260px;
}
#hpform .question::after {
content:"";
display:block;
float:left;
clear:both;
}
#hpform .next {
display:none;
clear:right;
float:right;
background-color:#000;
color:#FFF;
text-transform:uppercase;
text-align:center;
cursor:pointer;
font-size:20px;
font-weight:500;
padding:10px 0;
margin:10px 0 0;
border:1px solid #FFF;
border-radius:5px;
width:110px;
}
#hpform .next.active {
display:block;
}

/***** FORM PREVIOUS BUTTON *****/
#hpform a.prev {
display:block;
clear:left;
float:left;
background-color:#000;
color:#FFF;
text-transform:uppercase;
text-align:center;
font-size:20px;
font-weight:500;
padding:10px 0;
margin:10px 0 0;
border:1px solid #FFF;
border-radius:5px;
width:110px;
}

/***** FORM INPUT BOX *****/
#hpform input {
font-size:25px;
display:block;
width:250px;
margin:0 0 0 15px;
}
#hpform select {
font-size:15px;
display:block;
margin:0 0 0 15px;
}
#hpform input.zipcode {
width:85px;
}

/***** FORM PHASE 1 Q1 NEEDS *****/
#phase1 .needs {
display:block;
text-align:center;
}
#phase1 .needs li {
display:inline-block;
width:150px;
}
#phase1 .needs li label {
cursor:pointer;
text-transform:uppercase;
font-size:14px;
font-weight:500;
color:#000;
}
#phase1 .needs li label.checked {
color:#2D9BD7;
}
#phase1 .needs li input {
display:block;
width:auto;
margin:5px auto;
}
#phase1 .needs li.one label span {
content:"";
display:block;
background-image:url('/images/icon-new.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.one label:hover span {
content:"";
display:block;
background-image:url('/images/icon-new-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.one label.checked span {
content:"";
display:block;
background-image:url('/images/icon-new-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.two label span {
content:"";
display:block;
background-image:url('/images/icon-replace.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.two label:hover span {
content:"";
display:block;
background-image:url('/images/icon-replace-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.two label.checked span {
content:"";
display:block;
background-image:url('/images/icon-replace-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.three label span {
content:"";
display:block;
background-image:url('/images/icon-expanding.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.three label:hover span {
content:"";
display:block;
background-image:url('/images/icon-expanding-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}
#phase1 .needs li.three label.checked span {
content:"";
display:block;
background-image:url('/images/icon-expanding-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:150px;
height:150px;
}

/***** FORM PHASE 1 Q3 NEEDS *****/
#phase1 .when {
display:block;
text-align:center;
margin:20px 0;
}
#phase1 .when li {
display:inline-block;
width:100px;
margin:0 5px;
}
#phase1 .when li label {
cursor:pointer;
text-transform:uppercase;
font-size:14px;
font-weight:500;
color:#000;
}
#phase1 .when li label.checked {
color:#2D9BD7;
}
#phase1 .when li input {
display:block;
width:auto;
margin:5px auto;
}
#phase1 .when li.one label span {
content:"";
display:block;
background-image:url('/images/icon-asap-months.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.one label:hover span {
content:"";
display:block;
background-image:url('/images/icon-asap-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.one label.checked span {
content:"";
display:block;
background-image:url('/images/icon-asap-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.two label span {
content:"";
display:block;
background-image:url('/images/icon-two-months.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.two label:hover span {
content:"";
display:block;
background-image:url('/images/icon-two-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.two label.checked span {
content:"";
display:block;
background-image:url('/images/icon-two-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.three label span {
content:"";
display:block;
background-image:url('/images/icon-three-months.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.three label:hover span {
content:"";
display:block;
background-image:url('/images/icon-three-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.three label.checked span {
content:"";
display:block;
background-image:url('/images/icon-three-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.four label span {
content:"";
display:block;
background-image:url('/images/icon-four-months.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.four label:hover span {
content:"";
display:block;
background-image:url('/images/icon-four-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}
#phase1 .when li.four label.checked span {
content:"";
display:block;
background-image:url('/images/icon-four-months-ro.png');
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100px;
height:100px;
}

