@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-bold-webfont.eot');
    src: url('/fonts/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-bold-webfont.woff') format('woff'),
         url('/fonts/montserrat-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;

}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-extrabold-webfont.eot');
    src: url('/fonts/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-extrabold-webfont.woff') format('woff'),
         url('/fonts/montserrat-extrabold-webfont.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-medium-webfont.eot');
    src: url('/fonts/montserrat-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/montserrat-medium-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-medium-webfont.woff') format('woff'),
         url('/fonts/montserrat-medium-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;

}
@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-regular-webfont.eot');
    src: url('/fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('/fonts/montserrat-regular-webfont.woff') format('woff'),
         url('/fonts/montserrat-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
*{
    font-family: 'Montserrat';
}
body{
    background:#f5f5f5;
    color:#222;
}
.button{
    height:60px;
    line-height:60px;
    padding:0 80px;
    color:#222;
    font-size:16px;
    font-weight:600;
}

.button.grey{
    background:#BDBDBD;
}
.button.gold, .hStepControls .button.next-step{
    background:#E6BA5E;
    transition: all 0.3s;
}
.button.gold:hover, .hStepControls .button.next-step:hover{
    background:#30C2BF;
}
.hStepControls{
    text-align:center;
    margin: auto;
}
.hStepControls .button{
    clear:both;
    margin: 32px 0;
}
.hStepControls .button[disabled]{
    opacity:1;
    color:#222;
    background:#BDBDBD !important;
}
.hStepControls .button[disabled]:hover{
    background:#BDBDBD;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    font-family:'Montserrat';
}

.topSteps{
    display:block;
    height:34px;
    width:640px;
    max-width:100%;
    margin:0 auto 74px auto;
    padding-top:20px;
}
.topSteps > div{
    margin-right:18px;
    float:left;
}
.topSteps > div:last-child{
    margin-right:0;
}
.topSteps .circle{
    width:34px;
    height:34px;
    line-height:34px;
    color:#30C2BF;
    background:#fff;
    font-size:16px;
    font-weight:400;
    border-radius:100%;
    text-align:center;
}
.topSteps .circle.active{
    background:#E6BA5E;
    color:#fff;
}
.topSteps .bar{
    border-radius:3px;
    height:6px;
    background:#fff;
    width:50px;
    margin-top:14px;
    width:calc( (100% - 244px) / 3);
}
.topSteps .bar.active{
    background:#E6BA5E;
}

.step{
    width:640px;
    max-width: 100%;
    margin:0 auto;
}
.step h1, .step h2, .step h3{
    font-size: 42px;
    font-weight:700;
    text-align:center;
    margin: 0 0 20px 0;
    line-height: 1.1;
}
.step .subtitle{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 60px;
}
.hService, .PickType{
    background: #fff;
    border: 3px #fff solid;
    position: relative;
    padding-top: 90%;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s;
}
.hService.active, .PickType.active,
.hService:hover, .PickType:hover{
    border-color:#30C2BF;
}
.step-content .cell:nth-child(4) .hService,
.step-content .cell:nth-child(5) .hService,
.step-content .cell:nth-child(6) .hService,
.step-content .PickType{
    margin-bottom: 0;
} 
.ServiceTitle{
    line-height: 1.1em;
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px;
    text-align: center;
}
.PickTypeTitle{
    font-size: 25px;
    font-weight: 700;
    text-align: center;
}
.hServices{
    margin-left: -8px;
    margin-right: -8px;
}
.hServices .cell{
    margin-left: 8px;
    margin-right: 8px;
}
@media print, screen and (min-width: 64em){
    .hServices .large-4{
        width: calc(33.33333% - 16px);
    }
}
@media print, screen and (min-width: 40em){
    .hServices .medium-4{
        width: calc(33.33333% - 16px);
    }
}
@media print, screen and (max-width: 40em){
    .hServices .small-6 {
        width: calc(50% - 16px);
    }
}
#step2 .step-content, #step6 .step-content,
#step25 .step-content, #step7 .step-content2{
    background:#fff;
    padding:20px;
}
.si{
    height:50px;
    line-height:50px;
    padding:0 10px;
    color:#222;
    border:0;
    box-shadow:none;
}
.siT{
    min-height:100px;
    line-height:1.6em;
    padding:10px;
    color:#222;
    border:0;
    box-shadow:none;
}
.step label{
    font-size:12px;
}

.hService{
    background-repeat: no-repeat;
    background-size: 70% auto;
    background-position: 50% 0;
}
.ServiceFanCoil{
    background-image:url("/img/fan_coil_ico.svg");
}
.ServiceHeatPump{
    background-image:url("/img/heat_pump_ico.svg");
}
.ServiceFDrySystemVent{
    background-image:url("/img/dryer_ico.svg");
}
.ServiceBathroomVent{
    background-image:url("/img/bathroom_ventilation_ico.svg");
}
.ServiceDuctCleaning{
    background-image:url("/img/duct_cleaning_ico.svg");
}
.ServiceNotSure{
    background-image:url("/img/help_ico.svg");
}
.PickHO{
    /*background-image:url("/img/owner_ico.svg");*/
}
.PickTenant{
    /*background-image:url("/img/tenant_ico.svg");*/
}
.hService.PickType{
    padding: 60px 0;
}
.xdsoft_datetimepicker.xdsoft_inline{
    display:block;
    border:0;
}
.xdsoft_datetimepicker.xdsoft_inline::after{
    content:" ";
    clear:both;
    display:block;
    height:0;
}
.xdsoft_datetimepicker .xdsoft_datepicker{
    width: 60%;
    margin:0;
}
.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker{
    width:40%;
    padding:0 0 0 30px;
    margin:0;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div{
    height: 44px;
    line-height:44px;
    border: 1px solid #30C2BF;
    background:#fff;
    margin:0 0 10px 0;
    color:#30C2BF;
    font-size:12px;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:first-child{
    border:1px #ddd solid;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box{
    padding: 0 10px 0 0;
    border: 0;
    height: 260px;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{
    background: #30C2BF !important;
    box-shadow: #30C2BF 0 1px 3px 0 inset !important;
    color: #fff;
}
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next{
    margin-left: calc(50% - 15px);
}
.xdsoft_timepicker #current_day{
    height: 24px;
}
tbody tr:nth-child(even){
    background:#fff;
}
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th{
    background:#fff;
    height:44px;
    line-height:44px;
    text-align:center;
    border:1px #fff solid;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td:hover{
    background: #E6BA5E !important;
    box-shadow: #E6BA5E 0 1px 3px 0 inset !important;
    color: #000;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today{
    background: #fff !important;
    box-shadow: #fff 0 1px 3px 0 inset !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today div{
    background:transparent;
    border-radius:100%;
    color:#E6BA5E!important;
    font-weight:bold;
}
.previous-step{
    color: #222;
    cursor: pointer;
    transition: all 0.3s;
}
.previous-step:hover{
    color: #E6BA5E;
}
.previous-step .previous-step-arrow{
    color: #222;
    margin-right:0;
    transition: all 0.3s;
}
.previous-step:hover .previous-step-arrow{
    color: #E6BA5E;
    margin-right:10px;
}
#step6Disclaimer{
    font-size: 14px;
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    height: 300px;
    overflow-y: auto;
}
/* Webkit browsers (Chrome, Safari) */
#step6Disclaimer::-webkit-scrollbar {
    width: 4px;
}
#step6Disclaimer::-webkit-scrollbar-thumb {
    background-color:#68c9ca;
}

