.banner {
    min-height: 60rem;
    position: relative;
    background-size: cover;
    background-position: center;
}

.banner::after {
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    background: rgba(0, 0, 0, .4);
}

.banner img {
    z-index: 2;
    width: auto;
    height: auto;
    max-width: 35rem;
    max-height: 25rem;
    position: relative;
}

.products ul li {
    display: flex;
    position: relative;
    animation: list-product-show .4s cubic-bezier(.51,-.02,0,.98) both;
}

.products ul li.w-33 {
    width: calc(33.333% - 15px);
}

.products ul li .product {
    width: 100%;
    transition: .3s ease-out;
}

.products ul li .product button {
    width: 100%;
}

.products ul li .product .add-to-cart {
    top: 50%;
    left: 50%;
    width: 24rem;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease-out;
    transform: translate(-50%, 50%);
}

.products ul li .product .form-button {
    width: 100%;
    transition: .3s cubic-bezier(.51,-.02,0,.98), transform .3s cubic-bezier(.51,-.02,0,.98), box-shadow .3s cubic-bezier(.51,-.02,0,.98);
}

.product, .images, 
.cover, .product, 
.images, .hover {
    width: 100%;
    height: 30rem;
    display: block;
    object-fit: contain;
    object-position: center;
}

.page-modal {
    overflow: auto;
    animation: .6s both page-modal cubic-bezier(.51,-.02,0,.98);
}

.page-modal .bg {
    animation: .6s both page-modal-bg cubic-bezier(.51,-.02,0,.98);
}

.page-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

.page-modal .window {
    overflow: hidden;
    width: 100%;
    max-width: 58rem;
    animation: .6s both page-modal-window cubic-bezier(.51,-.02,0,.98);
}

.page-modal.sz-large .window {
    overflow: hidden;
    max-width: 76rem;
    animation: .6s both page-modal-window cubic-bezier(.51,-.02,0,.98);
}

.page-modal .close {
    top: 2rem;
    right: 3.5rem;
    width: 2.5rem;
    height: 2.5rem;
    transition: .3s cubic-bezier(.51,-.02,0,.98);
}

.page-modal .details .owl-w {
    width: calc(50% - 1.5rem);
    border: 1px solid #b1b1b1;
}

.page-modal .details img {
    width: 100%;
    height: auto;
}

.form-button {
    width: 100%;
    transition: .3s cubic-bezier(.51,-.02,0,.98), transform .3s cubic-bezier(.51,-.02,0,.98), box-shadow .3s cubic-bezier(.51,-.02,0,.98);
}


.details .owl-carousel .owl-nav {
    z-index: 2;
    top: 50%;
    left: 15px;
    right: 15px;
    height: 0%;
    overflow: visible;
    position: absolute;
    transform: translateY(-50%);
}

.details .owl-carousel .owl-dots .owl-dot {
    opacity: .3;
    width: 1rem;
    height: 0.3rem;
    margin: 0rem 0.3rem;
    display: inline-block;
    transition: .2s ease;
    background: #cd2d31;
}

.details .owl-carousel .owl-dots .owl-dot.active {
    opacity: 1;
}

.details .owl-carousel .owl-nav .owl-prev,
.details .owl-carousel .owl-nav .owl-next {
    top: 50%;
    left: 0;
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: 0.6rem solid #cd2d31;
    border-left: 0.6rem solid #cd2d31;
    position: absolute;
    transform: translateY(-50%) rotate(-45deg) scale(.8);
}

.details .owl-carousel .owl-nav .owl-next {
    left: auto;
    right: 0;
    transform: translateY(-50%) rotate(135deg) scale(.8);
}

.owl-theme .owl-dots .owl-dot span {
    display: none;
}



.lp-group {
    display: flex;
    position: relative;
    background-size: cover;
    background-position: center;
}

.lp-group div {
    z-index: 1;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    position: absolute;
    background: rgba(0,0,0, 0.4);
}

.lp-group span {
    z-index: 2;
    position: relative;
}




.form-button.secondary {
    background: rgba(0,0,0,0.05);
}


.far ul {
    box-shadow: 0 0.2rem 1.6rem #00000029
}

.faq li div p,
.faq li strong {
    display: block;
    padding: 2rem 4rem;
}

.faq li strong {
    cursor: pointer;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-collapse: collapse;
    transition: 0.3s ease;
    position: relative;
}

.faq li strong:after {
    top: calc(50% - 0.5rem);
    right: 4rem;
    width: 1rem;
    height: 1rem;

    content: '';
    display: block;
    position: absolute;
    transform: translateY(-50%) rotate(-135deg);

    border-top: 2px solid #333;
    border-left: 2px solid #333;
}

.faq li:first-child strong {
    border-top: 0;
}

.faq li div {
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.8s linear;
}

.faq li.active div {
    max-height: 1000px;
}

.faq li.active strong:after {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

@media (any-hover: hover) {
    .faq li strong:hover {
        background: rgba(0,0,0, 0.02);
    }
}


/* Animations */
@keyframes page-modal-bg {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    
    100% {
        background: rgba(0, 0, 0, .2);
    }
}

@keyframes page-modal-window {
    0% {
        transform: translateY(100vh);
        box-shadow: 0 0.2rem 0.2rem #0000;
    }
    
    100% {
        transform: translateY(0);
        box-shadow: 0 0.2rem 0.2rem #0000001a;
    }
}

@keyframes list-product-show {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 1399px) {
    .product, .images, 
    .cover, .product, 
    .images, .hover {
        height: 23rem;
    }

    .products ul li .product {
        min-height: 38rem;
    }
}

@media (min-width: 1399px) {
    .products ul li .product {
        min-height: 45rem;
    }
}


@media (min-width: 992px) {
    .products ul li .product:hover {
        box-shadow: 0 0.2rem 1.6rem #00000029;
    }

    .products ul li .product:hover .add-to-cart {
        opacity: 1;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
}

@media (max-width: 991px) {
    .banner {
        min-height: 40rem;
    }

    .banner img {
        max-width: 25rem;
        max-height: 20rem;
    }

    .products ul li,
    .products ul li.w-33 {
        width: calc(33.333% - 15px);
    }

    .products ul li .product {
        padding-bottom: 4rem;
    }

    .images, 
    .cover, .product, 
    .images, .hover {
        height: 24rem;
    }

    .products ul li .product .add-to-cart {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        opacity: 1;
        transform: none;
    }

    .products ul li .product {
        min-height: 42rem;
    }

    .page-modal .window {
        width: 100%;
        padding-left: 2rem;
        padding-right: 2rem;
        border-radius: 0;
    }

    .faq .w-75,
    .contact .w-45 {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .products ul li,
    .products ul li.w-33 {
        width: calc(50% - 15px);
    }

    .details .flex .owl-w, 
    .details .flex .w-50 {
        width: 100%;
    }

    .details .flex .owl-w {
        order: -2;
        margin-bottom: 3rem;
    }
}

@media (max-width: 567px) {
    .products ul li,
    .products ul li.w-33 {
        width: 100%;
    }
}