@media (min-width: 1300px) {
    .container {
        width: 1260px;
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 21px;
    }
    footer .pv-app small {
        left: 1px;
    }
}

@media (min-width: 1200px) {
    .home-middle .col-lg-7 {
        width: 61.33333333%;
    }
    .home-middle .col-lg-5 {
        width: 38.66666667%;
    }
    .home-middle .mid-con {
        margin: 0 5% 0 33%;
    }
}

@media only screen and (min-device-width: 1001px) and (max-device-width: 1100px) {
    .header .navbar-default .navbar-nav>li>a {
        font-size: 20px;
        padding: 0px 14px;
    }
    .header .navbar-default .navbar-nav>li.pv-app::before {
        left: 0;
    }
    /** home banner **/
    .banner-para {
        padding: 30px 40px 30px 60px;
    }
    /** home middle section **/
    .home-middle h2 {
        font-size: 25px;
    }
    .home-middle .mid-con {
        margin: 0 5% 0 10%;
    }
    .home-middle .mid-con p {
        font-size: 20px;
        margin: 0 0 25px;
    }
    .r-con figcaption {
        font-size: 18px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    footer .pv-app small {
        width: 141px;
        background-image: url("../images/menu-bt-tab.png");
        padding-top: 16px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        height: 53px;
    }
    .navbar-default .navbar-nav>li {
        padding: 49px 0px 0px;
    }
    header .pv-app {
        background-image: url(../images/menu-bg-tab.png);
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1000px) {
    footer .pv-app small {
        width: 100%;
        background-image: url("../images/menu-bt-tab.png");
        padding-top: 16px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
        height: 53px;
        margin: 0px auto;
        padding: 0px !important;
        left: 1px;
    }
    header .pv-app {
        background-image: url(../images/menu-bg-tab.png);
    }
    header .pv-app {
        background-image: url(../images/menu-bg-tab.png);
    }
    .header .navbar-header {
        width: 40%;
    }
    .header .navbar-brand {
        width: 52%;
        padding: 19px 10px 13px 20px;
    }
    .header .navbar-brand img {
        width: 100%;
    }
    .header .navbar-header p.head-mmc {
        font-size: 20px;
        margin: 16px 0 0 8px;
    }
    .header .navbar-default .navbar-nav>li>a {
        padding: 2px 9px;
        font-size: 19px;
        line-height: inherit;
    }
    .header .navbar-default .navbar-nav>li.pv-app::before {
        left: 0;
    }
    /** home banner **/
    /* .ban-content {
		width: 60%;
	} */
    .home-banner h2 {
        font-size: 25px;
        padding: 10px;
    }
    .banner-para {
        padding: 20px 30px 20px 60px;
    }
    .banner-para p {
        font-size: 16px;
        margin-bottom: 10px;
    }
    /** home middle section **/
    .home-middle .mid-con {
        margin: 0 5%;
    }
    .home-middle .mid-con p {
        font-size: 20px;
        margin: 0 0 25px;
    }
    .r-con figcaption {
        font-size: 18px;
    }
    /** all pages **/
    p {
        font-size: 18px;
        margin: 0 0 10px;
    }
    /** footer **/
    .top-footer .navbar-default .navbar-nav>li {
        padding: 58px 0 0;
    }
    .top-footer .navbar-default .navbar-nav>li>a {
        font-size: 20px;
        padding: 10px;
        line-height: inherit;
    }
    .top-footer .navbar-default .navbar-nav>li.pv-app::before {
        bottom: -50px;
        left: 3%;
    }
    .bottom-footer .flinks {
        font-size: 17px;
    }
    .bottom-footer .flinks li a {
        padding: 0 5px;
    }
    .bottom-footer address {
        font-size: 18px;
    }
}

@media only screen and (max-width: 1000px) {
    header .pv-app {
        background-size: 100% auto;
    }
    .home-middle .right {
        padding: 0 0 0 10px;
    }
}

@media only screen and (max-width: 800px) {
    .pv-app small {
        font-size: 12px;
        left: 0;
        right: 0;
    }
    .pv-app small:after {
        border-width: 12px 54px 10px 54px;
    }
}

@media only screen and (max-width: 767px) {
    .home-banner h1 {
        font-size: 48px;
    }
    .home-banner img {
        width: 100%;
        height: 100%;
        max-height: 290px;
        object-fit: cover;
    }
    header .pv-app {
        background: none;
    }
    .pv-app small {
        display: none;
    }
    .container {
        width: 90%;
    }
    .bfooter .container {
        width: 90%;
    }
    .navbar-brand {
        padding: 5px 0;
        width: 40%;
    }
    .navbar-brand>img {
        width: 100%;
    }
    .header p.head-mmc {
        font-size: 18px;
        margin: 9px 0 0 14px;
        padding: 0 15px;
    }
    .navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        margin-top: 27px;
        background-color: #44a0e7;
        border: none;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #ffffff;
    }
    .navbar-default .navbar-collapse {
        padding: 0;
    }
    .navbar-default .navbar-nav>li {
        padding: 0;
    }
    .navbar-default .navbar-nav>li>a {
        padding: 10px 0px;
        border-right: none;
        border-bottom: 1px solid #d5d5d5;
        font-size: 20px;
        line-height: inherit;
    }
    .navbar-default .navbar-nav>li.pv-app::before {
        background-image: none;
    }
    /** home banner **/
    /* .ban-content {
        position: relative;
        width: 100%;
    } */
    .ban-content {
        position: absolute;
        top: 15px;
        width: 100%;
        left: 0;
        padding: 20px;
    }
    .home-banner h2 {
        font-size: 18px;
        padding: 10px;
    }
    .banner-para {
        padding: 20px;
        background-color: #f5f5f5;
    }
    .banner-para p {
        margin-bottom: 10px;
    }
    /** home middle section **/
    .home-middle {
        margin: 20px 0;
    }
    .home-middle .left {
        border: 0;
        padding: 0 0 30px 0;
    }
    .home-middle .right {
        padding: 0;
    }
    .home-middle h2 {
        font-size: 24px;
    }
    .home-middle .mid-con {
        margin: 0;
    }
    .home-middle .mid-con p {
        font-size: 18px;
        margin: 0 0 20px 0;
    }
    .home-middle .mid-con .btn-link a,
    .home-middle .mid-con .btn-link a:hover,
    .home-middle .mid-con .btn-link a:focus {
        padding: 10px 15px;
    }
    .r-con figcaption {
        font-size: 18px;
    }
    .inner-banner h4 {
        right: 8%;
    }
    /** all pages **/
    .inner-banner {
        margin: 20px 0 0;
    }
    .title {
        margin: 0 0 20px;
    }
    p {
        font-size: 18px;
        margin: 0 0 10px;
    }
    .content .left {
        padding: 0 0px 10px 0;
        border-right: none;
    }
    .content .right {
        padding: 0px;
    }
    section.vd-middle .right-vd {
        padding: 0 0px 20px 0;
        height: auto;
    }
    section.vd-middle .vd-con p {
        height: auto;
    }
    .vbs-btm {
        padding: 0 0px 20px 0;
    }
    /** footer **/
    .top-footer .navbar-default .navbar-collapse {
        border: none;
        padding: 0;
    }
    .top-footer .navbar-brand {
        margin: 10px auto;
        float: none;
        display: block;
    }
    .top-footer .navbar-default .navbar-nav>li.pv-app::before {
        background-image: none;
    }
    .top-footer .navbar-default .navbar-nav>li {
        display: inline-block;
        border: none;
    }
    .top-footer .navbar-default .navbar-nav>li:first-child>a {
        border-left: none;
    }
    .top-footer .navbar-default .navbar-nav>li>a {
        border-left: 1px solid #999999;
        border-right: none;
        font-size: 17px;
        padding: 10px 15px;
        border-bottom: none;
    }
    .bottom-footer {
        padding: 20px;
    }
    .top-footer .navbar-right {
        margin: auto;
        text-align: center;
    }
    .bottom-footer .flinks,
    .bottom-footer address {
        text-align: center;
    }
}

@media only screen and (max-width: 500px) {
    .header .navbar-header p.head-mmc {
        font-size: 12px;
        line-height: 19px;
        margin: 15px 0 0 15px;
        padding: 0 15px;
    }
    .navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        margin-top: 20px;
    }
    .inner-banner h3 {
        left: 4%;
        font-size: 40px;
    }
    .contact .r-con figcaption {
        font-size: 35px;
    }
    .inner-banner h4 {
        right: 4%;
        font-size: 35px;
    }
    /** footer **/
    .top-footer .navbar-right {
        text-align: center;
    }
    .top-footer .navbar-default .navbar-nav>li {
        width: auto;
        margin-bottom: 10px;
        padding: 0 10px;
        text-align: center;
        display: inline-block;
    }
    .top-footer .navbar-default .navbar-nav>li>a {
        font-size: 18px;
        padding: 0;
        text-align: center;
        margin-top: 5px;
        border: none;
    }
    .bottom-footer p.head-mmc {
        font-size: 18px;
        padding: 0 15px;
        text-align: left;
    }
    .bottom-footer .flinks li a,
    .bottom-footer address {
        font-size: 14px;
    }
    .bottom-footer .flinks li:first-child a {
        border-right: none;
    }
}

