/* GLOBAL STYLES
-------------------------------------------------- */
    /* Padding below the footer and lighter body text */
    
    body {
        /* padding-bottom: 40px; */
        color: #5a5a5a;
    }
    /* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    
    .navbar-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 20;
    }
    /* Flip around the padding for proper display in narrow viewports */
    
    .navbar-wrapper>.container {
        padding-right: 0;
        padding-left: 0;
    }
    
    .navbar-wrapper .navbar {
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .navbar-wrapper .navbar .container {
        width: auto;
    }
    /* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
    /* Carousel base class */
    
    .carousel {
        height: calc(50vw - 50px);
        margin-bottom: 60px;
    }
    
    .carousel-control {
        height: calc(50vw - 50px);
    }
    /* Since positioning the image, we need to help out the caption */
    
    .carousel-caption {
        z-index: 10;
    }
    /* Declare heights because of positioning of img element */
    
    .carousel .item {
        background-color: #777;
        background-size: cover;
        /* position: absolute; */
        overflow: hidden;
    }
    
    .carousel .item1 {
        background: url("./images/banner1-min.jpg") no-repeat;
        height: calc(50vw - 50px);
        background-color: #777;
        background-size: cover;
        /* position: absolute; */
        overflow: hidden;
        background-position-y: -50px;
    }
    
    .carousel .item2 {
        background: url("./images/banner2-min.jpg") no-repeat;
        height: calc(50vw - 50px);
        background-color: #777;
        background-size: cover;
        /* position: absolute; */
        overflow: hidden;
    }
    
    .carousel .item3 {
        background: url("./images/banner3-min.jpg") no-repeat;
        height: calc(50vw - 50px);
        background-color: #777;
        background-size: cover;
        /* position: absolute; */
        overflow: hidden;
    }
    
    .carousel .item4 {
        background: url("./images/banner4-min.jpg") no-repeat;
        height: 50vw;
        background-color: #777;
        background-size: cover;
        /* position: absolute; */
        overflow: hidden;
    }
    
    .carousel-inner>.item>img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        /* height: 800px; */
        min-height: 800px;
        height: 60vw;
    }
    
    #foot_inner p {
        height: 20px;
        line-height: 20px;
    }
    
    .footer-left {
        width: 40%;
        float: left;
        text-align: center;
        margin: 20px 0 10px 0;
    }
    
    .footer-left img {
        width: 150px;
    }
    
    .footer-left div {
        margin-top: 10px;
    }
    
    .footer-right {
        width: 60%;
        float: left;
    }
    
    .company-info table {
        /* margin-left: 40px; */
    }
    
    .company-info .title {
        height: 40px;
        line-height: 40px;
        width: 100px;
        text-align: justify;
        text-justify: distribute-all-lines;
        text-align-last: justify;
        padding: 0 0px 0 15px;
        float: left;
        font-weight: 600;
    }
    
    .company-info .info {
        line-height: 40px;
        padding-left: 20px;
        width: calc(100% - 150px);
        float: left;
    }
    
    .company-info .map {
        /* padding-left: 20px; */
    }
    /* @media screen and (orientation: portrait) {
    .carousel-inner>.item>img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
    }
} */
    /* MARKETING CONTENT
-------------------------------------------------- */
    /* Center align the text within the three columns below the carousel */
    
    .marketing .col-lg-4 {
        margin-bottom: 20px;
        text-align: center;
    }
    
    .marketing h2 {
        font-weight: normal;
    }
    
    .marketing .col-lg-4 p {
        margin-right: 10px;
        margin-left: 10px;
    }
    /* Featurettes
------------------------- */
    
    .featurette-divider {
        margin: 0;
        /* Space out the Bootstrap <hr> more */
    }
    /* Thin out the marketing headings */
    
    .featurette-heading {
        font-weight: 300;
        line-height: 1;
        letter-spacing: -1px;
    }
    
    .featurette img {
        width: 500px;
        height: 500px;
        max-width: 100%;
    }
    /* RESPONSIVE CSS
-------------------------------------------------- */
    
    @media (min-width: 768px) {
        /* Navbar positioning foo */
        .navbar-wrapper {
            margin-top: 20px;
            position: fixed;
        }
        .navbar-wrapper .container {
            padding-right: 15px;
            padding-left: 15px;
        }
        .navbar-wrapper .navbar {
            padding-right: 0;
            padding-left: 0;
        }
        /* The navbar becomes detached from the top, so we round the corners */
        .navbar-wrapper .navbar {
            border-radius: 4px;
        }
        /* Bump up size of carousel content */
        .carousel-caption p {
            margin-bottom: 20px;
            font-size: 21px;
            line-height: 1.4;
        }
        .featurette-heading {
            font-size: 50px;
        }
    }
    
    @media (min-width: 992px) {
        .featurette-heading {
            margin-top: 120px;
        }
    }
    
    .contact_new_inner {
        margin-bottom: 15px;
    }
    
    .title_item_big_contact {
        font-size: 30px;
        font-weight: 700;
    }
    
    #foot_inner {
        margin-top: 20px;
    }
    
    #footer {
        margin: 20px 0 0px 0;
        bottom: 0;
        width: 100%;
        padding: 0;
        border-top: #ccc 1px solid;
        text-align: left;
        font-size: 100%;
        background-color: #fafafa;
    }
    
    #footer .denote {
        padding-left: 5px;
        float: left;
        width: 100px;
        font-weight: 600;
    }
    
    .copyright {
        border-top: #ccc 1px solid;
        padding: 15px;
        text-align: center;
    }
    
    .row {
        padding: 20px 0;
        margin: 0;
    }
    
    .company-info>.row {
        padding: 0px;
        /* background-color: #d5dad5; */
        background-color: #0bdede;
    }
    
    .company-info div:nth-child(odd) {
        background-color: #eee;
    }
    
    .company-info h2 {
        font-weight: normal;
        text-align: center;
        border: solid 1px;
    }
    
    .row p {
        line-height: 2;
        padding-left: 10px;
    }
    
    .row img {
        padding: 0 20px;
        /* margin-right: 20px; */
        height: 28%;
        width: 40%;
        float: left;
        /* margin-left: 50px; */
        max-width: 360px;
        max-height: 240px;
    }
    
    .system .title {
        font-size: 20px;
        font-weight: 600;
        line-height: 40px;
    }
    
    .sample img {
        padding: 10px 80px;
        /* margin-right: 20px; */
        width: 100%;
        float: left;
        /* margin-left: 50px; */
        max-width: unset;
        max-height: unset;
    }
    
    h3 {
        text-align: center;
    }
    /* .container>.item2 {
        background-color: aliceblue;
    }
    
    .container>.item {
        background-color: antiquewhite;
    } */
    
    .container .item2 p {
        width: 100%;
        /* margin-left: 50px;
        padding-right: 30px; */
        float: left;
        /* max-width: 600px; */
    }
    
    .item1 .carousel-caption p {
        -webkit-line-clamp: 2;
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .item2 .carousel-caption p {
        -webkit-line-clamp: 2;
        font-size: 16px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .item-desc {
        float: left;
        width: 60%;
        padding-left: 20px;
    }
    
    table {
        width: 100%;
        margin-bottom: 1em;
        border-collapse: collapse;
        border: 1px solid #ddd;
    }
    
    th {
        padding: 10px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #ddd;
        background: #f1f1f1;
        width: 20%;
    }
    
    td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ddd;
        width: 80%;
    }
    /* .container .item2 img {
        margin-right: 20px;
        height: 18vw;
        width: 25vw;
        float: left;
        margin-left: 0px;
        max-width: 360px;
        max-height: 240px;
    } */
    /* .navbar-brand {
        padding: 0px;
    }
    
    .navbar-brand img {
        height: 40px;
        margin: 5px;
    } */
    
    @media screen and (orientation: portrait) and (max-width: 760px) {
        .carousel-control.left {
            background-image: unset;
        }
        .carousel-control.right {
            right: 0;
            left: auto;
            background-image: unset;
        }
        .container {
            padding-right: 0px;
            padding-left: 0px;
            margin-right: auto;
            margin-left: auto;
        }
        .item .carousel-caption p {
            color: #eee;
            line-height: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .item1 .carousel-caption p {
            -webkit-line-clamp: 2;
        }
        .item2 .carousel-caption p {
            -webkit-line-clamp: 2;
        }
        .item1 .carousel-caption .single-p {
            display: none;
        }
        .carousel {
            top: 0px;
            height: 120vw;
            margin-bottom: 0px;
        }
        .carousel-control {
            height: 120vw;
        }
        .company-info .map {
            padding-left: 0px;
            clear: both;
            padding-top: 20px;
        }
        .carousel-inner .item {
            height: 120vw;
            /* max-height: 600px; */
            width: 100%;
            /* background: url("./images/phone-banner1.jpg") no-repeat; */
            background: url("./images/phone-banner1.jpg") no-repeat;
            background-size: cover;
            /* position: absolute; */
            overflow: hidden;
        }
        .carousel-inner .item1 {
            margin-top: 60px;
            height: calc(120vw - 60px);
            /* max-height: 600px; */
            width: 100%;
            /* background: url("./images/phone-banner1.jpg") no-repeat; */
            background: url("./images/logo1.jpg") no-repeat 100%;
            background-size: contain;
            /* position: absolute; */
            overflow: hidden;
        }
        .item1 .container {
            display: none;
        }
        .carousel-inner .item2 {
            height: 120vw;
            /* max-height: 600px; */
            width: 100%;
            background: url("./images/phone-banner5-min.jpg") no-repeat;
            background-size: cover;
            /* position: absolute; */
            overflow: hidden;
        }
        .carousel-caption {
            right: 2%;
            left: 2%
        }
        .featurette-divider {
            margin: 20px 0;
            /* S
            pace out the Bootstrap <hr> more */
        }
        .item-desc {
            float: left;
            width: 100%;
            padding-left: 10px;
        }
        .row p {
            line-height: 2;
            padding-left: 0px;
        }
        .row img {
            /* margin-right: 0px; */
            height: 60vw;
            width: 100%;
            /* float: left; */
            margin-left: 0px;
            padding: 0px;
            max-width: unset;
            margin: 10px 0;
        }
        .sample img {
            height: auto;
        }
        p {
            margin-left: 5px;
            margin-right: 5px;
        }
        .col-lg-12 {
            width: 100%;
            padding-left: 0;
            padding-right: 0;
        }
        .company-info {
            /* padding: 0 15px; */
            padding: 0px;
        }
        .company-info .title {
            padding: 0;
            width: 80px;
        }
        .company-info .info {
            padding-left: 10px;
            width: calc(100% - 90px);
        }
        .company-info>.row {
            padding: 0 10px;
        }
        .company-info>.map {
            padding: 0px;
        }
        #footer {
            margin: 20px 0 0px 0;
            bottom: 0;
            width: 100%;
            padding: 0;
            border-top: #ccc 1px solid;
            text-align: left;
            font-size: 100%;
            background-color: #fafafa;
            padding: 0px;
        }
        .contact_new_inner {
            font-weight: normal;
            text-align: center;
            border: solid 1px;
            margin: 10px 0;
            font-weight: 600;
        }
        #footer .denote {
            width: 80px;
        }
        .footer-left {
            width: 100%;
            display: none;
        }
        .footer-right {
            width: 100%;
        }
        .footer-left img {
            width: 80px;
        }
    }
    
    @media screen and (min-width: 768px) {
        .carousel-caption {
            right: 15%;
            left: 15%;
            padding-bottom: 30px;
        }
    }