body {
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Helvetica Neue, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --bs-link-color: #484848;
    --bs-link-hover-color: #000;
    --theme-bg-color: #f5f6fa;
    --carousel-control-size: calc(1.57rem + 1.9vw);
}

@media (min-width:1200px) {
    body {
        --carousel-control-size: 3rem;
    }
}

body a {
    text-decoration: none;
}

body .navbar {
    --bs-navbar-hover-color: var(--bs-link-color);
    --bs-navbar-toggler-focus-width: 0.08rem;
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-brand-padding-y: 0;
    background: #000;
}

body .navbar-brand, body .navbar-brand:hover {
    color:#fff;
}

.navbar-brand img {
    max-height: 2.5rem;
}

body .navbar-nav {
    --bs-nav-link-color: var(--bs-body-color);
}

body .nav-link {
    color: #fff;
}

body .nav-link:hover {
    color: #eee;
}

@media (min-width:768px) {
    body .navbar-expand-md .navbar-nav .nav-link {
        padding: 1.5rem 0;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    body .navbar-expand-md .navbar-nav .nav-link:hover {
        padding-bottom: 1.375rem;
        border-bottom: .125rem solid #eee;
    }
}

body .btn {
    --bs-btn-border-radius: 4px;
}

body .btn-primary {
    --bs-btn-bg: var(--bs-body-color);
    --bs-btn-border-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-link-color);
    --bs-btn-hover-border-color: var(--bs-link-color);
    --bs-btn-active-bg: var(--bs-link-color);
    --bs-btn-active-border-color: var(--bs-link-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-link-color);
    --bs-btn-disabled-border-color: var(--bs-link-color);
}

body .form-control:focus {
    border-color: #aaa;
    box-shadow: 0 0 3px #0003;
}

.icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.icon.invert {
    filter: invert(1) grayscale(100);
}

.icon-play-circle {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-play-circle' viewBox='0 0 16 16'%3e%3cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3e%3cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3e%3c/svg%3e");
}

.carousel {
    text-align: center;
}

.carousel .carousel-control-next,
.carousel .carousel-control-prev {
    width: var(--carousel-control-size);
    height: var(--carousel-control-size);
    top: 50%;
    background: #fff;
    margin: -2rem 15px 0;
    border-radius: 100%;
    opacity: .6;
}

.carousel .carousel-control-next:hover,
.carousel .carousel-control-prev:hover {
    opacity: 1;
}

.carousel .carousel-control-next-icon,
.carousel .carousel-control-prev-icon {
    width: 1rem;
    height: 1rem;
    filter: invert(1) grayscale(100);
}

.carousel-item .action {
    position: absolute;
    background: #fff;
    color: var(--bs-body-color);
    border-radius: .3333vw;
    font-size: 1.5vw;
    line-height: 4vw;
    padding: 0 2.5vw;
}

.carousel-item .action:hover {
    background: var(--bs-link-color);
    color: #fff;
}

@media (min-width:1200px) {
    .carousel-item .action {
        font-size: 1.125rem;
        border-radius: 4px;
        border-width: 2px;
        padding: 0 1.875rem;
        line-height: 3rem;
    }
}

#homeSlider .img {
    display: inline-block;
    width: 100%;
    height: 41.666666vw;
    max-width: 120rem;
    max-height: 50rem;
    background-size: 100%;
    background-repeat: no-repeat;
}

.module-title {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    margin: 3rem 0 1.5rem;
}

.products .card {
    --bs-card-border-width: 0;
    --bs-card-spacer-x: 5px;
    --bs-card-spacer-y: 5px;
    margin-bottom: 1rem;
    text-align: center;
    line-height: 1.4rem;
    color: var(--bs-body-color);
}

.products .card:hover {
    color: var(--bs-link-color);
}

.products .card img {
    width: 100%;
}