#step6Disclaimer::-webkit-scrollbar-track {
    background: transparent; /* optional: style the track */
}

/* Firefox */
#step6Disclaimer {
    scrollbar-width: thin;
    scrollbar-color:#68c9ca transparent; 
}
/* IE & Edge */
#step6Disclaimer {
    -ms-overflow-style: none; /* Hides the scrollbar */
}

#owner_unit_address{
    margin-bottom: 0;
}
#step6 li {
    list-style-type: none;
}
.topLogo{
    float: left;
    padding: 20px 0 10px 0;
    text-align: left;
}
.topLogo img{
    max-width: 150px;
}
@media only screen and (max-width: 800px) {
    .topLogo {
        float: none;
        padding: 20px 0 0 0;
        text-align: center;
    }
    .topLogo img {
        max-width: 200px;
    }
    .step h1, .step h2, .step h3 {
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        margin: 0;
    }
    .step .subtitle {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 32px;
    }
    .ServiceTitle{
        font-size: 14px;
    }
    .PickTypeTitle {
        font-size: 20px;
    }
    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
        padding: 0 10px 0 0;
        border: 0;
        height: 315px;
    }
    .xdsoft_datetimepicker .xdsoft_datepicker{
        width: 100%;
    }
    .xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
        width: 100%;
        padding: 0;
    }
    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
        padding: 0;
    }
    .xdsoft_timepicker #current_day {
        margin: 20px 0;
    }
    .previous-step{
        margin-bottom: 32px;
    }
    #step3 .medium-2.small-6{
        display: none;
    }
    .hStepControls .button {
        width: 100%;
    }
}