Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">


    <link rel="stylesheet" href="libs/slider/docs/assets/owlcarousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="libs/slider/docs/assets/owlcarousel/assets/owl.theme.default.min.css">
    <link rel="stylesheet" href="libs/noUiSlider/nouislider.min.css">
    <script src="libs/noUiSlider/nouislider.min.js"></script>
</head>
<body>
<header>
    <div class="top-bar-small">
        <div class="header-content">
            <div class="tab">
                <span class="change-city">Выберите город:</span>
                <span class="city">Краснодар</span>
            </div>
            <div class="left">
                <a href="">Главная</a>
                <a href="">О компании</a>
                <a href="">Доставка</a>
                <a href="">Оплата</a>
                <a href="">Блог</a>
                <a href="">Контакты</a>
                <a href=""><img src="img/search.svg" alt=""></a>
            </div>
            <div class="right">
                <span class="like"></span>
                <span class="search"></span>
                <span class="change-city">Выберите город:</span>
                <span class="city">Краснодар</span>
                <button>Где мой заказ?</button>
            </div>
        </div>
    </div>
    <div class="top-bar">
        <div class="header-content">
            <div class="item logo"><span>MASLOAFRICA<span class="dot">.</span><span class="com">com</span></span></div>
            <div class="item phone"><span class="number"><span class="zone">8 (800)</span>&#160;234-77-77<br><span class="text">Бесплатно по России</span></span></div>
            <div class="item login"><button class="login-btn">Войти</button><button class="register-btn">Регистрация</button></div>
            <div class="item like"></div>
            <div class="item cart"><span>В вашей корзине<br>1 товар</span></div>
        </div>
    </div>
    <div class="top-bar-menu">
        <div class="header-content">
            <div class="t-menu">
                <a href="#" id="burger"><span></span></a>
                <span class="tab">Категории</span>
                <span class="mobile">MASLOAFRICA</span>
            </div>
            <div class="left">
                <a href="">SALE</a>
                <a href="">Лицо</a>
                <a href="">Волосы</a>
                <a href="">Тело</a>
                <a href="">Ароматы</a>
                <a href="">Премиум</a>
                <a href="">Organic</a>
                <a href="">Бренды</a>
            </div>
            <div class="right">
                <a href="">Войти</a><a href="">Регистрация</a>
            </div>
            <div class="m-right">
                <a href="" class="search"></a>
                <a href="" class="like"></a>
                <a href="" class="cart"></a>
            </div>
        </div>
    </div>
    <div class="top-bar-hidden">
        <div class="login-register">
            <a href="">Войти</a><a href="">Регистрация</a>
        </div>
        <div class="menu">
            <a href="" class="mobile-menu-link">SALE<span></span></a>
            <a href="" class="mobile-menu-link">Лицо<span></span></a>
            <a href="" class="mobile-menu-link">Волосы<span></span></a>
            <a href="" class="mobile-menu-link">Тело<span></span></a>
            <a href="" class="mobile-menu-link">Ароматы<span></span></a>
            <a href="" class="mobile-menu-link">Премиум<span></span></a>
            <a href="" class="mobile-menu-link">Organic<span></span></a>
            <a href="" class="mobile-menu-link">Бренды<span></span></a>
        </div>
    </div>
</header>

<section class="content">
    <div class="navigation">
        <div class="breadcrumbs">
            <a href="">Главная</a> » Уход за лицом
        </div>
        <a href="" class="back">
            <img src="img/back-arr.svg" alt="">Назад
        </a>
    </div>
    <h1 class="heading">Уход за лицом</h1>

    <div class="wrapper">
        <div class="sidebar">
            <div class="filters">
                <button class="accordion">
                    Бренд
                </button>
                <div class="panel">
                    <p><input type="checkbox">Acca Kappa</p>
                    <p><input type="checkbox">Living Proof</p>
                    <p><input type="checkbox">Macadamia</p>
                    <p><input type="checkbox">Organic</p>
                    <p><input type="checkbox">Oribe</p>
                </div>
                <button class="accordion">
                    Классификация
                </button>
                <div class="panel">
                    <p><input type="checkbox">Лечебная</p>
                    <p><input type="checkbox">Масс маркет</p>
                    <p><input type="checkbox">Нишевая</p>
                    <p><input type="checkbox">Органическая</p>
                </div>
                <button class="accordion">
                    Цена
                </button>
                <div class="panel">
                    <div class="numbers">
                        <select name="" id="input-select"></select>
                        <input type="number" min="-20" max="40" step="1" id="input-number">
                    </div>
                    <div id="html5"></div>
                    <script>
                        var select = document.getElementById('input-select');

                        // Append the option elements
                        for (var i = -20; i <= 40; i++) {

                            var option = document.createElement("option");
                            option.text = i;
                            option.value = i;

                            select.appendChild(option);
                        }
                    </script>
                    <script>
                        var html5Slider = document.getElementById('html5');

                        noUiSlider.create(html5Slider, {
                            start: [10, 30],
                            connect: true,
                            range: {
                                'min': -20,
                                'max': 40
                            }
                        });
                    </script>
                    <script>
                        var inputNumber = document.getElementById('input-number');

                        html5Slider.noUiSlider.on('update', function(values, handle) {

                            var value = values[handle];

                            if (handle) {
                                inputNumber.value = value;
                            } else {
                                select.value = Math.round(value);
                            }
                        });

                        select.addEventListener('change', function() {
                            html5Slider.noUiSlider.set([this.value, null]);
                        });

                        inputNumber.addEventListener('change', function() {
                            html5Slider.noUiSlider.set([null, this.value]);
                        });
                    </script>
                </div>
            </div>
            <button class="accordion">
                Производитель
            </button>
            <div class="panel">
                <p><input type="checkbox">Марокко</p>
                <p><input type="checkbox">Кения</p>
                <p><input type="checkbox">Судан</p>
                <p><input type="checkbox">Тунис</p>
            </div>
            <button class="ok">Применить</button>
            <a href="">Сбросить все фильтры</a>
        </div>
        <div class="catalog-list">
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img1.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img2.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img3.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img1.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img2.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img3.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img1.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img2.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="item">
                <div class="hot">HOT</div>
                <div class="img">
                    <img src="img/catalog-img3.jpg" alt="">
                </div>
                <h3>INSTANT BLUR</h3>
                <span>Макияж</span>
                <img src="img/4stars.jpg" class="stars" alt="">
                <p>Содержимое осталось неизменным, но флаконы серии сменили привычные печатные надписи</p>
                <span class="price">4900 <sup>руб.</sup></span>
            </div>
            <div class="catalog-info">
                <p>Показано 18 товаров из 58</p>
                <button>Показать еще</button>
                <div class="w3-bar">
                    <a href="#" class="w3-button"><img src="img/pag-prev.svg" alt=""></a>
                    <a href="#" class="w3-button active">1</a>
                    <a href="#" class="w3-button">2</a>
                    <a href="#" class="w3-button">3</a>
                    <a href="#" class="w3-button">4</a>
                    <a href="#" class="w3-button"><img src="img/pag-next.svg" alt=""></a>
                </div>
            </div>
        </div>

    </div>