.products .card-title {
    display: inline-block;
    max-height: 2.8rem;
    overflow: hidden;
    margin-bottom: 0;
}

.products .price {
    font-weight: 700;
    font-size: 15px;
}

.products .short {
    color: #666;
    font-size: 13px;
}

.products .card:hover .short {
    color: var(--bs-link-color);
}

.feature {
    position: relative;
}

.feature>img {
    width: 100%;
}

.product-info {
    --carousel-img-size: calc(100vw - var(--scrollbar-width));
    --thumbs-gutter: var(--bs-gutter-x);
    --thumbs-item-size: calc((var(--carousel-img-size) - var(--thumbs-gutter) + var(--bs-gutter-x) / 3) / 5 - var(--bs-gutter-x) / 3);
    --thumbs-play-size: 6vw;
}

@media (min-width:768px) {
    .product-info {
        --carousel-img-size: calc(58.33333333vw - var(--bs-gutter-x) - var(--scrollbar-width));
        --thumbs-gutter: 0px;
        --thumbs-play-size: 2rem;
    }
}

@media (min-width:1200px) {
    .product-info {
        --carousel-img-size: 546px;
    }
}

@media (min-width:1400px) {
    .product-info {
        --carousel-img-size: 636px;
    }
}

@media (max-width:767px) {
    .product-info .carousel {
        margin-left: calc(-.5 * var(--bs-gutter-x));
        margin-right: calc(-.5 * var(--bs-gutter-x));
    }
}

.product-info .carousel img, .product-info .video-js {
    width: var(--carousel-img-size);
    height: var(--carousel-img-size);
}

.product-info .video-js .vjs-tech {
    max-width: var(--carousel-img-size);
    max-height: var(--carousel-img-size);
}

.product-info .video-js .vjs-big-play-button {
    height: 3em;
    line-height: 3em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    border-width: 2px;
}

.vjs-has-started.vjs-paused .vjs-big-play-button {
    display: block;
}

.product-info .thumbs {
    margin: 0 calc(-1/6 * var(--bs-gutter-x));
}

.product-info .thumbs a {
    width: var(--thumbs-item-size);
    height: var(--thumbs-item-size);
    margin: calc(var(--bs-gutter-x) / 3) calc(var(--bs-gutter-x) / 6) 0;
}

.product-info .thumbs img {
    width: var(--thumbs-item-size);
    height: var(--thumbs-item-size);
}

.product-info .thumbs .video {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-info .thumbs .video .icon {
    width: var(--thumbs-play-size);
    height: var(--thumbs-play-size);
}

.product-info h2 {
    font-weight: normal;
    margin-top: 1rem;
}

.product-info .price {
    font-size: 1.375rem;
}

.product-info .short {
    color: #666;
}

.product-info .detail {
    margin-top: 1rem;
}

.product-info .detail img,
.post-detail img {
    max-width: 100%;
    height: auto;
}

body .pagination {
    --bs-pagination-border-color: transparent;
    --bs-pagination-disabled-border-color: transparent;
    --bs-pagination-active-bg: transparent;
    --bs-pagination-active-border-color: var(--bs-link-hover-color);
    --bs-pagination-active-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: none;
}

footer {
    background: var(--theme-bg-color);
    margin-top: 5rem;
    padding: 1rem 3rem 3rem;
}

footer .title {
    font-size: 1.25rem;
    padding: 2rem 0 1rem;
    text-transform: uppercase;
}

footer ul {
    margin-bottom: 0;
}

footer a {
    color: var(--bs-link-hover-color);
}

footer a:hover {
    color: var(--bs-body-color);
}

footer .brand img {
    max-height: 2.5rem;
    vertical-align: text-top;
}

footer .social a {
    color: var(--bs-body-color);
    margin-right: 1rem;
}

footer .social a:hover {
    color: var(--bs-link-hover-color);
}

footer .social svg {
    width: 1.25rem;
    height: 1.25rem;
}