/* =========================
   Responsive
   ========================= */


/*ipad mini*/
@media only screen and (width: 768px) and (height: 1024px) {
    .mid-header .logo-title {
        font-size: 1.3rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}

/*ipad air*/
@media only screen and (width: 820px) and (height:1180px) {
    .mid-header .logo-title {
        font-size: 1.3rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}

/*ipad pro*/
@media only screen and (width: 1024px) and (height:1366px) {
    .mid-header .logo-title {
        font-size: 1.6rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}

/*surface pro 7*/
@media only screen and (width: 912px) and (height:1368px) {
    .mid-header .logo-title {
        font-size: 1.4rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}

/*asus zenfone fold*/
@media only screen and (width: 853px) and (height:1280px) {
    .mid-header .logo-title {
        font-size: 1.2rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}

/*nest hub*/
@media only screen and (width: 1024px) and (height:600px) {
    .mid-header .logo-title {
        font-size: 1.6rem !important;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }
}


@media (max-width: 768px) {
    .log-title-block{
        display:block !important;
    }

    .mid-header .logo-title {
        font-size: 2rem;
    }

    .mid-header .card {
        height: 90px;
        padding: 1rem;
    }

    .slogan-box {
        width: 100%;
        max-width: 100%;
        height: 111px;
        margin: 0 auto;
    }

    .carousel-inner .carousel-item img {
        height: auto;
    }
}