</section>

<footer>
    <div class="bottom-bar-menu">
        <div class="footer-content">
            <div class="left">
                <a href="">SALE</a>
                <a href="">Лицо</a>
                <a href="">Волосы</a>
                <a href="">Тело</a>
                <a href="">Ароматы</a>
                <a href="">Премиум</a>
                <a href="">Organic</a>
                <a href="">Бренды</a>
            </div>

        </div>
    </div>
    <div class="bottom-bar">
        <div class="footer-content">
            <div class="contacts">
                <div class="info"><span class="zone">8 (800)</span>&#160;<span class="number">234-77-77</span><br>контакт центр</div>
                <div class="info"><span class="addres">г. Москва, ул. Ленина, 31а, офис 140</span><br>Ежедневно с 8.00 до 21.00</div>
                <div class="social">
                    <img src="img/fb.svg" alt="">
                    <img src="img/vk.svg" alt="">
                    <img src="img/inst.svg" alt="">
                </div>
            </div>
            <div class="categories">
                <div class="title">Masloafrica.com</div>
                <div class="links">
                    <a href="">О компании</a>
                    <a href="">Лидеры мнений</a>
                    <a href="">Контакты</a>
                </div>
            </div>
            <div class="categories">
                <div class="title">Покупателям</div>
                <div class="links">
                    <a href="">Оплата</a>
                    <a href="">Доставка</a>
                    <a href="">Возврат и обмен</a>
                    <a href="">Договор оферты</a>
                    <a href="">Блог</a>
                </div>
            </div>
            <div class="news">
                <div class="title">
                    <span>Наши новости</span>
                    <input type="text">
                </div>
                <div class="desc">
                    Нами приняты все меры к тому, что бы обеспечить точность и актуальность информации на этом сайте. Однако ее точность и полнота не могут быть гарантированы.
                </div>
            </div>
        </div>
        <div class="footer-content t-social">
            <div class="social">
                <img src="img/fb.svg" alt="">
                <img src="img/vk.svg" alt="">
                <img src="img/inst.svg" alt="">
            </div>
            <div class="title">
                <span>Наши новости</span>
                <input type="text">
            </div>
        </div>
        <div class="footer-content m-social">
            <div class="title">
                <span>Подпишитесь на Наши новости</span>
                <input type="text" placeholder="Ваш email">
            </div>
            <div class="social">
                <img src="img/fb.svg" alt="">
                <img src="img/vk.svg" alt="">
                <img src="img/inst.svg" alt="">
            </div>
        </div>
    </div>
    <div class="bottom-bar-copyright">
        <div class="footer-content">
            © MASLOAFRICA.COM, 2018
            <span><a href="">Политика конфиденциальности</a><a href="">Правила продаж</a></span>
        </div>
    </div>
</footer>
<script src="js/menu.js"></script>
<script src="js/accordion.js"></script>

</body>
</html>А
              
            
!

CSS

              
                @charset "UTF-8";
.wrapper, button.show, .sb, .fe, .w3-bar, .w3-button, .navigation, .navigation .back, .top-bar .header-content, .top-bar .item, .top-bar .login .login-btn, .top-bar .login .register-btn, .top-bar .login-form .incorrect + .after-incorrect, .top-bar-small .left, .top-bar-small .right, .top-bar-small .right button, .top-bar-menu .left, .top-bar-hidden .login-register, .top-bar-hidden .menu a, .header-content, .bottom-bar-menu .left, .footer-content, .panel .item, .panel .item .img, .panel .item .price, .panel .item .count, .panel .item .title, .panel .numbers, .panel .numbers select, .panel .numbers input, .posts, .posts .post:hover .info, .catalog, .catalog .item-x, .catalog .item-s, .catalog .item-m, .orders .item, .order, .order .item.form, .blogs .item, .blogs .item .content, .similar-posts, .about-desc, .about-desc .img, .brands, .brands .item, .account input, .account.btns, .cart-items .item, .cart-items .item .img, .cart-items .item .price, .cart-items .item .count, .cart-items .item .close, .cart-items .item .count input, .cart-items .item .count .minus, .cart-items .item .count .plus, .cart-items .item .title, .cart-options, .cart-options .disc-total, .cart-options .promo, .cart-options .order, .cart-options .promo input, .cart-options .promo button, .cart-options .order button, #similar-products .item .sale, #similar-products .item .img, .catalog-list, .catalog-list .item .hot, .catalog-list .item .img, .catalog-info, .contact-items, .contact-items .item, .contact-items .item img, .contact-items button, .contact-form, .contact-form .name-and-phone, .send {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

html, body {
    overflow-x: hidden;
}

h1 {
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #212121;
}
h1.heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #c1878c;
    margin: 6px 0 29px;
}

h2 {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
    margin-bottom: 35px;
}

p {
    color: #212121;
    font-size: 14px;
    line-height: 25px;
}

a {
    text-decoration: none;
}

span.heading {
    display: block;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #212121;
}
span.heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #c1878c;
    margin: 6px 0 29px;
}

section.content {
    width: 92%;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
    padding: 25px 0;
}

section.content.menu-active {
    display: none;
}

@media (max-width: 1279px) {
    section.content {
        max-width: 720px;
    }
}

@media (max-width: 767px) {
    .m-none {
        display: none;
    }
}

.wrapper {
    justify-content: center;
}

.line {
    width: 100%;
    height: 1px;
    background: #ececec;
    opacity: 0.75;
    margin: 28px 0;
}

button {
    border: none;
}
button.comment {
    width: 230px;
    height: 41px;
    border-radius: 5px;
    background-color: #c1878c;
    color: #fff;
}
button.show {
    justify-content: center;
    align-items: center;
    width: 270px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c1878c;
    background: #fff;
    margin: 0 auto;
    font-size: 13px;
    color: #c1878c;
    letter-spacing: 0.65px;
}

.sb {
    justify-content: space-between;
}

.fe {
    justify-content: flex-end;
}

span.date {
    display: block;
    font-size: 14px;
    color: #212121;
    opacity: 0.5;
    font-weight: 400;
}

.w3-button {
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    padding: 0;
    font-size: 13px;
    margin-right: 10px;
}