@media only screen and (max-width: 420px) {
    .header .navbar-header p.head-mmc {
        margin: 15px 0 0 10px;
    }
    .navbar-brand {
        padding: 5px 0;
        width: 50%;
    }
    .navbar-default .navbar-toggle,
    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:focus {
        margin-top: 15px;
    }
    /** home banner **/
    .banner-para p {
        font-size: 12px;
    }
    /** home middle section **/
    .r-con figure {
        width: 130px;
        height: 64px;
    }
    .r-con figcaption {
        font-size: 14px;
    }
    .contact .r-con figure {
        margin-right: 10px;
    }
    .contact .r-con figcaption {
        font-size: 18px;
    }
    /** footer **/
    .top-footer .navbar-default .navbar-nav>li {
        margin-bottom: 10px;
    }
    .top-footer .navbar-default .navbar-nav>li.pv-app {}
    .bottom-footer .col-xs-6.col-sm-6.col-md-6.col-lg-6 {
        padding: 0 0 20px;
        text-align: center;
        width: 100%;
    }
    .bottom-footer .col-xs-6.col-sm-6.col-md-6.col-lg-6:last-child {
        padding: 0;
    }
}

@media only screen and (max-device-width: 420px) {
    .home-middle h2 {
        font-size: 20px;
    }
}

