﻿@media (min-width: 992px) {
    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .d-md-block {
        display: block !important;
    }

    .article__title {
        color: #555;
    }

    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .footer {
        margin-top: 5rem;
    }

    .nav li:before {
        display: block;
    }

    .nav li a {
        padding: 35px 15px;
    }

    .header {
        box-shadow: 0 4px 8px 0 #000000;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
    }

    .first-md {
        -ms-order: 1;
        order: 1;
    }

    .col-md-8 {
        flex-basis: 66.66667%;
        max-width: 66.66667%;
    }

    .col-md-4 {
        flex-basis: 33.33333%;
        max-width: 33.33333%;
    }

    .account {
        margin-top: -6.875rem;
    }
}

@media (min-width: 768px) {
    .header, .header-after { height: 80px; }
    .d-sm-flex {
        display: flex !important;
    }

    .col-sm-10 {
        flex-basis: 83.33333%;
        max-width: 83.33333%;
    }

    .detail .title h1 {
        font-size: 2rem;
    }

    .d-sm-block {
        display: block !important;
    }

    .homestay__title {
        font-size: 45px;
    }

    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .account {
        padding: 2rem;
    }
}



@media (min-width: 1200px) {
    .container {
        padding: 0 2.8rem;
    }

    .col-lg-20 {
        flex-basis: 20%;
        max-width: 20%;
    }

    .col-lg-2 {
        flex-basis: 16.66667%;
        max-width: 16.66667%;
    }
}

@media (max-width: 1024px) {
    .menu__item { margin-left: 1rem; }
}

@media (max-width: 900px) {
    .menu-mobile--close, .menu-mobile--open { display: inline-block; }

    .menu__item {
        margin: 5px 0;
        width: 100% !important;
    }

    .menu-mobile--close {
        padding: 1.25rem;
        position: absolute;
        right: 0;
        top: 0;
    }

    .menu {
        -webkit-transform: translateX(-20rem);
        align-items: flex-start;
        background: #fff;
        bottom: 0;
        flex-direction: column;
        justify-content: flex-start;
        left: 0;
        overflow-y: auto;
        padding: 1.25rem;
        position: fixed;
        text-align: left;
        top: 0;
        transform: translateX(-20rem);
        transition: -webkit-transform .5s cubic-bezier(.7, 0, .3, 1) 0s;
        transition: transform .5s cubic-bezier(.7, 0, .3, 1) 0s;
        transition: transform .5s cubic-bezier(.7, 0, .3, 1) 0s, -webkit-transform .5s cubic-bezier(.7, 0, .3, 1) 0s;
        width: 20rem;
        z-index: 101;
    }

    .menu__link {
        display: block;
        font-size: 1rem;
        font-weight: 600;
        line-height: 2.5rem;
    }

    .menu--opened {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .home {
        margin-top: -0.5rem
    }

    .header {
        box-shadow: none
    }
}

@media (min-width: 769px) {
    .popover { min-width: 320px; }

    .title h2 { font-size: 1.8rem; }

    .title p { margin: .5rem 0 0; }
}

@media (min-width: 1400px) {
    .section { margin-top: 4rem; }

    .title h2 { font-size: 2rem; }

    .title p { margin: .5rem 0 0; }

    .product__content {
        bottom: 1.5rem;
        left: 2rem;
    }

    .tos-menu.nav li a {
        padding: 30px 15px;
    }
}

@media (min-width: 768px) {

    
    .section { margin-top: 3.5rem; }
    .home {
        margin-top: -2.5rem
    }
    .product__content {
        bottom: 1.5rem;
        left: 1.5rem;
    }

    .d-sm-inline {
        display: inline!important;
    }

    .post__header {
        padding: 1.25rem;
    }

    .post__category {
        letter-spacing: 1.2px;
        font-size: .75rem;
        padding: .28rem 1.78rem .1rem;
    }

    .post__title {
        font-size: 1.25rem;
        padding: 1.5rem;
    }

    .app-introduce__heading {
        font-size: 1.875rem;
    }

    .footer__bottom {
        background: #fff;
    }
    .nav {
        flex-direction: row;
    }

    .homestay__title {
        font-size: 45px;
    }
    .homestay__desc {
        font-size: 20px;
    }
}

@media (min-width: 481px) {
    .title h2 { font-size: 1.5rem; }

    .title p { margin: .5rem 0 0; }
}

@media screen and (min-width: 576px)  {
    .promo__label-wrap {
        left: 1rem;
        top: 1rem;
    }
}

@media (min-width: 1050px){
    .post__header {
        padding: 1.5rem;
    }

}

@media (min-width: 1350px) {
    .post__title {
        font-size: 19px;
    }
}

@media screen and (max-width: 767px) {
    .home__banner {
        height: 425px;
    }
}

@media screen and (max-width: 767px) {
    .home__banner-content {
        width: 100%;
        padding: 0 20px;
        bottom: 20px;
    }

        .home__banner-content h3 {
            font-size: 18px;
            /*line-height: 22px;*/
            padding: 0px 20px;
        }

        .home__banner-content h4 {
            font-size: 18px;
            line-height: 20px;
            margin: 15px 0;
            padding: 0px 20px;
        }
}