.w3-button.active {
    border: 1px solid #c1878c;
    background: #c1878c;
    color: white;
}

.navigation {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
}
.navigation .breadcrumbs {
    font-size: 14px;
    color: #212121;
}
.navigation .breadcrumbs a {
    color: #c1878c;
    text-decoration: underline;
}
.navigation .back {
    align-items: center;
    position: relative;
    font-size: 14px;
    line-height: 18px;
    text-decoration: underline;
    color: #c1878c;
    opacity: 0.7;
}
.navigation .back img {
    margin-right: 10px;
}

@media (max-width: 760px) {
    .navigation .breadcrumbs {
        display: none;
    }
}

.overlays {
    position: relative;
    width: 100%;
    height: auto;
}
.overlays .overlay-login {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.8;
}

.top-bar {
    height: 120px;
    background: #fff;
    box-shadow: 0 1px 0 #f1f1f1;
}
.top-bar .header-content {
    align-items: center;
}
.top-bar .item {
    align-items: center;
    height: 60px;
}
.top-bar .logo {
    color: #212121;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1.56px;
    text-transform: uppercase;
}
.top-bar .logo span.dot {
    font-weight: 300;
}
.top-bar .logo span.com {
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 1.17px;
}
.top-bar .phone {
    position: relative;
    padding: 14px 40px 14px 67px;
    border-left: 1px solid #ebedee;
}
.top-bar .phone span.number {
    font-size: 18px;
    font-weight: 700;
    color: #212121;
    letter-spacing: 0.9px;
    text-align: right;
}
.top-bar .phone span.zone {
    font-weight: 300;
}
.top-bar .phone span.text {
    font-size: 13px;
    letter-spacing: 0.65px;
    font-weight: 400;
}
.top-bar .phone::before {
    position: absolute;
    top: 8px;
    left: 36px;
    content: '';
    width: 19px;
    height: 30px;
    background: url(../img/phone.svg);
}
.top-bar .login {
    position: relative;
    padding: 0 40px;
    border-right: 1px solid #ebedee;
    border-left: 1px solid #ebedee;
}
.top-bar .login .login-btn, .top-bar .login .register-btn {
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c1878c;
    font-size: 13px;
    letter-spacing: 0.65px;
    color: #c1878c;
    background: white;
}
.top-bar .login .register-btn {
    color: white;
    background: #c1878c;
    margin-left: 10px;
}
.top-bar .login-form {
    z-index: 2;
    position: absolute;
    top: 90px;
    left: 0;
    width: 370px;
    height: auto;
    padding: 0 20px 20px;
    border-radius: 0 0 10px 10px;
    background-color: #ffffff;
}
.top-bar .login-form .line {
    margin: 20px 0;
}
.top-bar .login-form input {
    display: block;
    width: 100%;
    height: 41px;
    border-radius: 5px;
    background-color: #fafafa;
    border: 1px solid #ececec;
    margin-bottom: 15px;
    padding-left: 20px;
}
.top-bar .login-form .incorrect {
    border: 1px solid #e57373;
    color: #c1878c;
}
.top-bar .login-form .after-incorrect {
    display: none;
}
.top-bar .login-form .incorrect + .after-incorrect {
    position: relative;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 5px;
    background-color: #f7cccc;
    color: #936266;
    height: 41px;
    width: 100%;
}
.top-bar .login-form .incorrect + .after-incorrect:before {
    position: absolute;
    top: -10px;
    content: '';
    width: 15px;
    height: 10px;
    background: url(../img/romb.jpg);
}
.top-bar .login-form button {
    width: 100%;
    height: 45px;
    border-radius: 5px;
    background-color: #c1878c;
    border: 1px solid #c1878c;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 15px;
}
.top-bar .login-form a {
    text-decoration: underline;
    color: #c1878c;
    opacity: 0.7;
}
.top-bar .cart {
    padding-left: 30px;
}
.top-bar .cart span {
    position: relative;
    padding: 2px 0 0 50px;
    font-size: 13px;
}
.top-bar .cart span::before {
    position: absolute;
    top: 2px;
    left: 0;
    content: '';
    width: 35px;
    height: 30px;
    background: url(../img/cart.svg);
}
.top-bar .like {
    width: 33px;
    height: 30px;
    padding: 30px 36.5px;
    background: url(../img/hearth.svg);
    background-repeat: no-repeat;
    background-position: center center;
    border-right: 1px solid #ebedee;
}
.top-bar-small {
    height: 40px;
    background: #ecf0f1;
}
.top-bar-small .tab {
    display: none;
    height: 100%;
    align-items: center;
}
.top-bar-small .left {
    height: 100%;
    align-items: center;
}
.top-bar-small .left a {
    color: #212121;
    padding: 5px 20px 6px 0;
    margin-right: 20px;
    border-right: 1px solid #d7dbdd;
    font-size: 13px;
}
.top-bar-small .right {
    height: 100%;
    align-items: center;
}
.top-bar-small .right button {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 200px;
    color: #fff;
    background: #c1878c;
    font-size: 13px;
}
.top-bar-small .right .like {
    display: none;
    width: 22px;
    height: 19px;
    background: url(../img/hearth-sm.svg);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px 30px;
    border-right: 1px solid #d9dddf;
    border-left: 1px solid #d9dddf;
}
.top-bar-small .right .search {
    display: none;
    width: 16px;
    height: 16px;
    background: url(../img/search.svg);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px 30px;
    border-right: 1px solid #d9dddf;
    margin-right: 20px;
}
.top-bar-menu {
    height: 50px;
    background: #343434;
}
.top-bar-menu .t-menu {
    display: none;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
}
.top-bar-menu .left {
    height: 100%;
    align-items: center;
}
.top-bar-menu .left a {
    color: #fff;
    padding: 5px 30px 4px 0;
    margin-right: 30px;
    border-right: 1px solid #787b7d;
    font-size: 13px;
}
.top-bar-menu .right {
    display: none;
}
.top-bar-menu .right a {
    color: #fff;
    font-size: 13px;
    padding: 2px 0 4px 20px;
}
.top-bar-menu .right a:first-child {
    padding: 2px 19px 4px 0;
    border-right: 1px solid #5d5f60;
}
.top-bar-menu .mobile {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.91px;
    text-transform: uppercase;
}
.top-bar-menu .m-right {
    display: none;
    align-items: center;
}
.top-bar-menu .m-right a {
    display: block;
}
.top-bar-menu .m-right a.search {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    background: url(../img/search-m.svg);
}
.top-bar-menu .m-right a.like {
    width: 22px;
    height: 20px;
    padding: 0 25px;
    background: url(../img/like-m.svg);
    background-repeat: no-repeat;
    background-position: center center;
    border-right: 1px solid #424343;
    border-left: 1px solid #424343;
}
.top-bar-menu .m-right a.cart {
    width: 28px;
    height: 24px;
    margin-left: 15px;
    background: url(../img/cart-m.svg);
}
.top-bar-hidden {
    display: none;
    min-height: 50px;
    width: 100%;
    background-color: #343434;
}
.top-bar-hidden .login-register {
    align-items: center;
    width: 100%;
    padding: 0 4%;
    background: #212121;
    height: 50px;
}
.top-bar-hidden .login-register a {
    color: #fff;
    font-size: 13px;
    padding: 2px 0 4px 20px;
}
.top-bar-hidden .login-register a:first-child {
    padding: 2px 19px 4px 0;
    border-right: 1px solid #5d5f60;
}
.top-bar-hidden .menu a {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 4%;
    height: 51px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.33px;
    color: #fff;
    background-color: #343434;
    border-bottom: 1px solid #212121;
}
.top-bar-hidden .menu a span {
    width: 11px;
    height: 18px;
    background: url(../img/menu-arr.svg);
}
.top-bar-hidden .menu a:hover {
    background-color: #c1878c;
}
.top-bar-hidden .menu a:hover span {
    background: url(../img/menu-arr-active.svg);
}

