﻿@import url("https://use.fontawesome.com/releases/v5.2.0/css/all.css");

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

ul, ol, dl {
    list-style-type: none;
    padding-left: 0rem;
    margin-bottom: 0rem;
}

a {
    color: inherit !important;
    text-decoration: none;
}

/* SECTION HEADER-START */
.header {
    position: relative;
    box-shadow: 0 7px 6px rgb(0 0 0 / 20%);
    padding: 10px 0px;
    background-color: #fff;
    z-index: 1000;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.header--sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

    /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
    .header--sticky + .matrials {
        padding-top: 60px;
    }

.topnav {
    display: flex;
    justify-content: space-between;
}

.topnav-menu {
    display: flex;
    padding: 1rem 0rem;
}

.topnav-menu__link {
    margin: 0px 10px;
}

.topnav-menu .topnav-menu__link:first-child {
    margin-left: 0px;
}

.topnav-menu .topnav-menu__link:last-child {
    margin-right: 0px;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-menu {
    display: flex;
}

.navbar-menu__link {
    margin: 5px 10px;
    color: #868686;
    position: relative;
}

    .navbar-menu__link:after {
        content: "";
        display: block;
        height: 2px;
        background-color: #868686;
        width: 0%;
        transition: 0.3s;
        position: absolute;
        top: calc(100% + 10px);
    }

    .navbar-menu__link:hover:after {
        width: 100%;
    }

.navbar-menu .navbar-menu__link:first-child {
    margin-left: 0px;
}

.navbar-menu .navbar-menu__link:last-child {
    margin-right: 0px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo__img {
    width: 64px;
    border-radius: 6px;
    transition: 0.3s;
}

.logo__caption {
    display: block;
    margin-left: 25px;
    font-size: 25px;
    transition: 0.3s;
}

.header__actions {
    display: flex;
    align-items: center;
}

.contact {
    color: #868686;
}

.contact__img {
    width: 30px;
    display: none;
}

.contact span {
    display: inline;
}

.burger {
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.burger__item {
    height: 5px;
    width: 100%;
    border-radius: 5px;
    background-color: #868686;
}

.mobile-navigation {
    display: none;
    transition: 0.3s;
    position: fixed;
    transform: translateX(150%);
    top: 0px;
    left: 0px;
    background-color: white;
    width: 100vw;
    height: 100vh;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.mobile-navigation--open {
    transform: translateX(0%);
}

.mobile-navigation__close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.mobile-menu__link {
    margin-bottom: 1rem;
}

.header--sticky .logo__img {
    width: 32px;
    border-radius: 3px;
}

.header--sticky .logo__caption {
    margin-left: 15px;
    font-size: 18px;
}
/* SECTION HEADER-START */



/* SECTION MATERIALS START */
.matrials {
    padding: 2rem 0rem;
}

.matrials__list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.matrials__item {
    position: relative;
    display: block;
    color: #868686;
}

    .matrials__item:after {
        content: "";
        display: block;
        height: 2px;
        background-color: #868686;
        width: 0%;
        transition: 0.3s;
        position: absolute;
        top: calc(100% + 10px);
    }

    .matrials__item:hover:after {
        width: 100%;
    }

.matrials__link {
    color: #868686;
}

/* SECTION MATERIALS END */



/* SECTION SLIDER START */
.main-slider__content {
    display: flex;
    height: 500px;
}


.main-slider__item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-slider__img {
    width: 80%;
    height: 400px;
    object-fit: cover;
    object-position: center;
    border-radius: .5rem;
}


/* SECTION SLIDER END */
/* SECTION COMMODITIES START */
.commodities {
    padding: 2rem 0rem;
    text-align: center;
}

.commodities__title {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    padding: 1.5rem;
}

.commodities__description {
    margin-bottom: 2rem;
}

.commodities__subtitle {
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2rem;
}

.commodity-row {
    display: flex;
    flex-flow: wrap;
    margin-right: -1rem;
}

.commodity-col {
    width: 20%;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.commodity {
    box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
    border-radius: .2rem;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.commodity__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}
/* SECTION COMMODITIES END */



/* SECTION ADVANTAGES START */
.advantages {
    padding: 2rem 0rem;
    text-align: center;
}

.advantages__title {
    margin-bottom: 0.5rem;
}

.advantages__description {
    margin-bottom: 2rem;
}

.advantages-row {
    display: flex;
    flex-flow: wrap;
    margin-right: 0rem;
}

.advantages-col {
    width: 33.33%;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

.advantage {
    border: 2px solid #898989;
    padding: 1rem;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.advantage__title {
    margin-bottom: 0.5rem;
}
/* SECTION ADVANTAGES END */



/* SECTION TABLE START */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

td {
    padding: 1rem;
    text-align: right;
    border-bottom: 1px solid #ddd;
}
/* SECTION TABLE END */



/* SECTION PAGE NAME START */
.container_page_name {
    padding: 30px 35px 15px;
    background-color: #FFF;
    box-shadow: none;
}
/* SECTION PAGE NAME END */



/* SECTION MAP START*/
.map {
    margin: auto;
    height: 500px;
    padding-bottom: 20px;
}

    .map iframe {
        top: 0;
        width: 100%;
        height: 500px;
    }
/* SECTION MAP END*/



/* SECTION ABOUT US START*/
.aboutus {
    padding: 0rem 0rem;
    text-align: center;
}

.aboutus-row {
    display: flex;
    flex-flow: wrap;
    margin-right: -2rem;
}

.aboutus-col_photo {
    width: 25%;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.aboutme {
    box-shadow: 0 4px 6px rgb(0 0 0 / 20%);
    border-radius: .3rem;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.aboutus__img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    object-position: center;
}

.aboutus__content {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.aboutme-media {
    width: 100%;
    padding-left: 0;
    padding-top: 0rem;
}

.aboutme__img {
    width: 40px;
    border-radius: 6px;
}

.aboutus-col_description {
    width: 50%;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.aboutus-col_description_content {
    margin: 10px 0px 0px 30px;
}

.aboutus-col_description_content_block {
    margin-bottom: 0px;
}

.aboutus-col_description_content_block_row {
    display: flex;
    flex-flow: wrap;
    margin-right: -2rem;
}

.aboutus-col_description_content_block_head {
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 40px;
    text-transform: none;
    line-height: 1.3em;
    letter-spacing: 0px;
    max-width: 100%;
    text-align: left;
}

.aboutus-col_description_content_block_description {
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 0px 0px;
    font-size: 20px;
    text-transform: none;
    line-height: 1.3em;
    letter-spacing: 0px;
    max-width: 100%;
    text-align: left;
}

.aboutus-col_description_content_block_subcontainer_image {
    width: 25%;
    padding-right: 1rem;
    margin-bottom: 1rem;
}

.aboutus-col_description_content_block_subcontainer_image_prop {
    width: 40px;
    border-radius: 6px;
}

.aboutus-col_description_content_block_subcontainer_description {
    width: 75%;
    padding-right: 1rem;
    margin-bottom: 1rem;
    text-align: left;
}
/* SECTION ABOUT US END*/



/* SECTION CONTACTS START*/
.contacts-row {
    display: flex;
    flex-flow: wrap;
    margin-right: -2rem;
}

.contacts-col_first {
    width: 50%;
    padding-right: 2rem;
    padding-top: 1rem;
}

.contacts-col_second {
    width: 50%;
    padding-right: 2rem;
    padding-top: 1rem;
}

input[type=text], textarea {
    width: 100%;
    padding: 1rem;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
}

    input[type=text]:focus {
        background-color: #ddd;
        outline: none;
    }

textarea {
    height: 200px;
    width: 100%;
    padding: 1rem;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    font-size: 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btn_send {
    background-color: #04AA6D;
    color: white;
    padding: 1rem;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.8;
    font-size: 18px
}

    .btn_send:hover {
        opacity: 1;
    }
/* SECTION CONTACTS END*/



/* SECTION FOOTER START */
.footer {
    padding: 2rem 0rem;
}

.footer-row {
    display: flex;
    flex-flow: wrap;
    margin-right: -2rem;
}

.footer-col {
    width: 20%;
    padding-right: 2rem;
}

.footer-description {
    width: 32%;
    padding-right: 2rem;
    padding-top: 1rem;
}

.footer-menu {
    width: 14%;
    padding-right: 0rem;
    text-align: center;
}

.footer-info {
    width: 14%;
    padding-right: 0rem;
    text-align: center;
}

.footer-media {
    width: 18%;
    padding-left: 2rem;
    padding-top: 1rem;
}

.footer-contacts {
    width: 22%;
    text-align: right;
    padding-right: 2rem;
}

.footer__img {
    width: 40px;
    border-radius: 6px;
}
/* SECTION FOOTER END */



/* SECTION SHOP START */
.row__cart {
    display: flex;
    flex-flow: wrap;
    margin-left: -20px;
}

.col__cart {
    width: 25%;
    padding-left: 20px;
    margin-bottom: 20px;
}

.block__cart {
    padding: 1rem;
    border: 1px solid rgba(119,119,119,0.2);
}

.block__img__cart {
    width: 250px;
    height: 250px;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s
}

    .block__img__cart:hover {
        transform: scale3d(1.1, 1.1, 1);
    }

.block__titl__cart {
    text-align: center;
    padding-top: 1rem;
    font-weight: 400;
    font-size: 1.3rem;
}
/* SECTION SHOP START */


.remain__tbl {
    text-align: center;
}

    .remain__tbl th {
        text-align: center;
    }

    .remain__tbl td {
        padding: 1rem;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }


/* SECTION PRODUCT DITAILS START */
.row__product__ditails {
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    display: flex;
}

.col__product__ditails {
    max-width: 100%;
    flex: 0 0 100%;
    background-color: #FFF;
}

.product_summary_inner {
    padding: 30px 35px 15px;
    background-color: #FFF;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}

.single_breadcrumbs_wrapper {
    margin-bottom: 10px;
}

.single_breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.yoast-breadcrumb {
    flex: 1 1 auto;
    margin-bottom: 10px;
    font-size: 15px;
    color: #8E8E8E;
    transition: all .25s ease;
}

.products_nav {
    flex: 0 0 auto;
}

.products_btn {
    display: inline-flex;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-left: 1rem;
}

    .products_btn a {
        display: block;
        width: 100%;
        height: 20px;
        color: #333;
        vertical-align: middle;
        text-align: center;
        letter-spacing: 0;
        font-size: 0;
        line-height: 20px;
    }

        .products_btn a span {
            font-size: 15px;
            color: #8E8E8E;
        }

    .products_btn img {
        display: block;
        width: 15px;
        height: 15px;
        color: #333;
        vertical-align: middle;
        text-align: center;
        letter-spacing: 0;
        font-size: 0;
        line-height: 20px;
    }

.product_title {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.product_price {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 20px;
}

.product_variation_form {
    margin-bottom: 20px;
}

.variation {
    margin-bottom: 25px;
}

    .variation td {
        padding: 0;
        padding-bottom: 20px;
        border: none;
        vertical-align: middle;
        text-align: left;
    }

.lable_type {
    margin-bottom: 0;
    margin-right: 20px;
    color: #2d2a2a;
    white-space: nowrap;
    font-weight: 600;
}

.product_type {
    display: inline-block;
    padding-right: 30px;
    background-position: right 10px top 50%;
    background-size: auto 18px;
    background-repeat: no-repeat;
    padding: 0 15px;
    max-width: 100%;
    width: 100%;
    height: 42px;
    border: 2px solid rgba(129,129,129,.2);
    border-radius: 5px;
    background-color: transparent;
    box-shadow: none;
    vertical-align: middle;
    font-size: 14px;
    transition: border-color .5s ease;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.commerce_variation {
    display: inline-flex;
    vertical-align: top;
    white-space: nowrap;
    font-size: 15px;
    margin-bottom: 10px;
    margin-right: 10px;
    text-align: center;
}

    .commerce_variation input[type=button] {
        padding: 0 5px;
        min-width: 25px;
        height: 42px;
        border: 2px solid rgba(129,129,129,.2);
        background: 0 0;
        box-shadow: none;
    }

    .commerce_variation input[type=number] {
        width: 50px;
        height: 42px;
        border-right: none;
        border-left: none;
        border: 2px solid rgba(129,129,129,.2);
        display: inline-block;
        color: #777;
        touch-action: manipulation;
        text-align: center;
    }

    .commerce_variation button {
        margin-bottom: 10px;
        margin-left: 10px;
        background-color: #8e8e8e;
        padding: 12px 20px;
        font-size: 13px;
        line-height: 18px;
        border-width: 0;
        font-weight: 600;
    }

.product_mini_massage {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 20px;
    color: #777;
    text-rendering: optimizeLegibility;
}



.product_compare_btn {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

    .product_compare_btn a {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
    }

        .product_compare_btn a::before {
            margin-right: 5px;
            font-weight: 400;
            content: "\f030";
        }

        .product_compare_btn a::after {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -7px;
            opacity: 0;
            transition: opacity .2s ease;
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #BBB;
            border-left-color: #000;
            border-radius: 50%;
            vertical-align: middle;
        }

.product_wishlist_btn {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

    .product_wishlist_btn a {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
    }

        .product_wishlist_btn a::before {
            margin-right: 5px;
            font-weight: 400;
            content: '\f35a';
        }

        .product_wishlist_btn a::after {
            position: absolute;
            top: 50%;
            left: 0;
            margin-top: -7px;
            opacity: 0;
            transition: opacity .2s ease;
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #BBB;
            border-left-color: #000;
            border-radius: 50%;
            vertical-align: middle;
        }

.product_meta {
    padding-top: 20px;
    border-top: 1px solid;
    border-color: rgba(129,129,129,.2);
    display: block;
    line-height: 1.2;
    color: #333;
    font-weight: 600;
}

    .product_meta span {
        display: block;
        margin-bottom: 15px;
    }

        .product_meta span span {
            display: inline-block;
            margin: 0 1px;
            color: #777;
            font-weight: 400;
        }
/* SECTION PRODUCT DITAILS END */



/* SECTION PRODUCT TABL START */
.product-tabs-wrapper {
    padding-top: 40px;
}

.product-tabs-name {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.4;
    font-size: 20px;
    text-transform: uppercase;
    opacity: 3;
}

.product-tabs-body {
    display: block;
    margin: 0 auto;
    padding: 15px 35px 15px;
    background-color: #FFF;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}

    .product-tabs-body th {
        padding-right: 0;
        padding-left: 0;
        border: none;
        text-transform: none;
    }

    .product-tabs-body td {
        text-align: right;
        padding: 15px 12px;
        border: none;
    }
/* SECTION PRODUCT TABL END */



.splide__arrow{
    background: white;
}



/* MEDIA QUERIES */
@media screen and (max-width: 992px) {
    .mobile-navigation {
        display: flex;
    }

    .burger {
        display: flex;
    }

    .topnav {
        display: none;
    }

    .navbar-menu {
        display: none;
    }

    .contact {
        margin-right: 1rem;
    }

    .contact__img {
        display: block;
    }

    .contact span {
        display: none;
    }

    .matrials__link {
        font-size: 0.8rem;
    }

    .commodity-col {
        width: 25%;
    }

    .footer-description {
        display: none;
    }

    .footer-menu {
        display: none;
    }

    .footer-info {
        display: none;
    }

    .footer-media {
        display: none;
    }

    .footer-contacts {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-col:not(.footer--contacts) {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .commodity-col {
        width: 33.33%;
    }

    .advantages-col {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .logo__img {
        width: 32px;
    }

    .logo__caption {
        display: none;
    }

    .main-slider__img {
        width: 70%;
        height: 200px;
        object-fit: cover;
        object-position: center;
        border-radius: 1rem;
    }

    .commodity-col {
        width: 50%;
    }
}

@media screen and (max-width: 414px) {
    .commodity-col {
        width: 100%;
    }
}
