/* body ------------------------------------------------------------------- */ * { font-family: 'Rubik', sans-serif; } body { display: flex; flex-direction: column; line-height: 125%; color: #111; font-size: 14px; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .main { /*background: url(../img/2023y.png);*/ background-size: contain; background-repeat: repeat-y; } .section-white { background-color: rgba(255, 255, 255, 0.8); } .section-black { background-color: rgba(0, 0, 0, 0.8); } .container { width: 100%; } .heading { font-size: 22px; position: relative; width: 100%; margin-bottom: 16px; text-align: center; } .heading::before { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; height: 1px; margin: auto; content: ''; background: #555; } .heading .heading__title--span { font-size: 1.5rem; position: relative; display: inline-flex; flex-direction: column; } .j-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 25px; } @media (max-width: 800px) { .j-container { padding: 0 15px; } } @media (max-width: 700px) { .j-container { padding: 0 10px; } } .j-container.relative { position: relative; } @media (max-width: 1024px) { .admin-top-menu { display: none; } .admin-on-site { padding: 0 !important; } } /* offcanvas ------------------------------------------------------------------- */ @media (max-width: 1288px) { .j-offcanvas { top: 0; left: 0; width: 100%; height: 100%; z-index: 999; position: fixed; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-offcanvas--open { opacity: 1; visibility: visible; } .j-offcanvas--open .j-offcanvas__content { left: 0; } .j-offcanvas__content { top: 0; left: 0; width: 280px; height: 100%; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; position: fixed; overflow-y: auto; overflow-x: hidden; background: #F8F8FF; } .j-offcanvas__ul:not(.j-topmenu__ul) { display: none; } .j-offcanvas__ul__1 { /* background: #222222; */ } .j-offcanvas__ul__2:not(.j-topmenu__ul__2) { /* background: #000000; */ } .j-offcanvas__li--open:not(.j-topmenu__li) > .j-offcanvas__a__1 .icon, .j-offcanvas__li--open:not(.j-topmenu__li) > .j-offcanvas__a__2 .icon { transform: rotate(90deg); } .j-offcanvas .j-topmenu__li .icon { transform: rotate(90deg); } .j-offcanvas__a { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 40px; padding: 0 25px 0 15px; position: relative; color: #333; border-top: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .j-offcanvas__a__2 { height: 50px; font-size: 13px; padding-left: 20px; } .j-offcanvas__a__3 { height: 30px; font-size: 12px; padding-left: 35px; } .j-offcanvas__a__inner { display: flex; justify-content: space-between; align-items: center; width: 100%; } .j-offcanvas__a .icon { top: 54%; right: 0; font-size: .7rem; margin-top: -5.5px; position: absolute; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-offcanvas__a .icon--arrow-down { display: none; } .j-offcanvas__a:hover, .j-offcanvas__a.active { color: #ffffff; background: var(--main-color); } .j-offcanvas__img { display: none; } .j-offcanvas__a--inactive .icon--arrow-right { color: #FFF; } } /* modal ------------------------------------------------------------------- */ .j-modal { display: flex; align-items: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; position: fixed; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-modal__content { padding: 15px; margin: 0 15px; max-height: 90%; max-width: 600px; overflow-y: auto; overflow-x: hidden; background: #ffffff; border-radius: 3px; opacity: 0; visibility: hidden; transform: translateY(30%); transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-modal--open { visibility: visible; opacity: 1; } .j-modal--open .j-modal__content { opacity: 1; visibility: visible; transform: translateY(0); } .j-modal__cart__content { width: 600px; } /* header ------------------------------------------------------------------- */ .j-header { background: #FFF; } .j-header .j-container { display: flex; justify-content: space-between;; align-items: center; } @media (max-width: 700px) { .j-header .j-container { flex-wrap: wrap; } } .header-middle { margin-top: 12px; } @media (max-width: 640px) { .drop-address { max-width: 270px; margin: 0 auto 10px; } } .drop-address > a > span { font-size: 14px; } .j-header .j-block__logo { display: flex; width: 24%; height: 60px; position: relative; } @media (min-width: 1300px) { .j-header .j-block__logo { margin-right: 90px; } } @media (max-width: 1024px) { .j-header .j-block__logo { width: 35%; max-height: 50px; } } @media (max-width: 700px) { .j-header .j-block__logo { max-height: 40px; width: 40%; } } @media (max-width: 600px) { .j-header .j-block__logo { width: 100%; } } .j-header .j-block__logo img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-header .j-block__search { width: 70%; margin-top: 5px; } @media (max-width: 1130px) { .j-header .j-block__search { width: 60%; margin-top: 0; } } @media (max-width: 700px) { .j-header .j-block__search { order: 1; width: 270px; margin: 0 auto 5px; } } .j-header .j-block__contact { display: flex; flex-direction: column; justify-content: center; width: 220px; } @media (max-width: 700px) { .j-header .j-block__contact { padding-left: 10px; } } @media (max-width: 640px) { .j-header .j-block__contact { margin-bottom: 10px; margin-left: 30px; } } .j-header .j-block__cart { display: flex; justify-content: flex-end; height: 100%; } @media (max-width: 1024px) { .j-header .j-block__cart { position: absolute; } } .j-container-fixed { background: #FFF; } /* catalog button dropdown ------------------------------------------------------------------- */ @media (min-width: 1289px) { .container-dropdown { display: flex; flex-direction: column; justify-content: center; position: relative; } .container-dropdown:hover .j-leftmenu__title-dropdown { opacity: 1; visibility: visible; transform: scaleY(1); } .j-leftmenu__title-dropdown { background: #ffffff; border: 1px solid #999; box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); border-radius: 3px; left: 0; top: 100%; height: fit-content; width: 100%; padding-top: 5px; position: absolute; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; z-index: 99; } } /* contact ------------------------------------------------------------------- */ .j-contact { position: relative; } .j-contact__visible { display: flex; align-items: center; } .j-contact__visible__img .icon { color: #FF4747; font-size: 24px; margin-right: 7px; } .j-contact__visible__phone { font-size: 1.1rem; cursor: pointer !important; } .j-contact__visible__arrow { display: flex; align-items: center; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; cursor: pointer; margin-left: 10px; } @media (max-width: 700px) { .j-contact__visible__arrow { font-size: 10px; margin-left: 5px; } } .j-contact__dropdown { left: 0; top: 100%; z-index: 99; max-width: 210px; padding: 10px 15px; position: absolute; background: #ffffff; border: 1px solid #999; box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); border-radius: 3px; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } @media (min-width: 1025px) { .j-contact__dropdown { min-width: 200px; } } @media (max-width: 700px) { .j-contact__dropdown { width: 230px; left: 0; } .drop-address { margin-bottom: 10px; } } .j-contact__dropdown__li { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .j-contact__dropdown__li:last-child { padding-bottom: 0; } .j-contact__dropdown__title { width: 100%; color: #999999; font-size: 13px; padding-left: 30px; } .j-contact__dropdown__img { width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin-right: 10px; position: relative; } .j-contact__dropdown__img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-contact__dropdown__a { margin: 0 10px 10px; } .j-contact__worktime { width: 100%; } .j-contact__worktime__title { margin: 10px 0; text-align: center; padding-bottom: 5px; border-bottom: 1px solid #999; } .j-contact__worktime__ul { font-size: 13px; } @media (max-width: 1024px) { .j-contact__worktime__ul { font-size: 12px; } } .j-contact__worktime__li { display: flex; align-items: center; padding-bottom: 5px; } .j-contact__worktime__li:last-child { padding-bottom: 0; } .j-contact__worktime__day { width: 50%; } .j-contact__worktime__time { color: #999999; } .j-contact:hover .j-contact__dropdown { opacity: 1; visibility: visible; transform: scaleY(1); } .j-contact:hover .j-contact__visible__arrow { transform: rotate(180deg); } @media (max-width: 1024px) { .j-contact__click { top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; position: absolute; } } /* compare ------------------------------------------------------------------- */ .c-compare__link { display: flex; flex-direction: column; } .c-compare__link--count { color: var(--main-color); position: absolute; top: 0; right: 0; } /* link compare, auth, favorites ------------------------------------------------------------------- */ .j-login__enter { margin: 0 10px; } .icon-link { display: flex; color: var(--main-color); align-items: center; justify-content: center; } .icon-link:hover { color: var(--secondary-color); } .icon-link > i { font-size: 28px; } .icon-text { color: #666; font-size: 12px; margin-top: 9px; } .icon-text:hover, .c-compare__link--text:hover, .c-login__text:hover, .c-cart__small--text:hover { color: var(--main-color); text-decoration: underline; } @media (max-width: 880px) { .icon-text { font-size: 11px; } } /* layout_search ------------------------------------------------------------------- */ .search { margin: 10px 10px 0 !important; } .j-search { position: relative; } .j-search [type="search"] { width: 100%; height: 30px; padding: 0 110px 0 10px; margin-bottom: 0; } @media (max-width: 1024px) { .j-search [type="search"] { padding-right: 50px; } } @media (max-width: 700px) { .j-search { max-width: 270px; } .j-search [type="search"] { height: 30px; font-size: 12px; } } .j-search__button { top: 0; right: 0; height: 30px; width: 90px; font-size: 16px; position: absolute; color: #ffffff; background: var(--main-color); border-top-right-radius: 3px; border-bottom-right-radius: 3px; } @media (max-width: 1024px) { .j-search__button { width: 40px; } } @media (max-width: 700px) { .j-search__button { height: 30px; } } .j-search__button__text { margin-left: 5px; } @media (max-width: 1024px) { .j-search__button__text { display: none; } } .j-search__button:hover { background: var(--secondary-color); } .j-search__results { left: 0; width: 100%; position: absolute; } .j-search__results ul { padding: 10px; z-index: 999; overflow: auto; max-height: 300px; position: relative; background: #ffffff; border: 1px solid #999; box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); border-radius: 3px; } .j-search__results li { padding: 5px 0; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .j-search__results li:hover { border-top-color: #999; border-bottom-color: #999; } .j-search__results li:last-child { margin-bottom: 0; } .j-search__results a { display: flex; align-items: center; } .j-search__results span { display: block; color: #e74c3c; font-size: 12px; margin-top: 5px; line-height: 15px; } .j-search__results .variant-text { margin-top: 0; color: #999999; } .j-search__results .fast-result-img { width: 50px; height: 50px; position: relative; } .j-search__results .fast-result-img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-search__results .fast-result-info { padding-left: 15px; width: calc(100% - 50px); } /* container-menu ------------------------------------------------------------------- */ .container-menu { background: rgba(255, 255, 255, 1); border-bottom: 1px solid #e5e5e5; box-shadow: 0 2px 4px rgb(0 0 0 / 40%); padding: 5px 0; width: 100%; } /* layout_topmenu ------------------------------------------------------------------- */ .j-topmenu { margin-left: 30px; } .j-topmenu__a__1 .icon--arrow-right { display: none; } @media (min-width: 1360px) { .j-topmenu__li { height: 100%; position: relative; } .j-topmenu__li__1:hover .j-topmenu__a__1:before { background: var(--main-color); } .j-topmenu__li__1:hover > .j-topmenu__ul { opacity: 1; visibility: visible; transform: scaleY(1); } .j-topmenu__li__2:hover > .j-topmenu__ul { opacity: 1; visibility: visible; transform: scaleX(1); } .j-topmenu__li:last-child .j-topmenu__a__1 { margin-right: 0; } .j-topmenu__a { display: flex; align-items: center; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-topmenu__a__1 { font-size: 14px; margin-right: 25px; height: 100%; line-height: 14px; text-align: center; position: relative; } .j-topmenu__a__1:before { width: 100%; height: 3px; content: ''; display: block; left: 0; bottom: 0; position: absolute; } .j-topmenu__a__1.active:before { background: var(--main-color); } .j-topmenu__a__2, .j-topmenu__a__3 { padding: 3px; font-size: 13px; } .j-topmenu__a__2:hover, .j-topmenu__a__3:hover, .j-topmenu__a__2.active, .j-topmenu__a__3.active { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15); } .j-topmenu .j-parent > .j-topmenu__a { justify-content: space-between; } .j-topmenu .j-parent > .j-topmenu__a .icon { font-size: 11px; margin-left: 5px; } } @media (min-width: 1289px) { .j-topmenu { height: 100%; } .j-topmenu__content { display: flex; align-items: center; height: 100%; list-style-type: none; } .j-topmenu__ul { z-index: 99; width: 230px; position: absolute; background: #ffffff; border: 1px solid #999; border-radius: 3px; box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); } .j-topmenu__ul__1 { left: 0; top: 100%; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-topmenu__ul__2 { top: 0; left: 100%; margin-top: -1px; opacity: 0; visibility: hidden; -ms-transform: scaleX(0); transform: scaleX(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } } @media (max-width: 1360px) { .j-topmenu__a__1 { font-size: 14px; margin-right: 20px; } } .icon--arrow-down, .icon--arrow-right { margin-left: 3px; } /* main ------------------------------------------------------------------- */ .j-main { display: flex; flex: 1 0 auto; width: 100%; max-width: 1400px; padding: 0 25px 25px; margin: 0 auto; } @media (max-width: 800px) { .j-main { padding: 0 15px 25px; } } @media (max-width: 700px) { .j-main { padding: 0 10px 25px; } } .j-main:before { height: 40px; width: 100%; content: ''; left: 0; z-index: -1; display: block; position: absolute; background: #ffffff; border-bottom: 1px solid #999; } @media (max-width: 1288px) { .j-main:before { height: 30px; } } .j-main__aside { width: 280px; padding-right: 25px; height: fit-content; } @media (max-width: 1288px) { .j-main__aside { position: absolute; visibility: hidden; } } .j-main__article { width: calc(100% - 280px); } @media (max-width: 1288px) { .j-main__article { width: 100%; } } .j-main__article__top { height: 40px; display: flex; align-items: center; justify-content: space-between; width: 100%; } @media (max-width: 1288px) { .j-main__article__top { height: 30px; } } @media (min-width: 1289px) { .j-main__article__top .j-block__mobile { display: none; } } @media (max-width: 1289px) { .j-main__article__top .j-block__mobile { display: flex; align-items: center; height: 100%; } } .j-main__article__top .j-block__menu { height: 100%; } @media (max-width: 1289px) { .j-main__article__top .j-block__menu { width: 0; } } .j-main__article__top .j-block__login { display: flex; justify-content: flex-end; align-items: center; width: 120px; height: 100%; } @media (max-width: 700px) { .j-main__article__top .j-block__login { width: 130px; } } /* tab ------------------------------------------------------------------- */ .j-tab__nav { display: flex; background: rgba(255, 255, 255, 0.9); padding: 0 15px 7px; } @media (max-width: 700px) { .j-tab__nav { flex-wrap: wrap; } } .j-tab__nav__a { display: flex; align-items: center; font-size: 18px; position: relative; margin-right: 15px; margin-bottom: 10px; padding: 0 10px 5px 10px; border-bottom: 2px solid transparent; } .j-tab__nav__a:before, .j-tab__nav__a:after { width: 0; height: 0; top: 100%; left: 50%; content: " "; position: absolute; border: solid transparent; } .j-tab__nav__a:after { border-width: 7px; margin-left: -7px; border-top-color: #ffffff; } .j-tab__nav__a:before { border-width: 10px; margin-left: -10px; } @media (max-width: 700px) { .j-tab__nav__a { font-size: 16px; padding-left: 5px; padding-right: 5px; margin-right: 10px; } } .j-tab__nav__a:last-child { margin-right: 0; } .j-tab__nav__a.active { border-bottom-color: var(--main-color); } .j-tab__nav__a.active:before { border-top-color: var(--main-color); } .j-tab__nav__a:not(.active):hover { border-bottom-color: #999; } .j-tab__nav__a:not(.active):hover:before { border-top-color: #999; } .j-tab__content { display: none; padding: 15px; background: rgba(255, 255, 255, .7); border: 1px solid #999; border-radius: 3px; line-height: 1.3; } .j-tab__content p { line-height: 20px; } .j-tab__content.active { display: block; } .tab-personal-form, .enter-form { background: rgba(255, 255, 255, .7); border: 1px solid #999; border-radius: 10px; margin: 10px auto; padding: 10px; width: fit-content; } .form-list { border-radius: 5px; color: #333; letter-spacing: .5px; margin-bottom: 5px; } .save-btn { border-radius: 3px; padding: 5px 10px; } /* influence on tab ------------------------------------------------------------------- */ .j-product__tab .j-tab__nav__a:after { border-top-color: #f1f1f1; } .j-modal__content .j-tab__content { border: 0; padding: 0; } .j-personal__tab .j-tab__nav__a:after { border-top-color: #f1f1f1; } .j-left-block .j-tab__content { border: 0; padding: 0; } /* contact page ------------------------------------------------------------------- */ .drop-shadow { position: relative; padding: 1em; margin: 2em auto 5em; background: #fff; box-shadow: 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset, 0 9px 9px -3px rgba(0, 0, 0, 0.4); } /* title ------------------------------------------------------------------- */ .j-title { background: rgba(255, 255, 255, 0.9); width: 100%; font-size: 22px; line-height: 24px; font-weight: normal; padding: 5px 10px; text-align: center; } @media (max-width: 1024px) { .j-title { font-size: 20px; line-height: 22px; } } @media (max-width: 700px) { .j-title { font-size: 18px; line-height: 20px; } } .j-title__static { font-size: 24px; line-height: 24px; font-weight: normal; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #999; } @media (max-width: 1024px) { .j-title__static { font-size: 20px; line-height: 22px; } } @media (max-width: 700px) { .j-title__static { font-size: 20px; line-height: 20px; } } .j-title__static__sub { font-size: 16px; line-height: 16px; margin-top: 25px; } .j-title__static__sub span { color: var(--main-color); } /* form ------------------------------------------------------------------- */ .c-form { background: rgba(255, 255, 255, 0.9); /* border: 1px solid #999 */; } .payment-option .c-form { padding: 15px; } textarea, [type="url"], [type="text"], [type="email"], [type="search"], [type="password"] { height: 27px; padding: 0 7px; background: #ffffff; border-radius: 3px; border: 1px solid #999; } textarea:focus, [type="url"]:focus, [type="text"]:focus, [type="email"]:focus, [type="search"]:focus, [type="password"]:focus { border: 1px solid #999; } textarea { padding: 10px; height: 60px; max-height: 100px; } select { padding: 0 5px 3px; border-radius: 3px; border: 1px solid #999; } select:focus { background: #fafafa; } b { font-weight: 600; } /* radio & checkbox ------------------------------------------------------------------- */ .j-radio, .j-checkbox, .payment-details-list label { display: flex; align-items: center; padding: 3px 0; font-size: 12px; line-height: 12px; /*margin-bottom: 5px;*/ position: relative; } .j-radio [type="radio"], .j-checkbox [type="radio"], .payment-details-list label [type="radio"], .j-radio [type="checkbox"], .j-checkbox [type="checkbox"], .payment-details-list label [type="checkbox"] { top: 0; left: 0; opacity: 0; width: 100%; height: 100%; position: absolute; } .j-radio:before, .j-checkbox:before, .payment-details-list label:before { content: ''; display: block; min-width: 15px; min-height: 15px; max-width: 15px; max-height: 15px; margin-right: 10px; background: #ffffff; border: 1px solid #999; border-radius: 3px; box-shadow: inset 0 0 0 2px #ffffff; } .j-radio:hover:before, .j-checkbox:hover:before, .payment-details-list label:hover:before { background: #FF8C00; } .j-radio.active:before, .j-checkbox.active:before, .payment-details-list label.active:before { background: var(--main-color); } /* influence on radio & checkbox ------------------------------------------------------------------- */ .j-product p .j-radio:first-of-type, .j-product p .j-checkbox:first-of-type { margin-top: 5px; } /* button ------------------------------------------------------------------- */ .j-button:not(.c-search__button), [type="submit"]:not(.c-search__button) { display: inline-flex;; align-items: center; justify-content: center; height: 30px; padding: 0 10px 3px; white-space: nowrap; border-radius: 3px; background: var(--main-color); color: #ffffff; } .j-button:not(.c-search__button):hover, [type="submit"]:not(.c-search__button):hover { background: var(--secondary-color); } .j-button:not(.c-search__button):active, [type="submit"]:not(.c-search__button):active { transform: translateY(3px); } .j-button, .c-button { border: 1px solid #999; display: inline-flex; align-items: center; justify-content: center; height: 25px; padding: 0 15px 3px; white-space: nowrap; border-radius: 3px; background: var(--main-color); color: #ffffff; } .j-button:hover, .c-button:hover { background: var(--secondary-color); } .j-button:active, .c-button:active { transform: translateY(3px); } .j-button__mobile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 200px; padding: 0 25px; margin-right: 5px; } @media (max-width: 700px) { .j-button__mobile { padding: 0 15px; } } .j-button__mobile:last-child { margin-right: 0; } .j-button__compare { display: flex; align-items: center; justify-content: center; max-height: 40px; padding-left: 10px; padding-right: 10px; margin: 10px auto 0; min-width: 35px; order: 1; } .j-button__compare .icon { font-size: 14px; margin-right: 5px; color: var(--main-color); } @media (max-width: 700px) { .j-button__compare { display: none; } } /* influence on button ------------------------------------------------------------------- */ /*.j-goods .j-button {*/ /* width: 100%;*/ /*}*/ /* amount ------------------------------------------------------------------- */ /*.j-amount {*/ /* min-width: 80px;*/ /* max-width: 80px;*/ /* padding-right: 10px;*/ /*}*/ /*.j-amount__inner {*/ /* display: -webkit-box;*/ /* display: -webkit-flex;*/ /* display: -ms-flexbox;*/ /* display: flex;*/ /* height: 30px;*/ /* position: relative;*/ /*}*/ /*.j-amount__arrow {*/ /* display: -webkit-box;*/ /* display: -webkit-flex;*/ /* display: -ms-flexbox;*/ /* display: flex;*/ /* -webkit-box-align: center;*/ /* -webkit-align-items: center;*/ /* -ms-flex-align: center;*/ /* align-items: center;*/ /* -webkit-box-pack: center;*/ /* -webkit-justify-content: center;*/ /* -ms-flex-pack: center;*/ /* justify-content: center;*/ /* top: 0;*/ /* width: 20px;*/ /* height: 100%;*/ /* font-size: 12px;*/ /* position: absolute;*/ /* color: #ffffff;*/ /* background: var(--main-color);*/ /*}*/ /*.j-amount__arrow__plus {*/ /* right: 0;*/ /* border-top-right-radius: 3px;*/ /* border-bottom-right-radius: 3px;*/ /*}*/ /*.j-amount__arrow__minus {*/ /* left: 0;*/ /* border-top-left-radius: 3px;*/ /* border-bottom-left-radius: 3px;*/ /*}*/ /*.j-amount__arrow:hover {*/ /* background: var(--secondary-color);*/ /*}*/ /*.j-amount [type="text"] {*/ /* width: 100%;*/ /* height: 100%;*/ /* font-size: 12px;*/ /* padding: 0 25px;*/ /* margin-bottom: 0;*/ /* text-align: center;*/ /*}*/ /* influence on amount ------------------------------------------------------------------- */ /*.j-product .j-amount {*/ /* min-width: 120px;*/ /* max-width: 120px;*/ /*}*/ /*.j-product .j-amount__inner {*/ /* height: 30px;*/ /*}*/ /*.j-product .j-amount__arrow {*/ /* width: 30px;*/ /* font-size: 14px;*/ /*}*/ /*.j-product .j-amount [type="text"] {*/ /* font-size: 14px;*/ /*}*/ /*.j-order__table__count .j-amount {*/ /* margin: 0 auto;*/ /*}*/ /* c-filter ------------------------------------------------------------------- */ .c-filter { cursor: pointer; } .c-filter .ui-slider { width: calc(100% - 14px); margin: 10px auto 0; } .c-filter .ui-slider .ui-slider-range { background: linear-gradient(to right, #1AA094, #43CD80); } .c-filter__button > svg { width: 20px; height: 20px; user-select: none; fill: #fff; } /* bread crumbs ------------------------------------------------------------------- */ .bread_crumbs { background: rgba(255, 255, 255, 1); padding: 2px 10px 1px; width: 100%; } /* c-goods ------------------------------------------------------------------- */ .c-goods { background: #FFF; } /* product ------------------------------------------------------------------- */ .buy-block-inner { padding: 0 15px 15px; } .c-product__stock { background: #2ecc71; border-radius: 3px; color: #ffffff; display: inline-block; letter-spacing: .5px; margin: 5px 0; padding: 2px 15px 5px; } .product-price-default { width: 100%; } .old-price { color: #999; } .price { color: var(--secondary-color); font-size: 1rem; } .currency { color: var(--secondary-color); } /* property-form ------------------------------------------------------------------- */ .property-form { /*margin: 15px 5px 7px 5px;*/ /* background: #ffffff; */ border-radius: 3px; width: 100%; } .property-form .property-title { font-size: 12px; font-weight: 500; display: inline-block; text-transform: uppercase; } .property-form .property-delimiter { margin-right: 5px; } .property-form br { display: none; } .property-form p { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999; } .property-form select { font-size: 12px; } .property-form .label-black { font-size: 12px; } .property-form .hidder-element { display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /* influence on property-form ------------------------------------------------------------------- */ .j-page__product .property-form { padding: 10px; } .j-page__product .buy-container { margin-top: 15px; } /* social ------------------------------------------------------------------- */ .j-social__text { color: #333; font-size: 14px; font-weight: 600; letter-spacing: .5px; } /* left block ------------------------------------------------------------------- */ .j-left-block { padding: 10px; margin-top: 25px; background: #ffffff; border-radius: 3px; } .j-left-block__title { font-size: 18px; text-align: center; margin-top: 35px; padding-bottom: 5px; border-bottom: 1px solid var(--main-color); } /* seo ------------------------------------------------------------------- */ .j-seo { border: 1px solid #999; font-size: 14px; margin-top: 25px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.9); padding: 7px 12px; letter-spacing: .5px; line-height: 1.2; } .j-seo h1 { font-size: 24px; line-height: 24px; font-weight: normal; padding-bottom: 5px; margin: 0 auto 15px; border-bottom: 2px solid #999; } .j-seo > span { line-height: 1.3 !important; } .j-seo__top { margin-bottom: 15px; background: rgba(255, 255, 255, 0.9); padding: 7px 12px; /* border-radius: 10px; */ letter-spacing: .5px; line-height: 1.2; } @media (max-width: 700px) { .j-seo__top { display: none; } } /* c-alert ------------------------------------------------------------------- */ .c-alert { display: block; padding: 10px 16px; } @media (max-width: 767px) { .c-alert { padding: 10px; } } .c-alert--red { color: #a94442; background: #f2dede; } .c-alert--blue { color: #31708f; background: #d9edf7; } .c-alert--green { color: #3c763d; background: #dff0d8; } .c-alert--orange { color: #8a6d3b; background: #fcf8e3; } /* alert ------------------------------------------------------------------- */ .j-alert { width: 100%; padding: 10px; line-height: 18px; margin-bottom: 15px; border: 1px solid; border-radius: 3px; } .j-alert__default { color: #2d7091; background: #ebf7fd; border-color: rgba(45, 112, 145, 0.3); } .j-alert__red { color: #d85030; background: #fff1f0; border-color: rgba(216, 80, 48, 0.3); } .j-alert__green { color: #096; background: #f2fae3; border-color: rgba(101, 159, 19, 0.3); } /* error ------------------------------------------------------------------- */ .error-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 999; top: 0 !important; left: 0 !important; position: fixed !important; background: rgba(0, 0, 0, 0.8); } @media (max-width: 700px) { .error-box { display: none !important; } } .error-box .sorry-error, .error-box .text-error { width: 500px; padding: 10px; line-height: 20px; margin-bottom: 15px; background: #fff1f0; border: 5px solid rgba(216, 80, 48, 0.3); border-radius: 3px; } .error-box .close-notification { top: 25px; right: 25px; font-size: 44px; color: #ffffff; position: absolute; } .error-box .close-notification:before { content: 'x'; } .error-box .close-notification:hover { opacity: .8; } .error-box .send-report-btn { padding: 10px; } /* j-compare ------------------------------------------------------------------- */ .j-compare .property-form { left: 0; top: 100%; width: 100%; padding: 10px; margin-top: -5px; position: absolute; border: 1px solid var(--main-color); border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-compare__item:hover .property-form { opacity: 1; visibility: visible; transform: scaleY(1); } .j-compare .property-title { font-size: 11px; } .j-compare .property-delimiter { display: none; } .j-compare p { margin-bottom: 10px; } .j-compare select { width: 100%; margin-bottom: 0; } .j-goods__list .hidder-element { flex-wrap: nowrap; } /* figure ------------------------------------------------------------------- */ .j-figure { width: 100%; display: flex; flex-wrap: wrap; margin-top: 25px; } .j-figure__item { display: flex; align-items: center; height: 150px; padding: 10px; background: #ffffff; border-radius: 3px; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } @media (min-width: 701px) { .j-figure__item { margin-top: 10px; width: calc(33% - 7px); } .j-figure__item:nth-child(3n + 1) { margin-right: 10px; } .j-figure__item:nth-child(3n + 2) { margin-right: 10px; } .j-figure__item:nth-child(-n + 3) { margin-top: 0; } } @media (max-width: 700px) { .j-figure__item { width: 100%; margin-top: 10px; } .j-figure__item:first-child { margin-top: 0; } } .j-figure__item:hover { box-shadow: 0 0 0 1px var(--main-color); } .j-figure__icon, .j-figure__text { display: flex; } .j-figure__icon { width: 40%; color: var(--main-color); font-size: 100px; } .j-figure__text { width: 60%; font-size: 16px; line-height: 20px; text-align: center; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } .j-figure__text span { width: 100%; font-size: 18px; font-weight: 500; margin-bottom: 5px; } /* no-data ------------------------------------------------------------------- */ .j-no-data { width: 100%; padding: 100px 0; text-align: center; } @media (max-width: 700px) { .j-no-data { padding: 50px 0; margin-top: 25px; } } .j-no-data .icon { color: #999; font-size: 180px; } @media (max-width: 700px) { .j-no-data .icon { font-size: 110px; } } .j-no-data__text { margin-top: 25px; font-size: 34px; line-height: 34px; text-align: center; color: #c8c8c8; } @media (max-width: 700px) { .j-no-data__text { font-size: 20px; line-height: 20px; } } /* payment ------------------------------------------------------------------- */ .j-payment { width: 100%; display: flex; flex-wrap: wrap; } .j-payment__item { height: 50px; padding: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px #999; position: relative; margin-top: 10px; width: calc(33% - 7px); } .j-payment__item:nth-child(3n + 1) { margin-right: 10px; } .j-payment__item:nth-child(3n + 2) { margin-right: 10px; } .j-payment__item:nth-child(-n + 3) { margin-top: 0; } .j-payment__item .icon { font-size: 36px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-payment__item .icon--visa, .j-payment__item .icon--master-card { font-size: 52px; } .j-payment__link { display: flex; align-items: center; justify-content: flex-end; margin-top: 15px; } .j-payment__link .icon { font-size: 12px; margin-left: 2px; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-payment__link:hover .icon { transform: translateX(5px); } /* typography ------------------------------------------------------------------- */ .j-pre { font-family: monospace !important; tab-size: 4; overflow-x: auto; padding: 15px 0; background: #f0f0f0; border-radius: 3px; box-shadow: inset 0 1px 0 0 #ccc, inset 0 0 0 1px #dedede, inset 0 1px 2px 1px #e6e6e6; } .j-pre__title { font-weight: bold; margin: 25px 0 15px 0; text-transform: uppercase; } .j-typography__list { padding-left: 20px; } .j-typography__list li { display: flex; margin-top: 10px; } .j-typography__list li:before { content: "• "; color: var(--main-color); font-size: 24px; margin-right: 5px; } .j-typography__table th { padding: 10px; font-size: 16px; font-weight: normal; background: #f1f1f1; border: 1px solid #999; } .j-typography__table td { padding: 10px; border: 1px solid #999; } .j-typography__table td:first-child, .j-typography__table td:last-child { text-align: center; } .j-typography__table tr:hover { background: #f1f1f1; } .j-typography__grid { display: flex; flex-wrap: wrap; } .j-typography__grid__item { height: 50px; padding: 5px; text-align: center; border: 1px solid #999; border-radius: 3px; } @media (min-width: 701px) { .j-typography__grid__item { margin-top: 10px; width: calc(11% - 9px); } .j-typography__grid__item:nth-child(9n + 1) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 2) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 3) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 4) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 5) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 6) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 7) { margin-right: 10px; } .j-typography__grid__item:nth-child(9n + 8) { margin-right: 10px; } .j-typography__grid__item:nth-child(-n + 9) { margin-top: 0; } } @media (max-width: 700px) { .j-typography__grid__item { margin-top: 10px; width: calc(25% - 7px); } .j-typography__grid__item:nth-child(4n + 1) { margin-right: 10px; } .j-typography__grid__item:nth-child(4n + 2) { margin-right: 10px; } .j-typography__grid__item:nth-child(4n + 3) { margin-right: 10px; } .j-typography__grid__item:nth-child(-n + 4) { margin-top: 0; } } .j-typography__grid__item .icon { width: 100%; height: 100%; } .j-typography__grid__item__count { padding: 5px 0; } @media (max-width: 700px) { .j-typography__grid__item__count { display: none; } } /* layout_auth ------------------------------------------------------------------- */ .c-login__icon { font-size: 28px; display: flex; color: #5b3f97; align-items: center; justify-content: center; } @media (max-width: 1024px) { .c-login__icon { font-size: 24px; } } @media (max-width: 767px) { .c-login__icon { font-size: 22px; } } .j-login__bottom { display: flex; align-items: center; } .j-login__forgot { margin-left: 25px; border-bottom: 1px dashed; } .j-login__forgot:hover { border-bottom: none; } .j-login__registration { margin-top: 10px; } .j-login__logout { margin-left: 5px; } @media (max-width: 700px) { .j-login__logout { margin-left: 10px; } } .j-login__logout, .j-login__personal, .j-login__registration, .j-order__table__checkout, .send, .save-btn, .checkout-btn, .enter-btn, .register-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 25px; white-space: nowrap; border-radius: 3px; background: var(--main-color); color: #ffffff; } .j-login__logout:hover, .j-login__personal:hover, .j-login__registration:hover, .j-order__table__checkout:hover, .send:hover, .save-btn:hover, .checkout-btn:hover, .enter-btn:hover, .register-btn:hover { background: var(--secondary-color); } .j-login__logout:active, .j-login__personal:active, .j-login__registration:active, .j-order__table__checkout:active, .send:active, .save-btn:active, .checkout-btn:active, .enter-btn:active, .register-btn:active { transform: translateY(3px); } .user-login, .create-user-account-form { color: #333; font-weight: 400; } .forgot-link { margin-top: 5px; text-decoration: underline; } .forgot-link:hover { color: #ff4747; text-decoration: none; } @media (min-width: 701px) { .j-login__logout, .j-login__personal { padding: 0 15px; } } /* layout_cart ------------------------------------------------------------------- */ .j-cart { display: flex; position: relative; } .j-cart__visible { position: relative; } .j-cart__visible__ul { line-height: 15px; } @media (min-width: 1025px) { .j-cart__visible { display: flex; align-items: center; } .j-cart__visible .icon--cart { font-size: 2rem; margin-right: 10px; color: var(--main-color); } .j-cart__visible__li { margin-bottom: 1px; } .j-cart__visible__li:last-child { margin-bottom: 0; } .j-cart__visible__count, .j-cart__visible__amount { font-size: 14px; font-weight: 500; } } @media (max-width: 1024px) { .j-cart__visible { top: 100px; right: 1px; width: 30px; height: 30px; padding: 5px; z-index: 80; position: fixed; color: #ffffff; background: var(--main-color); box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); border: 1px solid #ffffff; border-radius: 3px; transition-property: right; transition-duration: 0.3s; transition-timing-function: ease; } .j-cart__visible--open { right: 0; } .j-cart__visible:active { transform: translateY(3px); } .j-cart__visible .icon--cart { font-size: 2.4em; } .j-cart__visible__count { display: flex; align-items: center; justify-content: center; top: -18px; left: -18px; position: absolute; height: 25px; min-width: 25px; line-height: 0; background: var(--main-color); border: 1px solid #ffffff; border-radius: 3px; } .j-cart__visible__amount, .j-cart__visible__suffix { display: none; } .j-cart__visible:hover { background: var(--secondary-color); } .j-cart__visible:hover .j-cart__visible__count { background: var(--secondary-color); } } @media (max-width: 639px) { .j-cart__visible { top: 50px; } } .j-cart__dropdown { right: 0; top: 100%; z-index: 90; width: 300px; padding: 15px; position: absolute; background: #ffffff; /*border-top: 15px solid transparent;*/ box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5), inset 0 0 0 2px var(--main-color); opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } @media (max-width: 1024px) { .j-cart__dropdown { display: none !important; } } .j-cart__title { font-size: 22px; padding-bottom: 10px; } .j-cart__table { overflow: auto; padding: 5px 0; max-height: 200px; margin-bottom: 15px; border-top: 1px solid #999; border-bottom: 1px solid #999; } .j-cart__table__tr { padding: 5px 0; } .j-cart__table__img { display: block; min-width: 70px; max-width: 70px; min-height: 70px; max-height: 70px; margin-top: 5px; position: relative; } .j-cart__table__img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } @media (max-width: 480px) { .j-cart__table__img { display: none; } } .j-cart__table__name { width: 80%; padding: 10px; font-size: 12px; } @media (max-width: 480px) { .j-cart__table__name { width: 95%; padding: 10px 0; } } .j-cart__table__name__link { font-weight: 500; } .j-cart__table__name__link:hover { color: #e74c3c; } .j-cart__table__name__qty { color: #e74c3c; } .j-cart__table__remove { width: 5%; padding: 10px; font-size: 20px; text-align: right; } .j-cart__table__remove a:hover { color: #e74c3c; } .j-cart__total { font-size: 16px; text-align: right; } .j-cart__footer { display: flex; justify-content: flex-end; align-items: center; margin-top: 5px; } .j-cart__close { cursor: pointer; margin-right: 15px; } .j-cart__close:hover { text-decoration: underline; } @media (min-width: 1025px) { .j-cart:hover .j-cart__visible { color: var(--secondary-color); } .j-cart:hover .j-cart__visible:after, .j-cart:hover .j-cart__visible:before { opacity: 1; visibility: visible; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } } .j-cart:hover .j-cart__dropdown { opacity: 1; visibility: visible; transform: scaleY(1); } .transfer_class { display: none !important; } /* influence on cart ------------------------------------------------------------------- */ @media (min-width: 1025px) { .j-page__order .j-cart__dropdown { display: none; } .j-page__order .j-cart__visible:after, .j-page__order .j-cart__visible:before { display: none; } } @media (max-width: 1024px) { .j-page__order .j-cart { display: none; } } /* layout_leftmenu ------------------------------------------------------------------- */ .j-leftmenu__title { display: none; } @media (min-width: 1289px) { .j-leftmenu__title { display: flex; justify-content: space-between; align-items: center; height: 40px; font-size: 18px; padding: 0 15px; color: #ffffff; background: var(--main-color); text-transform: uppercase; width: 295px; min-width: 255px; } .j-leftmenu__title__icon { width: 25px; } .j-leftmenu__title__icon div { height: 3px; margin-bottom: 3px; background: #ffffff; border-radius: 3px; } .j-leftmenu__title__icon div:last-child { margin-bottom: 0; } .j-leftmenu__title:hover { background: var(--secondary-color); } .j-leftmenu__img { min-width: 35px; min-height: 35px; margin-left: 5px; position: relative; } .j-leftmenu__img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-leftmenu__count { font-size: .8rem; margin-left: 5px; } .j-leftmenu__content { position: relative; background: #ffffff; border: 1px solid #999; /*min-height: 582px;*/ padding: 0; } .j-leftmenu__ul { top: 0; left: 100%; min-width: 100%; min-height: 100%; margin-left: -1px; padding: 0; position: absolute; background: #ffffff; border: 1px solid #999; box-shadow: inset 0 0 0 1px #999; opacity: 0; visibility: hidden; transform: scaleX(0); transform-origin: top left; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; z-index: 99; } .j-leftmenu__li { display: flex; height: 40px; border: 1px solid #999; border-top: 0; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-leftmenu__li__1:hover > .j-leftmenu__ul, .j-leftmenu__li__2:hover > .j-leftmenu__ul { opacity: 1; visibility: visible; transform: scaleX(1); } .j-leftmenu__li:hover, .j-leftmenu__li--active { border-top-color: transparent; border-bottom-color: transparent; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15); } .j-leftmenu__a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 20px 0 15px; position: relative; } .j-leftmenu__a .icon { color: #000; top: 53%; right: 2px; font-size: 11px; margin-top: -5.5px; position: absolute; } .j-leftmenu__a__inner { display: flex; line-height: 1.2; justify-content: space-between; align-items: center; width: 100%; } } /* layout_sub-categories ------------------------------------------------------------------- */ .j-sub-categories { width: 100%; display: flex; flex-wrap: wrap; } .j-sub-categories__item { display: flex; align-items: center; flex-direction: column; padding: 10px; background: #ffffff; border-radius: 3px; transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } @media (min-width: 701px) { .j-sub-categories__item { margin-top: 10px; width: calc(25% - 7px); } .j-sub-categories__item:nth-child(4n + 1) { margin-right: 10px; } .j-sub-categories__item:nth-child(4n + 2) { margin-right: 10px; } .j-sub-categories__item:nth-child(4n + 3) { margin-right: 10px; } .j-sub-categories__item:nth-child(-n + 4) { margin-top: 0; } } @media (max-width: 700px) { .j-sub-categories__item { width: 100%; margin-top: 10px; } .j-sub-categories__item:first-child { margin-top: 0; } } .j-sub-categories__item:hover { box-shadow: 0 0 0 1px var(--main-color); } .j-sub-categories__img { width: 100%; height: 100px; position: relative; } .j-sub-categories__img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-sub-categories__title { display: block; margin-top: 10px; } /* influence on layout_sub-categories ------------------------------------------------------------------- */ .j-page__index .j-sub-categories { margin-top: 25px; } /* layout_images ------------------------------------------------------------------- */ .j-images__big { height: 350px; position: relative; background: #ffffff; border: 1px solid #999; border-radius: 3px; box-shadow: 0 3px 10px rgb(0 0 0 / 50%); } @media (max-width: 700px) { .j-images__big { height: 200px; } } .j-images__big img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-images__slider { margin-top: 10px; } .j-images__slider__item { height: 100px; display: block; margin: 0 5px; position: relative; background: #ffffff; border: 1px solid #999; border-radius: 3px; } @media (max-width: 800px) { .j-images__slider__item { height: 70px; } } .j-images__slider__item img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; padding: 5px; } .j-images__slider__item.active { border-color: var(--main-color); } .j-images .magnify { width: 100%; height: 100%; } .j-images .magnify-lens { top: 0 !important; left: 100% !important; width: 99% !important; height: 99% !important; margin-top: -1px !important; border: 1px solid #999 !important; border-radius: 3px; } @media (max-width: 1024px) { .j-images .magnify-lens { display: none !important; } } .j-images .fancy-modal:first-child { width: 100%; height: 100%; } /* page order ------------------------------------------------------------------- */ .j-order__table { display: flex; flex-wrap: wrap; width: 100%; padding: 10px; background: #ffffff; border: 1px solid #999; border-bottom: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; } @media (max-width: 800px) { .j-order__table { font-size: 13px; } } @media (max-width: 700px) { .j-order__table { font-size: 14px; } } .j-order__table__wrapper { display: flex; } .j-order__table__row { display: flex; align-items: center; width: 100%; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999; } @media (max-width: 700px) { .j-order__table__row { flex-wrap: wrap; } } .j-order__table__row:last-child { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; } .j-order__table__img { width: 15%; height: 100px; max-height: 100px; position: relative; } .j-order__table__img a { width: 100%; height: 100%; display: block; } .j-order__table__img img { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; } .j-order__table__title { width: 35%; padding-left: 10px; } .j-order__table__title a { font-weight: 500; } .j-order__table__title a:hover { text-decoration: underline; } .j-order__table__price { color: var(--secondary-color); width: 15%; padding-left: 10px; white-space: nowrap; } .j-order__table__count { width: 15%; padding-left: 10px; } .j-order__table__total { width: 15%; font-weight: 500; padding-left: 10px; white-space: nowrap; } .j-order__table__delete { width: 5%; text-align: center; font-size: 16px; } .j-order__table__delete a:hover { color: #e74c3c; } .j-order__table__property { margin-top: 5px; font-size: 13px; } .j-order__table__code { margin-top: 5px; font-size: .8rem; font-weight: 600; color: #333; letter-spacing: .5px; } .j-order__table__column { display: block; } @media (max-width: 700px) { .j-order__table__column { width: 100%; padding: 10px 0; text-align: center; } } .j-order__table__bottom { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px; background: #ffffff; border: 1px solid #999; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } @media (max-width: 700px) { .j-order__table__bottom { flex-wrap: wrap; text-align: center; } } .j-order__table__bottom__total { color: #e74c3c; width: calc(20% - 10px); font-size: 18px; } @media (max-width: 700px) { .j-order__table__bottom__total { width: 100%; } } @media (max-width: 700px) { .j-order__table__bottom__promo { width: 100%; } } .j-order__table__bottom__promo .promo-form { display: flex; align-items: center; } @media (max-width: 700px) { .j-order__table__bottom__promo .promo-form { flex-wrap: wrap; justify-content: center; } } .j-order__table__bottom__promo [type="submit"] { height: 35px; } .j-order__table__bottom [type="text"] { margin: 0 10px; } @media (max-width: 700px) { .j-order__table__bottom [type="text"] { width: 100%; margin: 5px 0 10px 0; } } @media (max-width: 700px) { .j-order__table__bottom [type="submit"] { margin-bottom: 25px; } } .j-order__table__checkout { border-radius: 3px; padding: 5px 10px; float: right; margin: 15px; } .j-order__form { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; } .j-order__form__left, .j-order__form__right { padding: 15px 10px; background: #ffffff; border: 1px solid #999; border-radius: 3px; } .j-order__form__left, .j-order__form__right { width: calc(50% - 10px); } @media (max-width: 700px) { .j-order__form__left, .j-order__form__right { width: 100%; } } @media (max-width: 700px) { .j-order__form__right { margin-top: 20px; } } .j-order__form__bottom { width: 100%; margin-top: 25px; text-align: center; } .j-order__form textarea, .j-order__form [type="text"], .j-order__form [type="email"] { width: 100%; } .j-order__form__title { padding-bottom: 5px; margin-bottom: 10px; font-size: 18px; border-bottom: 1px dotted #999; } .j-order__form__ul { margin-bottom: 20px; } .j-order__form__delivery-date { margin-bottom: 10px; } .j-order__form li { display: flex; align-items: center; margin-bottom: 5px; } .j-order__form li label { margin-bottom: 0; } .j-order__form [class*="icon-payment-"] { margin-top: -10px; } @media (max-width: 800px) { .j-order__form [class*="icon-payment-"] { display: none; } } .j-order__form .rate-payment { margin-left: 5px; font-size: 12px; text-transform: lowercase; } .j-order__form__total { background: #FFF; font-size: 22px; line-height: 22px; font-weight: 500; margin-bottom: 20px; padding: 10px 0; } .ui-datepicker { margin: auto; } /* page product ------------------------------------------------------------------- */ .j-product { display: flex; flex-wrap: wrap; } .j-product__title { width: 100%; } .j-product__gallery { width: 48%; margin: 10px; } @media (max-width: 1048px) { .j-product__gallery { width: 96%; margin: 0 auto; } } .j-product__status { width: 48%; margin: 10px; } @media (max-width: 1048px) { .j-product__status { width: 96%; margin: 0 auto; padding-top: 25px; } } .j-product__tab { width: 100%; padding-top: 25px; } .j-product__block { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } @media (max-width: 700px) { .j-product__block { flex-wrap: wrap; } } @media (max-width: 700px) { .j-product__block__left { width: 100%; } } .j-product__block__right { font-size: 13px; margin-left: 15px; color: #333; } @media (max-width: 700px) { .j-product__block__right { width: 100%; margin-left: 0; margin-top: 10px; text-align: center; } } .j-product__stock { margin: 5px 0; padding: 2px 5px; color: #ffffff; display: inline-block; border-radius: 3px; } .j-product__stock--in { background: #2ecc71; } .j-product__stock--out { background: #f39c12; } .j-product__message { color: #f39c12; margin-bottom: 5px; text-transform: uppercase; background: #FFF; padding: 2px 5px; } .j-product__message:hover { text-decoration: underline; } .j-product__price { line-height: 27px; } @media (max-width: 700px) { .j-product__price { text-align: center; } } .j-product__price__current { color: var(--main-color); font-size: 28px; font-weight: bold; } .j-product__price__old { font-size: 22px; color: #777777; position: relative; } .j-product__price__old:before { left: 0; top: 55%; content: ''; width: 100%; height: 1px; position: absolute; background: #e74c3c; transform: rotate(10deg); } /* page personal ------------------------------------------------------------------- */ .j-personal__orders { margin-left: 5px; font-size: 14px; } .j-personal__orders:before { content: '('; } .j-personal__orders:after { content: ')'; } .j-personal__item { margin-top: 15px; } .j-personal__item:first-child { margin-top: 0; } .j-personal__item--open .j-personal__header .icon { transform: rotate(-90deg); } .j-personal__header { display: flex; justify-content: space-between; align-items: center; height: 50px; padding: 0 10px; cursor: pointer; background: #ffffff; border: 1px solid #999; border-radius: 3px; } @media (max-width: 700px) { .j-personal__header { flex-wrap: wrap; height: auto; padding: 5px 10px; } } .j-personal__header__left, .j-personal__header__right { display: flex; align-items: center; } @media (max-width: 700px) { .j-personal__header__left, .j-personal__header__right { width: 100%; padding: 5px 0; justify-content: space-between; } } .j-personal__header__number { width: 160px; font-weight: 500; } .j-personal__header__date { color: #777777; padding-left: 10px; } .j-personal__header__status { width: 140px; padding: 3px 0; color: #ffffff; margin-right: 15px; text-align: center; border-radius: 3px; } .j-personal__header__status.dont-confirmed { background: #999999; } .j-personal__header__status.get-paid, .j-personal__header__status.in-delivery, .j-personal__header__status.processed { background: #f39c12; } .j-personal__header__status.paid, .j-personal__header__status.performed { background: #2ecc71; } .j-personal__header__status.dont-paid { background: #e74c3c; } .j-personal__header .icon { transition-property: all; transition-duration: 0.3s; transition-timing-function: ease; } .j-personal__header:hover { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15); } .j-personal__body { display: none; padding: 10px; margin-top: -2px; font-size: 13px; background: #ffffff; border: 1px solid #999; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .j-personal__table__row { display: flex; align-items: center; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px dotted #999; } @media (max-width: 700px) { .j-personal__table__row { flex-wrap: wrap; } } .j-personal__table__title { width: 50%; font-weight: 500; } .j-personal__table__subtitle { font-weight: 400; font-size: 12px; color: #777777; } .j-personal__table__code { width: 10%; } .j-personal__table__price { width: 15%; } .j-personal__table__count { width: 10%; } .j-personal__table__total { width: 15%; font-weight: 500; } .j-personal__table__column { display: block; } @media (max-width: 700px) { .j-personal__table__column { width: 100%; padding: 5px 0; } } .j-personal__bottom { display: flex; justify-content: space-between; } @media (max-width: 700px) { .j-personal__bottom { flex-wrap: wrap; } } .j-personal__bottom__left { width: 60%; padding-right: 25px; } @media (max-width: 700px) { .j-personal__bottom__left { width: 100%; padding-right: 0; } } .j-personal__bottom__right { width: 40%; } @media (max-width: 700px) { .j-personal__bottom__right { width: 100%; margin-top: 10px; } } .j-personal__bottom__row { display: flex; padding: 10px 0; border-bottom: 1px dotted #999; } .j-personal__bottom__row:last-child { border-bottom: 0; } .j-personal__bottom__title { width: 62%; } @media (max-width: 700px) { .j-personal__bottom__title { width: 50%; } } .j-personal__bottom__value { width: 38%; font-weight: 500; } @media (max-width: 700px) { .j-personal__bottom__value { width: 50%; } } .j-personal__bottom__total { text-transform: uppercase; } .j-personal__bottom__price { color: #e74c3c; font-size: 16px; } .j-personal__manager { margin-right: 25px; } .j-personal__download { font-size: 16px; margin-top: 10px; display: inline-block; } .j-personal__download .icon { margin-right: 5px; } .j-personal__download:hover { color: #f39c12; } /* page static ------------------------------------------------------------------- */ .j-page__static .j-static { /* padding: 10px; background: #ffffff; border-radius: 3px; */ } .j-page__static .j-static p { line-height: 22px; padding: 10px 20px 20px; } /* footer ------------------------------------------------------------------- */ .footer { background: linear-gradient(135deg, #1AA094, #43CD80); border-top: 1px dashed; } @media (min-width: 700px) { .footer { margin-bottom: 0; } } @media (max-width: 700px) { .footer { margin-bottom: 0; } } .footer li, .product-status-list li, .create-user-account-form li, .js_phoneDropdown li, .js_mobileMenuDropdow, .form-list li, .sum-list li, .total li, .js_flyCart.js_flyCartShow li, .pr-main-menu li, .fast-result-list li, .payment-details-list li, .total-list li, .sub-categories li, .pr-filter-body li, .product-status-list li, .price-slider-list li, .fast-result-list li, .filter-values li, .filter-tags li, .small-cart-list li, .total-sum li, .cart-list li { list-style: none; } .contacts-footer { display: flex; flex-direction: column; justify-content: center; } @media (max-width: 1199px) { .contacts-footer { display: flex; flex-direction: row; justify-content: center; min-width: 520px; margin: 0 auto; } } @media (max-width: 961px) { .contacts-footer { display: flex; flex-direction: column; justify-content: center; min-width: 320px; } } @media (max-width: 671px) { .contacts-footer { display: flex; flex-direction: column; justify-content: center; min-width: 0; } } .link-my { font-size: 14px; border-bottom: 1px dashed #fff; } .link-my:hover { border-bottom: none; } .max-w320 { max-width: 320px; } /* rating ------------------------------------------------------------------- */ .rating__row { background: #FFF; padding: 3px 5px 0; } @media (max-width: 700px) { .rating__row { margin: 0 auto; } } .pr-rating-count { display: none; } .rating-wrapper { width: 80px; margin: 0 auto; } /* card hover ------------------------------------------------------------------- */ .card { border: 1px solid #999; border-radius: 10px; box-shadow: 0 2px 4px rgb(0 0 0 / 40%); position: relative; width: 300px; height: 300px; } .card__front { z-index: 1; position: relative; background-color: #FFF; height: 100%; text-align: center; backface-visibility: hidden; transition: transform .3s cubic-bezier(.2, .85, .4, 1.275); } .card__back { z-index: 0; position: absolute; left: 0; top: 0; width: 99%; height: 99%; text-align: center; backface-visibility: hidden; background-color: #f5f5ff; transform: rotateY(-180deg); transition: transform .3s cubic-bezier(.2, .85, .4, 1.275); border-radius: 5px; padding: 5px; } .card:hover .card__back { transform: rotateY(0deg); z-index: 2; } .card:hover .card__front { transform: rotateY(180deg); z-index: -1; } .j-goods__right_link, .j-goods__buttons { z-index: 3; } /* page katalogi ------------------------------------------------------------------- */ .link-download-pdf { background: rgba(0, 0, 0, .7); border-radius: 10px 10px 0 0; font-size: 10px; font-weight: 500; letter-spacing: .5px; text-decoration: underline; border: none; padding: 5px 15px; } .link-download-pdf > span { color: #FFF; } .link-download-pdf > span:hover { color: #FF4747; } /* page brendy ------------------------------------------------------------------- */ .filter-brands-all { color: var(--secondary-color); } #brand-page a { text-decoration: none; border-bottom: 1px dashed; } #brand-page p { background: #F5F5FF; border: 2px solid #666; border-radius: 50%; width: 30px; height: 29px; padding: 2px 7px; text-align: center; } .top-brands-name { margin-bottom: 20px; } .brand-bloc { margin-bottom: 20px; } /* page feedback ------------------------------------------------------------------- */ .pade-desc { background: rgba(255, 255, 255, 0.9); margin-bottom: 10px; } .feedback-form-wrapper { background: rgba(255, 255, 255, 0.9); margin-bottom: 20px; padding: 15px; max-width: 300px; } .feedback-form-wrapper .send { border: 1px solid #999; border-radius: 5px; padding: 2px 10px 5px; } /* footer ------------------------------------------------------------------- */ .j-footer { background-color: rgba(68, 68, 68, 0.9); position: fixed; bottom: 0; width: 100%; z-index: 100; } .j-footer .j-container { padding-top: 15px; padding-bottom: 15px; } .j-footer__row { display: flex; justify-content: space-between; color: #ffffff; } @media (max-width: 700px) { .j-footer__row { flex-direction: column; } } .j-footer__phone { font-size: 16px; justify-content: flex-end; } @media (max-width: 700px) { .j-footer__phone { margin-top: 10px; } } .j-footer__phone .icon { font-size: 20px; margin-right: 10px; } .j-footer__column { display: flex; align-items: center; width: 50%; } @media (max-width: 700px) { .j-footer__column { width: 100%; justify-content: center; margin-bottom: 3px; } } .j-footer__phone a { color: #FFF; font-weight: 500; line-height: 2; opacity: 1; } .j-footer__phone a:hover { opacity: 0.7; } /* to top ------------------------------------------------------------------- */ .j-to-top { display: flex; align-items: center; justify-content: center; width: 100px; height: 50px; right: 0; bottom: 10%; position: fixed; z-index: 9; cursor: pointer; color: #ffffff; background: var(--main-color); box-shadow: 0 5px 10px rgba(218, 218, 218, 0.5); text-transform: uppercase; border-top-left-radius: 3px; border-bottom-left-radius: 3px; visibility: hidden; } .j-to-top--show { visibility: visible; } @media (max-width: 700px) { .j-to-top { width: 70px; height: 30px; font-size: 12px; } } .j-to-top:hover { background: var(--secondary-color); } .j-to-top:active { -ms-transform: translateY(3px); transform: translateY(3px); } /* scroll ------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { border-radius: 3px; background: #cbcbcb; } ::-webkit-scrollbar-thumb { border-radius: 3px; background: #a4a4a4; } /* frame ------------------------------------------------------------------- */ .fr-w96 { width: 96%; } .fr-h400 { max-height: 400px; } /* description page ------------------------------------------------------------------- */ .c-description__txt { display: flex; flex-direction: column; align-items: center; font-size: 1rem; line-height: 1.6; } /* block-auto ------------------------------------------------------------------- */ .block-auto { margin: 0 auto; } .pl10 { padding-left: 10px; } .tm-link-to-all { padding-bottom: 5px; } /* contacts page ------------------------------------------------------------------- */ .contact_phone, .contact_email { color: var(--main-color); } .contact_phone:hover, .contact_email:hover { color: var(--secondary-color); } /* compare page ------------------------------------------------------------------- */ .icon--trash { margin: 2px 0 0 7px; } .j-goods__image { display: block; height: 100%; width: fit-content; } .pr-compare-product .j-goods__image img { border: 1px solid #999; max-height: 200px; } /* button cart ------------------------------------------------------------------- */ .addToCart i { margin-top: 5px; } /* погода ------------------------------------------------------------------- */ #ml_6038ac13 { width: 100% !important; } /* ---------------------- * ## Нижний Footer * ------------------------ */ .l-footer { font-size: 1rem; } .l-footer > .l-container > .l-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 2rem 1rem; } .c-copyright { display: flex; flex-direction: row; align-items: center; } .c-copyright__pulsar { float: right; }