.header-content {
    justify-content: space-between;
    width: 92%;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
}

.change-city {
    color: #212121;
    opacity: 0.5;
    margin-right: 15px;
}

.city {
    position: relative;
    color: #c1878c;
    text-decoration: underline;
    font-size: 14px;
    margin-right: 40px;
    padding-left: 25px;
}
.city:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 21px;
    width: 15px;
    background: url(../img/map-dot.svg);
    content: '';
}

a#burger {
    display: none;
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 15px;
}

a#burger span {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 2px;
    background: #fff;
}

a#burger span:after, a#burger span:before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: .5s;
}

a#burger span:before {
    transform: translateY(-9px);
}

a#burger span:after {
    transform: translateY(9px);
}

a#burger.active span {
    width: 0;
    margin-left: -10px;
}

a#burger.active span:before {
    transform: rotate(45deg);
    margin-left: -15px;
}

a#burger.active span:after {
    transform: rotate(-45deg);
    margin-left: -15px;
}

@media (max-width: 1279px) {
    a#burger {
        display: block;
    }
    .top-bar .login, .top-bar .like {
        display: none;
    }
    .top-bar-small .tab {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
    .top-bar-small .left {
        display: none;
    }
    .top-bar-small .right .change-city, .top-bar-small .right .city {
        display: none;
    }
    .top-bar-small .right .like, .top-bar-small .right .search {
        display: block;
    }
    .top-bar-menu .t-menu {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .top-bar-menu .left {
        display: none;
    }
    .top-bar-menu .right {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .top-bar-menu .mobile {
        display: none;
    }
    .top-bar-hidden.active {
        display: block;
    }
    .header-content {
        max-width: 720px;
    }
}

@media (max-width: 760px) {
    .top-bar {
        display: none;
    }
    .top-bar-small {
        display: none;
    }
    .top-bar-menu .tab {
        display: none;
    }
    .top-bar-menu .mobile {
        display: block;
    }
    .top-bar-menu .right {
        display: none;
    }
    .top-bar-menu .m-right {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }
}

.bottom-bar {
    background: #202020;
}
.bottom-bar .footer-content {
    padding: 17px 0 15px;
}
.bottom-bar .contacts {
    padding-top: 8px;
    color: #e0e0e0;
}
.bottom-bar .contacts .info {
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 20px;
    color: #424242;
}
.bottom-bar .contacts .info span.number {
    font-size: 18px;
    font-weight: 700;
    color: #e0e0e0;
}
.bottom-bar .contacts .info span.zone {
    font-size: 18px;
    font-weight: 400;
    color: #e0e0e0;
}
.bottom-bar .contacts .info span.addres {
    color: #e0e0e0;
    margin-bottom: 14px;
}
.bottom-bar .contacts .social img {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
}
.bottom-bar .categories {
    padding-top: 7 px;
}
.bottom-bar .categories .title {
    font-size: 18px;
    color: #c1878c;
    font-weight: 700;
    text-transform: uppercase;
}
.bottom-bar .categories .links {
    margin-top: 25px;
}
.bottom-bar .categories .links a {
    display: block;
    margin-bottom: 20px;
    color: #bdbdbd;
    font-size: 13px;
    text-transform: uppercase;
}
.bottom-bar .news .title span {
    font-size: 18px;
    color: #c1878c;
    font-weight: 700;
    text-transform: uppercase;
}
.bottom-bar .news .title input {
    width: 170px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #353535;
    background-color: #202020;
    margin-left: 22px;
    color: #636363;
    padding: 15px 35px 15px 15px;
}
.bottom-bar .news .desc {
    max-width: 335px;
    margin-top: 30px;
    opacity: 0.3;
    color: #636363;
    font-size: 12px;
    line-height: 20px;
    text-transform: uppercase;
}
.bottom-bar-menu {
    height: 50px;
    background: #212121;
}
.bottom-bar-menu .left {
    height: 100%;
    align-items: center;
}
.bottom-bar-menu .left a {
    color: #fff;
    padding: 5px 30px 4px 0;
    margin-right: 30px;
    border-right: 1px solid #787b7d;
    font-size: 13px;
}
.bottom-bar-copyright {
    height: 50px;
    background: #212121;
    color: #424242;
    font-size: 13px;
}
.bottom-bar-copyright .footer-content {
    align-items: center;
}
.bottom-bar-copyright a {
    color: #424242;
    padding-left: 40px;
}
.bottom-bar .t-social {
    display: none;
    height: 0;
    padding: 0;
    margin: 0;
}
.bottom-bar .t-social .title .social img {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
}
.bottom-bar .t-social .title span {
    font-size: 18px;
    color: #c1878c;
    font-weight: 700;
    text-transform: uppercase;
}
.bottom-bar .t-social .title input {
    width: 170px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #353535;
    background-color: #202020;
    margin-left: 22px;
    color: #636363;
    padding: 15px 35px 15px 15px;
}
.bottom-bar .m-social {
    display: none;
    height: 0;
    padding: 0;
    margin: 0;
}
.bottom-bar .m-social .title .social img {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 10px;
}
.bottom-bar .m-social .title span {
    font-size: 18px;
    color: #c1878c;
    font-weight: 700;
    text-transform: uppercase;
}
.bottom-bar .m-social .title input {
    display: block;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #353535;
    background-color: #202020;
    margin: 12px 0 30px;
    color: #636363;
    padding: 15px 35px 15px 15px;
}

.footer-content {
    justify-content: space-between;
    width: 92%;
    max-width: 1170px;
    height: 100%;
    margin: 0 auto;
}

@media (max-width: 1279px) {
    .bottom-bar-menu {
        display: none;
    }
    .bottom-bar .news, .bottom-bar .contacts .social {
        display: none;
    }
    .bottom-bar .t-social {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        height: 40px;
        padding: 0 0 23px;
        margin: 0 auto;
    }
    .footer-content {
        max-width: 720px;
    }
}

@media (max-width: 760px) {
    .bottom-bar .categories {
        display: none;
    }
    .bottom-bar .t-social {
        display: none;
    }
    .bottom-bar .m-social {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0 0 23px;
        margin: 0 auto;
    }
    .bottom-bar-copyright span {
        display: none;
    }
}

.accordion {
    color: #212121;
    background: white;
    cursor: pointer;
    height: 45px;
    width: 100%;
    border: 1px solid #eeeeee;
    outline: none;
    text-align: left;
    padding: 0 20px;
    font-size: 13px;
    transition: 0.4s;
}
.accordion .num {
    color: #c1878c;
    margin-right: 54px;
    text-decoration: underline;
}
.accordion .when {
    margin-right: 54px;
}
.accordion .price {
    margin-right: 54px;
}
.accordion .price span {
    font-weight: 700;
}
.accordion .delivery {
    margin-right: 54px;
}
.accordion .status span {
    color: #c0ca33;
}
.accordion .status.cancel span {
    color: #9e9e9e;
}
.accordion .status.going span {
    color: #c1878c;
}
.accordion .tracking {
    text-decoration: underline;
    color: #c1878c;
    margin-left: 54px;
}

.active, .accordion:hover {
    background-color: #fff;
}

.accordion:after {
    width: 18px;
    height: 11px;
    content: '';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    background: url(../img/bottom.jpg);
}

.accordion.active:after {
    background: url(../img/top.jpg);
}

.panel {
    padding: 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 15px;
}
.panel .item {
    border: 1px solid #eeeeee;
    border-top: none;
    width: 100%;
    height: 101px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(241, 241, 241, 0.5);
}
.panel .item .sb {
    flex-grow: 1;
}
.panel .item .img, .panel .item .price, .panel .item .count {
    justify-content: center;
    align-items: center;
    width: 155px;
}
.panel .item .img {
    border-right: 1px solid #eee;
}
.panel .item .price, .panel .item .count {
    border-left: 1px solid #eee;
}
.panel .item .title {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    padding-left: 30px;
    font-size: 13px;
    color: #212121;
}
.panel .item .title span {
    color: #212121;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}
.panel .numbers {
    width: 100%;
    justify-content: space-between;
    margin-top: 20px;
}
.panel .numbers select, .panel .numbers input {
    width: 100px;
    height: 41px;
    justify-content: center;
    align-items: center;
    padding-left: 35px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

@media (max-width: 1279px) {
    .accordion {
        height: auto;
        padding: 20px;
    }
    .accordion .num {
        margin-right: 36px;
    }
    .accordion .when {
        margin: 0;
    }
    .accordion .status, .accordion .delivery, .accordion .price, .accordion .tracking {
        display: block;
        margin: 0;
    }
    .accordion .price {
        margin-top: 20px;
    }
    .accordion .status, .accordion .delivery, .accordion .tracking {
        margin-top: 10px;
    }
    .panel .item {
        height: auto;
    }
    .panel .item .sb {
        display: block;
        padding: 7px 0 2px 15px;
    }
    .panel .item .title, .panel .item .price, .panel .item .count {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        margin-bottom: 15px;
        border: none;
    }
    .panel .item .title {
        color: #afafaf;
    }
    .panel .item .title span {
        display: block;
        margin-bottom: 15px;
    }
}

.sidebar .accordion {
    height: 56px;
    width: 100%;
    padding: 0;
    border: none;
    border-bottom: 1px solid #eeeeee;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #262626;
}

.sidebar .panel {
    margin-bottom: 0;
    width: 100%;
    padding: 0;
}
.sidebar .panel p {
    margin-top: 20px;
}
.sidebar .panel p input {
    margin-right: 10px;
}

.article h1.heading::after {
    margin: 6px 0 20px;
}

.article .date {
    margin-bottom: 20px;
}

.article p + h1 {
    margin-top: 45px;
}

.article .similar-posts + h1 {
    margin-top: 40px;
}

.article .line {
    margin: 20px 0;
}

.article .comment {
    margin-top: 17px;
}

.article .float {
    float: right;
}

.big-img-post {
    width: 100%;
    height: auto;
}

.posts {
    justify-content: space-between;
    flex-wrap: wrap;
}
.posts .post {
    position: relative;
    width: 270px;
    height: 270px;
    background: gray;
    margin-bottom: 30px;
}
.posts .post:before {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    width: 100%;
    content: '';
}
.posts .post:hover:before {
    background: #212121;
    opacity: 0.8;
}
.posts .post .info {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    width: 100%;
    color: #f5f5f5;
}
.posts .post .info .likes {
    margin-right: 10px;
}
.posts .post .info .comments {
    margin: 0 10px 0 30px;
}
.posts .post a {
    display: none;
    position: absolute;
    width: 100%;
    bottom: 30px;
    text-align: center;
    color: #f5f5f5;
    font-size: 13px;
    text-decoration: underline;
    line-height: 22px;
    opacity: 0.5;
}
.posts .post:hover a {
    display: block;
}

@media (max-width: 1279px) {
    .posts .post {
        width: 230px;
        height: 230px;
    }
}

@media (max-width: 760px) {
    .posts {
        justify-content: space-around;
    }
}

@media (max-width: 590px) {
    .posts {
        justify-content: center;
    }
    .posts .post {
        width: 320px;
        height: 320px;
        background-size: 100% !important;
    }
}

@media (max-width: 340px) {
    .posts .post {
        width: 294px;
        height: 294px;
    }
}

.catalog {
    justify-content: space-between;
    flex-wrap: wrap;
}
.catalog .item-x, .catalog .item-s, .catalog .item-m {
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
    margin-bottom: 30px;
    padding: 50px 0 50px 20px;
    font-size: 20px;
    font-weight: 700;
    color: white;
}
.catalog .item-x a, .catalog .item-s a, .catalog .item-m a {
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
    color: white;
}
.catalog .item-x {
    width: 570px;
}
.catalog .item-s {
    width: 270px;
}
.catalog .item-m {
    width: 570px;
}
.catalog .sale {
    background: url(../img/sale.jpg);
}
.catalog .face {
    background: url(../img/face.jpg);
}
.catalog .hair {
    background: url(../img/hair.jpg);
}
.catalog .body {
    background: url(../img/body.jpg);
}
.catalog .aromas {
    background: url(../img/aromas.jpg);
}
.catalog .premium {
    background: url(../img/premium.jpg);
}
.catalog .brands {
    background: url(../img/brands.jpg);
}
.catalog .organic {
    background: url(../img/organic.jpg);
}

@media (max-width: 1279px) {
    .catalog .item-x, .catalog .item-s {
        width: 230px;
        margin-bottom: 15px;
    }
    .catalog .item-m {
        width: 352px;
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .catalog {
        justify-content: space-around;
    }
    .catalog .item-x, .catalog .item-s, .catalog .item-m {
        width: 270px;
        margin-bottom: 10px;
    }
}

@media (max-width: 620px) {
    .catalog .item-x, .catalog .item-s, .catalog .item-m {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        align-items: center;
        padding: 0;
        font-size: 24px;
        font-weight: 700;
    }
    .catalog .item-x a, .catalog .item-s a, .catalog .item-m a {
        display: none;
    }
    .catalog .face {
        background: url(../img/face-m.jpg);
    }
    .catalog .hair {
        background: url(../img/hair-m.jpg);
    }
    .catalog .body {
        background: url(../img/body-m.jpg);
    }
    .catalog .aromas {
        background: url(../img/aromas-m.jpg);
    }
}

.orders .item {
    justify-content: flex-start;
    align-items: center;
    color: #262626;
    font-size: 14px;
    height: 72px;
    width: 100%;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 10px rgba(241, 241, 241, 0.5);
    padding: 0 22px;
    margin-top: 30px;
}
.orders .item span.result {
    font-weight: 700;
    font-size: 15px;
    margin-right: 50px;
}

@media (max-width: 1279px) {
    .orders .item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100px;
    }
    .orders .item span + span {
        margin-top: 20px;
    }
}

.order {
    justify-content: space-between;
    align-items: center;
}
.order .item {
    width: 49%;
}
.order .item h2 {
    margin-bottom: 7px;
}
.order .item.form {
    justify-content: space-between;
}
.order .item.form input {
    width: 48%;
    height: 41px;
    border-radius: 5px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    color: #212121;
    padding: 0 20px;
}
.order .item.form button {
    width: 48%;
    height: 41px;
    background-color: #c1878c;
    border-radius: 5px;
    font-size: 13px;
    color: #fefefe;
}

@media (max-width: 1279px) {
    .order {
        flex-direction: column;
    }
    .order .item {
        width: 100% !important;
    }
    .order .item.form {
        margin-top: 15px;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .order input, .order button {
        max-width: 270px;
    }
    .order button {
        margin-left: 15px;
    }
}

@media (max-width: 400px) {
    .order input, .order button {
        width: 100% !important;
        max-width: 380px;
    }
    .order button {
        margin-top: 10px;
        margin-left: 0;
    }
}

.blogs .item {
    height: 180px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 30px;
}
.blogs .item .blog-img {
    width: 470px;
}
.blogs .item .content {
    flex-direction: column;
    justify-content: space-between;
    width: 670px;
}
.blogs .item .content .title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #212121;
}
.blogs .item .content .read-post {
    display: block;
    position: relative;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    color: #c1878c;
    padding-left: 21px;
}
.blogs .item .content .read-post:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 11px;
    height: 18px;
    background: url(../img/read-post.svg);
}

@media (max-width: 1279px) {
    .blogs .item {
        margin-bottom: 30px;
        height: auto;
    }
    .blogs .item .blog-img {
        width: 75%;
        height: 200px;
        margin-right: 26px;
        background-size: auto 200px !important;
    }
}

@media (max-width: 600px) {
    .blogs .item {
        flex-direction: column;
    }
    .blogs .item .blog-img, .blogs .item .content {
        width: 100%;
    }
    .blogs .item .blog-img {
        max-width: 521px;
        margin: 0 auto;
    }
    .blogs .item .title {
        margin: 18px 0;
    }
    .blogs .item p {
        margin: 20px 0;
    }
}

.similar-posts {
    justify-content: space-between;
    height: auto;
}
.similar-posts .item {
    background: url(../img/small-post.jpg);
}
.similar-posts .overlay {
    width: 270px;
    height: 155px;
    padding: 56px 20px 0 15px;
    background: url(../img/overlay.png);
}
.similar-posts .title {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 12px;
}
.similar-posts .desc {
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
}

@media (max-width: 1279px) {
    .similar-posts .item, .similar-posts .overlay {
        width: 230px;
        height: 155px;
    }
    .similar-posts .overlay {
        padding: 36px 10px 0 15px;
    }
    .similar-posts .item + .item + .item + .item {
        display: none;
    }
}

@media (max-width: 767px) {
    .similar-posts {
        flex-direction: column;
    }
    .similar-posts .item {
        background: url(../img/small-post-m.jpg);
        margin: 0 auto 16px;
    }
    .similar-posts .overlay {
        background: url(../img/overlay-m.png);
    }
    .similar-posts .item, .similar-posts .overlay {
        width: 320px;
        height: 156px;
    }
}

@media (max-width: 340px) {
    .similar-posts .item, .similar-posts .overlay {
        width: 290px;
        height: 156px;
    }
}

.about-page h1.heading {
    display: none;
}

.about-desc {
    justify-content: space-between;
}
.about-desc .img {
    align-items: center;
    width: 49%;
}
.about-desc img {
    width: 100%;
    align-self: center;
}
.about-desc p {
    width: 49%;
    line-height: 23px;
}

.about.second {
    margin-top: -35px;
}
.about.second p {
    padding: 95px 0 0 0;
}
.about.second .img {
    position: relative;
}
.about.second img {
    position: absolute;
    right: 0;
}

@media (max-width: 1000px) {
    .about-desc img {
        width: 180%;
    }
    .about.second {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .about-desc {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .about-desc .img, .about-desc p {
        width: 100%;
    }
    .about-desc p {
        padding: 0 !important;
    }
    .about-desc .img {
        position: static !important;
        order: -1;
    }
    .about-desc .img img {
        position: static !important;
        width: 570px;
        height: auto;
        margin: 0 0 33px 50%;
        transform: translateX(-50%);
    }
    .about-desc span.heading {
        display: none;
    }
    .about-page h1.heading {
        display: block;
    }
}

.brands {
    justify-content: space-between;
    flex-wrap: wrap;
}
.brands .item {
    justify-content: center;
    align-items: center;
    width: 23.07%;
    height: 120px;
    border: 1px solid #f3f3f3;
    margin-bottom: 20px;
}
.brands .item img {
    max-width: 90%;
}

@media (max-width: 1279px) {
    .brands .item {
        width: 31.94%;
    }
}

@media (max-width: 767px) {
    .brands .item {
        width: 46.875%;
    }
}

.account {
    width: 100%;
    height: auto;
    padding: 30px 20px;
    box-shadow: 0 0 10px rgba(241, 241, 241, 0.5);
    border: 1px solid #eeeeee;
    margin-bottom: 15px;
}
.account input {
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 450px;
    height: 40px;
    padding: 0 20px;
    margin-top: 15px;
    border: 1px solid #ececec;
    background-color: #fafafa;
    border-radius: 5px;
    font-size: 14px;
    color: #262626;
}
.account h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}
.account input + h3 {
    margin-top: 30px;
}
.account .label {
    display: block;
}
.account .addres1 {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    max-width: 680px;
    height: auto;
}
.account .addres2 {
    width: 450px;
    height: auto;
    flex-wrap: wrap;
}
.account .addres3 {
    width: 200px;
    margin-left: 30px;
}
.account .addres3 input {
    width: 200px;
}
.account .addres1 span, .account .addres2 span, .account .addres3 span {
    font-size: 14px;
}
.account .addres1 .change, .account .addres2 .change, .account .addres3 .change {
    color: #c1878c;
    text-decoration: underline;
    margin-left: 15px;
}
.account textarea {
    width: 100%;
    max-width: 680px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #ececec;
    background-color: #fafafa;
    padding: 13px 16px;
    resize: none;
}
.account p {
    margin: 20px 0 15px;
}
.account.btns {
    justify-content: space-between;
}
.account.btns .save {
    width: 250px;
    height: 40px;
    border-radius: 5px;
    background-color: #c1878c;
    color: #ffffff;
    font-size: 14px;
}
.account.btns .cancel {
    width: 250px;
    height: 40px;
    border-radius: 5px;
    background-color: #bdc3c7;
    color: #ffffff;
    font-size: 14px;
}
.account input + .label {
    margin-top: 21px;
}
.account .line {
    margin: 15px 0 20px;
}

@media (max-width: 1279px) {
    .account .addres3 {
        margin: 0 100px 0 0;
    }
}

@media (max-width: 650px) {
    .account .addres2 {
        flex-direction: column;
    }
    .account .addres2 span + span {
        display: block;
        margin-top: 20px;
    }
    .account .addres3 .label {
        margin-top: 20px;
    }
    .account.btns {
        flex-direction: column;
        align-items: center;
    }
    .account.btns .save {
        margin-bottom: 10px;
        width: 100%;
        max-width: 280px;
    }
    .account.btns .cancel {
        width: 100%;
        max-width: 280px;
    }
}

.cart-items .item {
    border: 1px solid #eeeeee;
    width: 100%;
    height: 101px;
    padding: 15px 0;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(241, 241, 241, 0.5);
}
.cart-items .item .sb {
    flex-grow: 1;
}
.cart-items .item .img, .cart-items .item .price, .cart-items .item .count, .cart-items .item .close {
    justify-content: center;
    align-items: center;
    width: 155px;
}
.cart-items .item .img {
    border-right: 1px solid #eee;
}
.cart-items .item .price, .cart-items .item .count, .cart-items .item .close {
    border-left: 1px solid #eee;
}
.cart-items .item .price {
    font-weight: 700;
    font-size: 18px;
    color: #262626;
}
.cart-items .item .count {
    width: auto;
    padding: 0 20px;
}
.cart-items .item .count input {
    align-items: center;
    width: 60px;
    height: 40px;
    background-color: #ecf0f1;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.01);
    text-align: center;
    border: none;
}
.cart-items .item .count .minus {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #c1878c;
    border-radius: 5px 0 0 5px;
    color: white;
}
.cart-items .item .count .minus:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 2px;
    background: #fff;
}
.cart-items .item .count .plus {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #c1878c;
    border-radius: 0 5px 5px 0;
    color: white;
}
.cart-items .item .count .plus:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 2px;
    background: #fff;
}
.cart-items .item .count .plus:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 12px;
    background: #fff;
}
.cart-items .item .close {
    width: 70px;
}
.cart-items .item .close img {
    width: auto;
    height: auto;
}
.cart-items .item .title {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
    padding-left: 30px;
    font-size: 13px;
    color: #212121;
}
.cart-items .item .title span {
    color: #212121;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

@media (max-width: 1279px) {
    .cart-items .item .img {
        width: 68px;
    }
    .cart-items .item .count input {
        border-radius: 5px;
    }
    .cart-items .item .count .minus, .cart-items .item .count .plus {
        display: none;
    }
}

@media (max-width: 800px) {
    .cart-items .item {
        height: auto;
    }
    .cart-items .item .title {
        padding: 0 20px;
        color: #c5c5c5;
    }
    .cart-items .item .sb {
        flex-direction: column;
    }
    .cart-items .item .count {
        justify-content: space-between;
        padding: 10px 20px;
    }
    .cart-items .item .count:before {
        content: 'Количество';
    }
    .cart-items .item .count:after {
        content: '';
        height: 20px;
        width: 20px;
        background: url(../img/close.jpg);
    }
    .cart-items .item .price {
        display: none;
    }
    .cart-items .item .price.total {
        display: block;
        width: auto;
        padding: 0 20px;
    }
    .cart-items .item .price.total:before {
        content: 'Сумма: ';
    }
}

@media (max-width: 450px) {
    .cart-options .promo {
        flex-direction: column;
    }
    .cart-options .promo input {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    .cart-options .promo button {
        width: 100% !important;
    }
}

@media (max-width: 380px) {
    .disc-total {
        flex-direction: column;
    }
}

.cart-options {
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px;
    box-shadow: 0 0 10px rgba(241, 241, 241, 0.5);
    border: 1px solid #eeeeee;
}
.cart-options .promo, .cart-options .order {
    align-items: center;
}
.cart-options .promo {
    color: #262626;
    font-size: 14px;
    font-weight: 700;
}
.cart-options .promo input {
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    background-color: #fafafa;
    border: 1px solid #c1878c;
    border-radius: 5px;
    margin: 0 10px 0 14px;
    padding-left: 14px;
}
.cart-options .promo button {
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    background-color: #343434;
    border-radius: 5px;
    color: #ffffff;
}
.cart-options .order .discount, .cart-options .order .total-price {
    font-size: 14px;
    color: #262626;
    margin-right: 50px;
}
.cart-options .order .discount span, .cart-options .order .total-price span {
    font-size: 18px;
    font-weight: 700;
}
.cart-options .order button {
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 40px;
    background-color: #c1878c;
    border-radius: 5px;
    color: #ffffff;
}
.cart-options + h1 {
    margin-top: 40px;
}

@media (max-width: 1279px) {
    .cart-options {
        flex-direction: column;
        align-items: flex-end;
        padding: 20px;
    }
    .cart-options .promo {
        width: 100%;
    }
    .cart-options .promo input {
        flex-grow: 1;
    }
    .cart-options .order {
        flex-direction: row;
    }
    .cart-options .disc-total {
        margin: 20px 0 10px;
    }
    .cart-options .total-price {
        margin-right: 15px !important;
    }
    .cart-options .discount {
        margin-right: 35px !important;
    }
}

@media (max-width: 767px) {
    .cart-items .item .close {
        display: none;
    }
    .cart-options {
        flex-direction: column;
        align-items: center;
        padding: 15px;
    }
    .cart-options span.g {
        display: none;
    }
    .cart-options .order {
        flex-direction: column;
    }
    .cart-options .total-price {
        margin-right: 0 !important;
    }
}

#similar-products {
    position: relative;
    margin-bottom: 50px;
}
#similar-products .item {
    position: relative;
    background: #fff;
    text-align: center;
}
#similar-products .item .sale {
    position: absolute;
    top: 15px;
    right: 15px;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
    background: #c1878c;
    border-radius: 50%;
    opacity: 0.75;
    font-size: 11px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.28px;
}
#similar-products .item .img {
    height: 250px;
    width: 100%;
    justify-content: center;
    align-items: center;
}
#similar-products .item .img img {
    width: auto;
    height: auto;
}
#similar-products .item img {
    width: auto;
    height: auto;
    margin: 17px auto 0;
}
#similar-products .item h3 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
}
#similar-products .item .category {
    text-transform: uppercase;
    letter-spacing: 0.28px;
    font-size: 11px;
    color: #212121;
}
#similar-products .item p {
    font-size: 13px;
    font-style: italic;
    line-height: 20px;
    color: #212121;
    opacity: 0.75;
    margin: 20px 0 25px;
}
#similar-products .item .price {
    font-weight: 500;
    font-size: 20px;
    color: #212121;
}
#similar-products .item .price sup {
    font-weight: 400;
    font-size: 15px;
}
#similar-products .owl-nav.disabled {
    display: block !important;
}
#similar-products .owl-prev, #similar-products .owl-next {
    position: absolute;
    top: 50%;
    transform: transitionY(-50%);
    font-size: 50px;
    color: #bdc3c7;
}
#similar-products .owl-prev {
    left: 0;
}
#similar-products .owl-next {
    right: 0;
}

