@media (min-width:1024px) {
     .hide-desktop{
        display:none
    }
}
@media (max-width:1700px) {
     .header-area .main-header-area,.header-area .main-header-area.sticky{
        padding:15px 115px
    }
     .container_80{
        max-width:85%;
        width:85%
    }
     .steps_panel p{
        width:65%
    }
     .card .stats-container ul li{
        font-size:17px!important
    }
     .slider_text h1 {
         font-size: 2.5em;
         width: 100%;
    }
     .slider_text h5 {
         margin: 0 auto;
         font-size: 1.75em;
         width: 80%;
    }
     .card-container, .front, .back {
         height: 715px;
    }
    
    .modal-dialog.modal-dialog-slideout { 
        min-height: 98%;
        margin-top: 5px !important;
    }
}
@media (max-width:1500px) {
     .header-area .main-header-area.sticky{
        padding:10px 70px!important
    }
     .houzkey_logo_img{
        max-width:125px;
        margin-top:15px
    }
     .eric_desktop {
         bottom: 0;
         width: 230px;
         right: 35px;
         position: absolute;
    }
     .card .stats-container ul li{
        font-size:16px!important;
        margin:0 auto 7%!important
    }
     .card .stats-container{
        min-height:330px
    }
     .card-container, .front, .back {
         height: 700px;
    }

     .breaker_text .section_title {
         margin-bottom: 40px;
    }

    .breaker_text {
        padding-top: 115px; 
    }

    .projects_area {
        padding-top: 75px; 
    }

    .breaker_text .section_title h3 { 
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .breaker_text hr {
        margin: 10px auto 0px auto;
    }
    .learnmore_section {
        padding: 110px 0; 
    }
}
@media (max-width:1366px) {
     .container_80{
        max-width:90%;
        width:90%
    }
     .header-area .log_chat_area .say_hi{
        font-size:20px;
        padding:12px 20px
    }
     .header-area .main-header-area.sticky{
        padding:10px 70px!important
    }
     .slider_text h1{
        font-size:2em;
        width:95%
    }
     .slider_description {
        width: 90%
    }
     .eric_desktop{
         bottom: 0% !important;
         width: 210px;
         right: 25px;
    }
     .icon img{
        max-width:45%
    }
     .card-container, .front, .back{
        height:680px!important
    }
     .section_title h3{
        font-size:43px!important
    }
     .registration_space .section_title p{
        font-size:17px;
        line-height:25px;
        margin-top:45px
    }
     .modal_form .touch_form .single_input label.radio-inline{
        width:20%
    }
     .card .stats-container{
        min-height:330px
    }
     .panel_content span {
         font-family: Gotham-Book;
         color: #7b7b7b;
         width: 90%;
         margin: 15px auto;
         display: block;
         font-size: 13px;
         min-height: 35px;
    }
     .slider_text h5 {
         font-size: 1.5em;
         width: 80%;
    }
     .steps_panel p {
         font-size: 15px;
         line-height: 18px;
         width: 75%;
         width: 70%;
    }
     .card .footer a {
         font-size: 17px;
    }
}
@media (max-width:1280px) {
     .panel_content span {
         width: 90%;
         font-size: 12px;
         min-height: 35px;
    }
     .panel_content h3 {
         font-size: 20px;
    }
     .card-container, .front, .back {
         height: 665px!important;
    }
     .back .header h3 {
         font-size: 20px;
    }
     .card .stats-container {
         min-height: 300px;
    }
     .card .stats-container ul li {
         font-size: 15px!important;
    }
}
@media (max-width:1200px) {
     .header-area .log_chat_area .say_hi{
        font-size:18px;
        padding:12px 20px;
        width:100%
    }
     .steps_panel p{
        font-size:16px;
        line-height:20px;
        width:70%
    }
     .card .stats-container ul li{
        font-size:15px!important
    }

    .modal-dialog-slideout .close {  
        z-index: 999;
    }
}
@media (max-width:1024px) {
     .slider_area .ms_btn, .slider_area .ms_btn:hover, .slider_area .ms_btn:focus {
        font-size: 16px;
        width: 50%;
        background-color: #fff;
    text-decoration: none;
    }
     .masthead, .main-header-area.sticky .masthead {
         max-width: 200px;
    }
     .header-area .main-header-area.sticky{
        padding:10px 15px!important
    }
     .header-area .log_chat_area .say_hi{
        font-size:18px;
        padding:15px 20px
    }
     .slider_area .single_slider{
        height:90vh;
    }
     .icon img{
        max-width:55%
    }
     .steps_panel h6.first{
        left:25%
    }
     .steps_panel p{
        line-height:23px;
        width:90%;
        font-size:15px;
        text-align:center
    }
     .houzkey_logo_img{
        max-width:90px;
        margin-top:15px
    }
     .card-container, .front, .back {
         height: 725px!important;
    }
     .panel_content span {
         font-size: 13px;
    }
     .card .stats-container ul li{
        font-size:17px!important;
        margin:0 auto 7%!important
    }
     .card .stats-container {
         min-height: 340px;
    }
     .slider_text h1 {
         font-size: 1.75em;
         width: 100%;
    }
     .slider_text h5 {
         font-size: 1.35em;
         width: 100%;
    }
     .slider_text p {
         font-size: 13px !important;
         line-height: 20px;
         padding-top: 0;
         width: 100%;
         padding-top: 0 !important;
    }
     .header-area .ms_btn, .header-area .ms_btn:focus, .header-area .ms_btn:hover {
         font-size: 18px;
         text-align: center;
         margin-top: 0;
         padding: 12px 13px;
    }
     .learnmore_section {
         padding: 100px 0;
    }
     .learnmore_section h3 {
         font-size: 35px;
         line-height: 60px;
    }
     .eric_desktop {
         bottom: 0% !important;
         width: 210px;
         right: 10px;
    }

    .pt-custom {
        padding-top: 0;
    }

    .border-reg {
        display: none;
    }

    .sp-img {
        display: none;
    }
}
@media (max-width:992px) {
    .eric_desktop {
         position: relative;
    }
     .filter-button {
         width: 24%;
    }
     .card.card-body {
         padding: 100px 0 0;
    }
     .hide-tablet{
        display:none
    }
     .header-area .main-header-area.sticky{
        transform:translateY(70px)
    }
     .slider_text h1{
         font-size: 2em;
         color: #ffffff;
         width: 80%;
    }
     .slider_text{
        margin-bottom:25%
    }
     .single_slider .ms_btn{
        font-size:18px;
        width:50%;
        text-align:center
    }
     .btn_bottom_hero{
        bottom:-75px;
        position:relative
    }
     .steps_panel p{
        line-height:19px;
        width:90%;
        font-size:15px
    }
     .steps_panel h6.first{
        left:18%
    }
     .section_title p{
        font-size:18px;
        line-height:28px;
        width:90%
    }
     .panel_content span{
        width:90%;
        font-size:15px;
        line-height:1.2;
         min-height: 60px;
    }
     .panel_content p strong{
        font-size:16px
    }
     .panel_content{
        min-height:345px
    }
     .floating_circle_right_bot{
        width:10%
    }
     .houzkey_logo_img{
        max-width:85px;
        margin-top:15px
    }
     .projects_moreinfo,.projects_moreinfo:hover,.projects_moreinfo:focus{
        padding:10px 20px;
        width:70%
    }
     .panel_content h3{
        font-size:19px
    }
     .eric_tsang_mobile{
        bottom:0;
        position:relative;
        width:60%;
        margin:0 auto -65px;
        text-align:center;
        display:block
    }
     .registration_image{
        width:100%!important;
        height:550px
    }
     .registration_space{
        width:100%!important
    }
     .registration_space .section_title p{
        font-size:17px;
        line-height:24px;
        margin-top:40px;
        width:90%
    }
     .modal_form{
        width:95%;
        margin:0 auto
    }
     .modal_form .touch_form .single_input label.radio-inline{
        width:35%
    }
     .card .header{
        padding:15px 10px 0
    }
     .back .header h3{
        font-size:20px
    }
     .card .content{
        padding:10px 0 20px
    }
     .card .stats-container ul li strong{
        font-size:20px
    }
     .front,.back,.card-container,.front,.back{
        height:665px!important
    }
     .card .stats-container ul li{
        font-size:16px!important
    }
     .card .stats-container{
        width:90%;
        min-height:325px;
        margin:25px auto 0
    }
     .card .footer a {
         width: 70%;
         font-size: 18px;
    }
     .width_sm_10{
        width:10%!important
    }
     .width_sm_20{
        width:20%!important
    }
     .width_sm_30{
        width:30%!important
    }
     .width_sm_40{
        width:40%!important
    }
     .width_sm_50{
        width:50%!important
    }
     .width_sm_60{
        width:60%!important
    }
     .width_sm_70{
        width:70%!important
    }
     .width_sm_80{
        width:80%!important
    }
     .width_sm_90{
        width:90%!important
    }
     .width_sm_100{
        width:100%!important
    }
     .learnmore_section .ms_btn, .learnmore_section .ms_btn:hover, .learnmore_section .ms_btn:focus {
         width: 100%;
         padding: 15px 30px;
    }
     .learnmore_section {
         padding: 110px 0;
         background-image: url(../img/q2/breaker_mobile.jpg);
         background-position: 0 35%;
    }
     .learnmore_section h3 {
         font-size: 28px;
         line-height: 1.25;
         width: 100%;
         margin: 0 auto;
    }
     .learnmore_section .ms_btn, .learnmore_section .ms_btn:hover, .learnmore_section .ms_btn:focus {
         width: 100%;
         padding: 13px 30px;
         font-size: 19px;
    }
     .breaker_text {
         padding-top: 100px;
    }
     .breaker_text .section_title {
         margin-bottom: 40px;
    }
     .projects_area {
         padding-top: 75px;
    }

    #loader {
        margin: -125px 0 0 -50px;
        width: 100px;
        height: 100px;
    }

    .slider_area .align-items-center{
        align-items: flex-start !important;
    }

    .comehome-img {
        padding-top: 25px;
        width: 45%;
    }

    .hoc-cb-img {
        width: 65%;
    }

    .breaker_text .section_title p {
        font-size: 16px;
        width: 100%;
    }

    .owl-carousel .owl-nav div.owl-next {
        left: auto;
        right: 0;
    }

    .owl-carousel .owl-nav .owl-prev{
        left: 0;
    }

    .owl-carousel .owl-item img.img-usp {
        width: 90%;
        margin: 0 auto;
    }

    .usp p {
        font-size: 16px;
        width: 100%;
        padding: 0 30px;
        margin: 0 auto;
        left: 0;
    }
}
@media (max-width:480px) {
     .eric_desktop {
         bottom: 0px !important;
         width: 235px;
         right: auto;
         position: relative;
         text-align: center;
         margin: 0 auto;
    }
     .submit_btn .ms_btn {
         margin: 0 auto;
         width: 100%;
    }
     .hide-tablet{
        display:block
    }
    .hide-mobile{
        display: none;
    }
     .m_lr_15{
        margin-left:15px!important;
        margin-right:15px!important
    }
     .no_m_lr{
        margin-left:0!important;
        margin-right:0!important
    }
     .no_p_lr{
        padding-left:0!important;
        padding-right:0!important
    }
     .header-area .main-header-area.sticky{
        top:-75px
    }
     .slider_bg_1{
        background-image:url(../img/q2/hero_mobile-05.jpg)
    }
     .footer-social{
        -ms-flex-pack:center;
        justify-content:center;
        text-align:center
    }
     .slider_text h1{
        margin:0;
        font-size:1.35em;
        width:95%;
        color:#4a4a4a
    }
     .slider_text h5{
        margin:0 auto;
        font-size:1em;
        width:95%;
        color:#4a4a4a
    }
     .slider_text{
         margin-bottom: 45%;
         position: relative;
         top: 0px;
    }
     .slider_description {
        position: absolute;
        font-size:14px
    }
     .btn_bottom_hero{
        bottom:-80px;
        position:relative;
        margin:0 auto
    }
     .img_logo{
        max-width:145px;
        width:100%
    }
     .header-area .main-header-area .logo-img{
        width:80%
    }
     .masthead{
        max-width:90%
    }
     .single_slider .ms_btn{
        margin-top: 0;
        top: 15px !important;
        font-size:16px;
        color:#fff;
        position:relative;
        z-index:0;
        padding:8px;
        font-family:Gotham-Bold;
        background:#d0021b;
        border:1px solid #d0021b;
        width:50%;
        text-align:center;
        margin: 0 auto;
    }
     .header-area .main-header-area.sticky{
        padding:20px 10px
    }
     .main-header-area.sticky .masthead{
        max-width:95%
    }
     .section_title p{
        font-size:16px;
        line-height:1.3;
        width:100%
    }
     .icon img{
        max-width:65%;
        margin:0 auto 20px
    }
     .steps_panel h6{
        font-size:110px!important;
        left:25%;
        top:0
    }
     .steps_panel p {
         width: 80%;
         margin: 20px auto;
         text-align: center;
         font-size: 14px;
         line-height: 18px;
    }
     .m-w-70{
        width:70%
    }
     .m-text-center{
        text-align:center
    }
     .footer-top .h5,.footer-top h5{
        font-size:16px
    }
     .footer-bottom p{
        font-size:11px;
        text-align:center!important
    }
     .container_80{
        max-width:90%;
        width:90%;
        margin:0 auto
    }
     .floating_circle_left{
        width:15%;
        top:10%
    }
     .projects_area .single_service{
        width:90%
    }
     .m_xs_b0{
        margin-bottom:0!important
    }
     .panel_content{
        padding:30px 5px
    }
     .panel_content h3{
        font-size:20px
    }
     .panel_content span{
        width:95%;
         min-height: auto;
    }
     .floating_circle_right_bot{
        width:15%;
        bottom:10%
    }
     .get_in_tauch_area .touch_form .single_input label.radio-inline{
        width:30%
    }
     .get_in_tauch_area .touch_form .single_input input[type=radio]{
        width:15%;
        height:25px
    }
     .card.card-body{
        padding:50px 0 0;
        border-radius:0;
        background-image:url(../img/howitworks_mobile.jpg)
    }
     .steps_panel img{
        width:20%
    }
     .terms{
        width:80%;
        margin:0 auto;
        line-height:1.15
    }
     .panel_content{
        min-height:280px
    }
     .houzkey_logo_img{
        max-width:60px;
        margin-top:5px
    }
     .ribbon_projects{
        position:absolute;
        right:-1.75%;
        top:-6px;
        width:85px!important
    }
     .registration_image{
        width:100%!important;
        height:350px
    }
     .registration_space{
        width:100%!important
    }
     .registration_space .section_title p{
        font-size:17px;
        line-height:24px;
        margin-top:40px;
        width:90%
    }
     .modal_form{
        width:95%;
        margin:0 auto
    }
     .modal_form .touch_form .single_input label.radio-inline{
        width:35%
    }
     .width_xs_10{
        width:10%!important
    }
     .width_xs_20{
        width:20%!important
    }
     .width_xs_30{
        width:30%!important
    }
     .width_xs_40{
        width:40%!important
    }
     .width_xs_50{
        width:50%!important
    }
     .width_xs_60{
        width:60%!important
    }
     .width_xs_70{
        width:70%!important
    }
     .width_xs_80{
        width:80%!important
    }
     .width_xs_90{
        width:90%!important
    }
     .width_xs_100{
        width:100%!important
    }
     .m_xs_0{
        margin:0!important
    }
     .mt_xs_0{
        margin-top:0!important
    }
     .mt_xs_10{
        margin-top:10px!important
    }
     .mt_xs_20{
        margin-top:20px!important
    }
     .mt_xs_30{
        margin-top:30px!important
    }
     .mt_xs_40{
        margin-top:40px!important
    }
     .mt_xs_50{
        margin-top:50px!important
    }
     .mb_xs_0{
        margin-bottom:0!important
    }
     .mb_xs_10{
        margin-bottom:10px!important
    }
     .mb_xs_20{
        margin-bottom:20px!important
    }
     .mb_xs_30{
        margin-bottom:30px!important
    }
     .mb_xs_40{
        margin-bottom:40px!important
    }
     .mb_xs_50{
        margin-bottom:50px!important
    }
     .eric_tsang_mobile{
        bottom:0;
        position:relative;
        width:60%;
        margin:50px auto -20px;
        text-align:center;
        display:block
    }
     .card .stats-container ul li strong{
        font-size:20px!important;
        line-height:1.5
    }
     .card .stats-container ul{
        width:95%;
        margin:0 auto 5%
    }
     .front,.back{
        height:100%
    }
     .card .content{
        padding:10px 0!important
    }
     .content .ms_btn{
        position:relative;
        bottom:-5px
    }
     .front,.back{
        height:620px!important
    }
     .card .stats-container{
        width:90%!important;
        margin:20px auto;
        min-height:275px
    }
     .section_title h3{
        font-size:28px!important
    }
     .back .header h3{
        font-size:21px!important
    }
     .card .header{
        padding:20px 0
    }
     .card-container,.front,.back{
        height:715px!important
    }
     .card .header h3{
        margin-top:25px!important
    }
     .card .stats-container ul li{
         font-size: 15px!important;
         margin: 0 auto 5%!important;
    }
     .modal-dialog-slideout {
         width: 85%!important;
         max-width: 85%;
    }
     .modal-dialog-slideout .close {
         font-size: 2rem;
    }
     .vt_tour_content .ms_btn {
         display: block;
         width: 100%;
         margin: 0 auto 25px auto;
         font-size: 17px;
    }
     .filter-button, .filter-button.active {
         margin-top: 15px;
         width: 45%;
         font-size: 14px;
         margin-bottom: 0px;
    }
     .slider_text p {
         font-size: 11px !important;
         padding-top: 15px !important;
         line-height: 15px !important;
    }
     .thankyou_text {
         font-size: 2em;
    }
     .terms_form {
         font-size: 10px;
         font-family: Gotham-Medium;
    }
     .terms_form input{
         margin-right: 5px !important;
    }
     .houzkey_logo_img {
         max-width: 90px;
         margin-top: 5px;
         right: 5px;
         bottom: 5px;
    }
     .breaker_text .section_title h3 strong {
         display: block;
    }
     .breaker_text .section_title h3 {
         font-size: 28px!important;
         line-height: 32px;
         margin-bottom: 25px !important;
    }
     .breaker_text .section_title {
         margin-bottom: 15px;
    }
     .projects_area {
         padding-top: 50px;
    }
     .breaker_text {
         padding-top: 75px;
    }
    .listing-header{
        background-image: url("../img/q2/breaker_mobile.jpg");
    }
    .price-monthly p { 
        font-size: 16px;
    }
}
@media (max-width:320px) {
     .slider_text h1 {
         font-size: 1.2em;
    }
     .icon img {
         max-width: 60%;
    }
     .header-area .ms_btn, .header-area .ms_btn:focus, .header-area .ms_btn:hover {
         font-size: 13px;
    }
     .btn_bottom_hero{
        bottom:-55px
    }
     .section_title p{
        font-size:16px;
        line-height:22px;
        margin-top:30px
    }
     .ms_btn,.ms_btn:focus,.ms_btn:hover{
        font-size:18px;
        padding:10px 25px
    }
     .btn_howitworks::after{
        font-size:30px
    }
     .projects_area .single_service{
        width:100%
    }
     .panel_content p strong{
        font-size:15px
    }
     .panel_content p{
        font-size:14px
    }
     .panel_content span{
        font-size:14px
    }
     .panel_content h3{
        font-size:18px
    }
     .section_title h3{
        font-size:25px;
        line-height:1.15
    }
     .section_title h3:before{
        bottom:-5px
    }
     .houzkey_logo_img{
        max-width:45px;
        margin-top:0
    }
     .steps_panel p{
        width:75%
    }
     .card .stats-container ul li{
        font-size:15px!important
    }
     .card .header{
        padding:20px 0 0
    }
     .card .stats-container ul li strong{
        font-size:20px!important
    }
     .back .header h3{
        font-size:18px
    }
     .card .stats-container ul li.buildsize_icon,.card .stats-container ul li.room_icon,.card .stats-container ul li.fac_icon,.card .stats-container ul li.others_icon,.card .stats-container ul li.repayment_icon{
        padding-left:40px!important
    }
     .card-container, .front, .back{
        height:650px!important
    }
     .thankyou_text {
         font-size: 1.2em;
    }
}