@media only screen and (max-device-width: 320px) {
    .header .navbar-header p.head-mmc {
        margin: 4px 0 0 3px;
        padding: 0 6px;
    }
}

@media only screen and (min-device-width: 1101px) and (max-device-width: 1300px) {
    .pv-app small::after {
        border-width: 12px 65px 10px 68px !important;
    }
}

@media only screen and (min-device-width: 1000px) and (max-device-width: 1100px) {
    .pv-app small {
        font-size: 12px !important;
        left: 6px !important;
        right: 6px !important;
    }
    .pv-app small::after {
        border-width: 12px 55px 10px 55px !important;
    }
    .top-footer .pv-app small::after {
        border-width: 2px 86px 10px 86px !important;
    }
    .home-banner h2 {
        font-size: 35px !important;
    }
    .home .home-banner p {
        font-size: 17px !important;
    }
}

@media only screen and (min-device-width: 900px) and (max-device-width: 1024px) {
    header .pv-app {
        background-size: 100% auto;
    }
    .pv-app small {
        font-size: 13px !important;
        left: 0px !important;
        right: 0px !important;
    }
    .pv-app small::after {
        border-width: 12px 60px 10px 60px !important;
    }
    .top-footer .pv-app small::after {
        border-width: 12px 86px 10px 86px !important;
    }
}

.grid-item img {
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 800px) {
    header .pv-app {
        background-size: 100% auto;
    }
    .clientele .inner-banner h4 {
        font-size: 40px;
    }
    .clients-logo td {
        padding: 20px 0;
    }
}

@media only screen and (max-width: 600px) {
    .clientele h2 {
        font-size: 36px;
    }
    .clientele .inner-banner h4 {
        bottom: 10%;
        left: 3%;
        font-size: 26px;
    }
    .clients-logo tr,
    .clients-logo td {
        display: block;
    }
    .clients-logo td {
        padding: 15px 0;
    }
}

@media only screen and (max-width: 800px) {
    .philosophy .inner-banner h4 {
        bottom: 40%;
        right: 11%;
        font-size: 40px;
    }
}

@media only screen and (max-width: 1100px) {
    .navbar-default .navbar-nav>li>a {
        font-size: 22px;
    }
}

@media only screen and (max-width: 600px) {
    .philosophy h2 {
        font-size: 36px;
    }
    .philosophy .inner-banner h4 {
        bottom: 40%;
        right: 13%;
        font-size: 30px;
    }
}

@media only screen and (max-width: 400px) {
    .philosophy .inner-banner h4 {
        font-size: 20px;
    }
}

.works.home i:after,
.works.home i:before {
    -moz-transition: all .25s ease-in;
    /* WebKit */
    -webkit-transition: all .25s ease-in;
    /* Opera */
    -o-transition: all .25s ease-in;
    /* Standard */
    transition: all .25s ease-in;
    content: "";
    position: absolute;
    background: rgba(91, 151, 165, 0.55);
}

.works a i:before {
    background: none;
}

.works i:before {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.works .hh b {
    content: "";
    position: absolute;
    background: #fff;
    width: 100%;
    height: 10px;
    top: 49%;
    left: 0;
    right: 0;
    z-index: 111;
}

.works .vh b {
    content: "";
    position: absolute;
    background: #fff;
    width: 10px;
    height: 100%;
    left: 49%;
    top: 0;
    bottom: 0;
    z-index: 111;
}

.works i:hover:before,
works i:hover:after {
    background: rgba(91, 151, 165, 0)
}

.works td {
    position: relative;
}

.works a img {
    position: relative;
    z-index: 1;
}

.works a img+img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}

.works a img {
    opacity: 1;
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
    z-index: 1;
    position: relative;
    display: block;
}

.works a:hover img.a {
    opacity: 0;
}

.works a img.b {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    height: auto;
}

.works table td {
    position: relative;
}

.works table img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
    position: relative;
}

.works table td i {
    display: block;
}

.works table td i:before {
    z-index: 10;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
}

@media only screen and (max-width: 1100px) {
    .works .hh b {
        height: 3px;
    }
    .works .vh b {
        width: 3px;
    }
    .works table td i:before {
        border: 3px solid #fff;
    }
}

@media only screen and (max-width: 1000px) {
    .works .hh b {
        height: 2px;
    }
    .works .vh b {
        width: 2px;
    }
    .works table td i:before {
        border: 2px solid #fff;
    }
}

@media only screen and (max-width: 600px) {
    .works .hh b {
        height: 1px;
    }
    .works .vh b {
        width: 1px;
    }
    .works table td i:before {
        border: 1px solid #fff;
    }
}