.sidebar {
    /* position: -webkit-sticky;
    position: sticky;
    top: 0; */
    /* align-self: flex-start; */
    
}

.filters {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0 21px 25px;
    box-shadow: 0 0 30px #f1f1f1;
    background-color: #ffffff;
}

.sidebar button.ok {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c1878c;
    background: #fff;
    color: #c1878c;
    margin: 20px 0;
}
.sidebar a {
    font-size: 13px;
    display: block;
    letter-spacing: 0.65px;
    text-decoration: underline;
    color: #212121;
    opacity: 0.5;
}

.catalog-list {
    flex-wrap: wrap;
    justify-content: space-between;
    flex-grow: 1;
    padding-left: 30px;
}
.catalog-list .item {
    position: relative;
    width: 31.03%;
    text-align: center;
    padding: 25px;
}
.catalog-list .item .hot {
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 15px;
    height: 45px;
    width: 45px;
    background: #c1878c;
    opacity: 0.75;
    border-radius: 50%;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.28px;
    color: #ffffff;
}
.catalog-list .item .img {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 190px;
    margin-bottom: 26px;
}
.catalog-list .item h3 {
    margin-bottom: 10px;
}
.catalog-list .item span {
    display: block;
    margin-bottom: 17px;
}
.catalog-list .item img.stars {
    display: block;
    margin: 0 auto 20px;
}
.catalog-list .item p {
    margin-bottom: 25px;
}

