body {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.9rem;
}

a {
    color: #000;
    text-decoration: none;
}

    a:hover {
        color: #c2200f;
        text-decoration: none;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bg-blue {
    background-color: #c2200f;
    color: #fff;
}

.bg-gray-logo {
    background: url(tab-bg-logo.png) no-repeat right bottom -6rem, #f5f5f5;
    background-size: 35%;
}

.btn {
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-blue {
    color: #fff;
    background-color: #c2200f;
    border-color: #c2200f;
}

    .btn-blue:hover {
        color: #fff;
        background-color: #c2200f;
        border-color: #ad1d0d;
    }

    .btn-blue:focus,
    .btn-blue.focus {
        color: #fff;
        background-color: #c2200f;
        border-color: #ad1d0d;
        box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
    }

    .btn-blue.disabled,
    .btn-blue:disabled {
        color: #fff;
        background-color: #c2200f;
        border-color: #c2200f;
    }

    .btn-blue:not(:disabled):not(.disabled):active,
    .btn-blue:not(:disabled):not(.disabled).active,
    .show > .btn-blue.dropdown-toggle {
        color: #fff;
        background-color: #ad1d0d;
        border-color: #ad1d0d;
    }

        .btn-blue:not(:disabled):not(.disabled):active:focus,
        .btn-blue:not(:disabled):not(.disabled).active:focus,
        .show > .btn-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
        }

.btn-outline-blue {
    color: #c2200f;
    border-color: #c2200f;
    font-weight: 600;
}

    .btn-outline-blue:hover {
        color: #fff;
        background-color: #c2200f;
        border-color: #c2200f;
    }

    .btn-outline-blue:focus,
    .btn-outline-blue.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-outline-blue.disabled,
    .btn-outline-blue:disabled {
        color: #c2200f;
        background-color: transparent;
    }

    .btn-outline-blue:not(:disabled):not(.disabled):active,
    .btn-outline-blue:not(:disabled):not(.disabled).active,
    .show > .btn-outline-blue.dropdown-toggle {
        color: #fff;
        background-color: #c2200f;
        border-color: #c2200f;
    }

        .btn-outline-blue:not(:disabled):not(.disabled):active:focus,
        .btn-outline-blue:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

.btn-outline-gray {
    color: #000;
    border-color: #ddd;
    font-weight: 600;
}

    .btn-outline-gray:hover {
        color: #000;
        background-color: #ddd;
        border-color: #ddd;
    }

    .btn-outline-gray:focus,
    .btn-outline-gray.focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
    }

    .btn-outline-gray.disabled,
    .btn-outline-gray:disabled {
        color: #000;
        background-color: transparent;
    }

    .btn-outline-gray:not(:disabled):not(.disabled):active,
    .btn-outline-gray:not(:disabled):not(.disabled).active,
    .show > .btn-outline-gray.dropdown-toggle {
        color: #000;
        background-color: #ddd;
        border-color: #ddd;
    }

        .btn-outline-gray:not(:disabled):not(.disabled):active:focus,
        .btn-outline-gray:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-gray.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
        }

.top-logo {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 1rem 0 1rem rgb(157 157 157 / 15%);
}

    .top-logo > div {
        background-image: url(/Content/qar/css/ust-bg.png);
        background-repeat: no-repeat;
        background-position: right 10rem bottom;
    }

.navbar-top {
    background-color: #c2200f;
}

.menu-top {
    font-weight: 600;
    text-align: center;
}

    .menu-top > li {
    }

        .menu-top > li > a {
            display: inline-block;
            padding: 1rem 2rem;
            color: #fff;
        }

        .menu-top > li.active > a,
        .menu-top > li:hover > a {
            border-bottom: 2px solid #fff;
        }

.slider {
    min-height: 520px;
    background: url(slider.jpg) no-repeat center;
    background-size: cover;
}