.catalog-info {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.catalog-info button {
    width: 230px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #c1878c;
    background: #fff;
    color: #c1878c;
}
.catalog-info p {
    opacity: 0.75;
    color: #212121;
    font-size: 13px;
    letter-spacing: 0.65px;
}

.contact-items {
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.contact-items .item {
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    color: #212121;
}
.contact-items .item img {
    display: inline-block;
    height: 40px;
    width: 40px;
    padding: 10px;
    margin-right: 16px;
    border-radius: 5px;
    background-color: #c1878c;
}
.contact-items button {
    width: 220px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border: 1px solid #c1878c;
    border-radius: 5px;
    font-size: 13px;
    letter-spacing: 0.65px;
    color: #c1878c;
    background: #fff;
}

.contact-form {
    justify-content: space-between;
    margin-top: 27px;
}
.contact-form .name-and-phone {
    flex-direction: column;
    justify-content: space-between;
    margin-right: 30px;
}
.contact-form .name-and-phone input {
    width: 270px;
    height: 41px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    font-size: 13px;
    color: #212121;
    padding: 15px 20px;
}
.contact-form textarea {
    flex-grow: 1;
    height: 102px;
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 15px 20px;
}

.send {
    justify-content: center;
    align-items: center;
    height: 41px;
    width: 270px;
    border-radius: 5px;
    background-color: #c1878c;
    font-size: 13px;
    margin-top: 20px;
    color: #fefefe;
}

.map {
    margin-top: 30px;
    max-width: 100%;
}

@media (max-width: 1279px) {
    .contact-items button {
        display: none;
    }
    .contact-items .item {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .contact-items {
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-items .item {
        margin-bottom: 10px;
    }
    .contact-form {
        flex-direction: column;
    }
    .contact-form .name-and-phone {
        margin-right: 0 !important;
    }
    .contact-form input {
        width: 100% !important;
        margin-bottom: 10px;
    }
}

.noUi-target {
    border: none !important;
    background: none !important;
    padding: 0 8px;
    margin-top: 15px;
}

.noUi-base {
    height: 5px !important;
    background-color: #ecf0f1;
}

.noUi-connect {
    background-color: #c1878c !important;
}

.noUi-handle {
    width: 15px !important;
    height: 15px !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: #c1878c !important;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1) !important;
}
.noUi-handle:before, .noUi-handle:after {
    display: none !important;
}

.noUi-handle {
    right: -7.5px !important;
}
              
            
!

JS

              
                
              
            
!
999px

Console