.tab-video-clip {
    width: 100%;
    display: flex;
    min-height: 405px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3rem 0;
    background: url(video-clip-bg.png) no-repeat center;
    background-size: cover;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

a.video-play {
    display: inline-block;
    color: #fff;
    margin: auto auto;
    text-align: center;
}

    a.video-play > i {
        display: inline-block;
        width: 4rem;
        height: 4rem;
        background-color: #c2200f;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        vertical-align: middle;
    }

        a.video-play > i:before {
            font-size: 2rem;
            line-height: 4rem;
        }

    a.video-play > span {
        display: block;
    }

.title-info {
    display: block;
    color: #c2200f;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
}

    .title-info:after {
        content: "";
        display: block;
        width: 3rem;
        margin: 1rem auto auto;
        border-bottom: 2px solid #c2200f;
    }

.tab-info {
}

    .tab-info > p {
        color: #2a2a2a;
        font-size: 1.3rem;
        line-height: 2rem;
    }

        .tab-info > p.text {
            font-size: 2rem;
            line-height: 3rem;
        }

.specs {
}

.spec-detail {
}

    .spec-detail > span.far:before {
        color: #c2200f;
        font-size: 3rem !important;
    }

    .spec-detail > i {
        display: block;
    }

        .spec-detail > i:before {
            content: "";
            display: inline-block;
            width: 0.5rem;
            border-bottom: 2px solid #c2200f;
        }

        .spec-detail > i:after {
            content: "";
            display: inline-block;
            width: 1.5rem;
            margin-left: 0.5rem;
            border-bottom: 2px solid #cccccc;
        }

    .spec-detail > span {
        font-size: 1rem;
    }

.tab-steps {
}

    .tab-steps > div {
        background-color: #2a2a2a;
        padding: 2rem 1rem;
        color: #fff;
        border-radius: 0.5rem;
        text-align: center;
    }

        .tab-steps > div:nth-child(2n+1) {
            margin-bottom: 2rem;
        }

        .tab-steps > div:nth-child(2n+2) {
            margin-top: 2rem;
        }

        .tab-steps > div:nth-child(2) {
            background-color: #b09778;
        }

        .tab-steps > div:nth-child(3) {
            background-color: #008dd2;
        }

        .tab-steps > div:nth-child(4) {
            background-color: #009746;
        }

        .tab-steps > div:nth-child(5) {
            background-color: #999;
        }

        .tab-steps > div > span.number {
            display: block;
            font-size: 1.2rem;
        }

            .tab-steps > div > span.number:after {
                content: "";
                display: block;
                width: 1.2rem;
                margin: 0.5rem auto;
                border-bottom: 2px solid rgba(255, 255, 255, 0.5);
            }

        .tab-steps > div > span.icon {
            display: block;
            margin-bottom: 1rem;
        }

            .tab-steps > div > span.icon:before {
                font-size: 2rem;
            }

.page-detail {
    font-size: 1rem;
}

.product {
    display: block;
    text-align: center;
}

    .product > img {
        display: block;
        margin: auto auto 1rem;
    }

    .product > span {
        display: block;
        font-weight: 600;
    }

.footer {
    width: auto;
    background-color: #2a2a2a;
    color: #fff;
    overflow: hidden;
}

.footer-info {
    width: auto;
    border-top: 1px solid #353535;
    overflow: hidden;
}

.footer-title {
    display: block;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 400;
}

.list-footer {
}

    .list-footer > li {
        margin-bottom: 0.5rem;
    }

        .list-footer > li > a {
            color: #fff;
        }

.e-newsletter {
    background-color: #353535;
}

.social-icons {
    font-size: 1.2rem;
    text-align: center;
}

    .social-icons > a {
        display: inline-block;
        margin: auto 0.3rem;
    }

        .social-icons > a > span {
            display: block;
            width: 3rem;
            height: 3rem;
            padding: 1rem;
            background-color: #2a2a2a;
            color: #fff;
            border-radius: 50%;
        }

@media (max-width:992px) {
    .top-logo > div {
        background-image: none;
    }

    .tab-steps > div:not(:last-child) {
        margin-bottom: 1rem !important;
    }

    .tab-steps > div:nth-child(2n+1) {
        margin-bottom: 0;
    }

    .tab-steps > div:nth-child(2n+2) {
        margin-top: 0;
    }
}