/* BUTTON MIXIN ============================================= */ .search a, .product-to_compare + span, .product-to_compares + span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .footer-top .phone i::after, .footer-top .socials a i::after, .search a i::after, .just-call a:nth-of-type(1) i::after, .favorite i::after, .basket i::after, .balance i::after, .socials a i::after, .product-to_basket span, .swiper-header .swiper-button-next:before, .swiper-header .swiper-button-prev::before, .swiper-banners .swiper-button-next::after, .swiper-banners .swiper-button-prev::after, .swiper-product .swiper-button-next::after, .swiper-product .swiper-button-prev::after, .swiper-banners .swiper-button-next::before, .swiper-banners .swiper-button-prev::before, .swiper-product .swiper-button-next::before, .swiper-product .swiper-button-prev::before { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .specials > .special, .swiper-header__item { background-repeat: no-repeat; background-position: center; background-size: cover; } .section-basket .product-to_favorite__thin i, .news-link i { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } a, .section-search .searching input, .section-search .searching button, .section-categories .categories .card ul li a, .footer-top .phone i::after, .footer-top .socials a i::after, .my-btn__white i, .my-btn, .search input, .socials a i::after, .swatch, .accordion .card h2, .catalog-on-mobile .outer-ul > li > i::before, .catalog-on-mobile .inner-ul, .added-to-basket, .now-no-product button, .my-form label, .my-form input, .my-form select, .my-form textarea, .category-item__logo, .category-item__title, .special-link i, .product-buttons button, .popular_category--item__img img, .news-img img, .sections-item__img img, .swiper-header .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-banners .swiper-button-next::after, .swiper-banners .swiper-button-prev::after, .swiper-product .swiper-button-next::after, .swiper-product .swiper-button-prev::after, .swiper-banners .swiper-button-next::before, .swiper-banners .swiper-button-prev::before, .swiper-product .swiper-button-next::before, .swiper-product .swiper-button-prev::before { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } @-webkit-keyframes mover { 0% { -webkit-transform: translateY(2px) scale(0.99); transform: translateY(2px) scale(0.99); } 100% { -webkit-transform: translateY(-10px) scale(1); transform: translateY(-10px) scale(1); } } @keyframes mover { 0% { -webkit-transform: translateY(2px) scale(0.99); transform: translateY(2px) scale(0.99); } 100% { -webkit-transform: translateY(-10px) scale(1); transform: translateY(-10px) scale(1); } } @-webkit-keyframes mover2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes mover2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes mover3 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } @keyframes mover3 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(10px); transform: translateY(10px); } } html { scroll-behavior: smooth !important; } * { outline: none !important; } *::-moz-selection { background-color: #ff621a; color: white; } *::selection { background-color: #ff621a; color: white; } .btn.focus, .btn:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; } button:focus { outline: none !important; outline: 0 auto -webkit-focus-ring-color; } .form-control:focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, .input-group > .custom-select:focus, .input-group > .form-control:focus { z-index: 0; } .btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show > .btn-dark.dropdown-toggle:focus { -webkit-box-shadow: 0; box-shadow: 0; } a { text-decoration: none; color: inherit; } a:hover { text-decoration: none; color: inherit; } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1200px; } } body.menu-active { position: absolute; overflow: hidden; width: 100%; height: 100%; } body { background-color: #fff !important; font-family: "ProximaNova", Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; } html { position: relative; height: 100%; } .section-title { font-size: 36px; font-weight: normal; color: #222222; } @media only screen and (max-width: 767px) { .section-title { font-size: 32px; } } .section-title a:hover { color: #ff621a; text-decoration: underline; } .section-title-small { font-size: 20px; font-weight: 600; color: #1a1a1a; line-height: 1.333; text-align: left; } /* Fonts */ @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Thin.eot"); src: local("Proxima Nova Thin"), local("ProximaNova-Thin"), url("../fonts/ProximaNova/ProximaNova-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Thin.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Light.eot"); src: local("Proxima Nova Light"), local("ProximaNova-Light"), url("../fonts/ProximaNova/ProximaNova-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Light.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Regular.eot"); src: local("Proxima Nova Regular"), local("ProximaNova-Regular"), url("../fonts/ProximaNova/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Regular.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Semibold.eot"); src: local("Proxima Nova Semibold"), local("ProximaNova-Semibold"), url("../fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Semibold.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Semibold.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Bold.eot"); src: local("Proxima Nova Bold"), local("ProximaNova-Bold"), url("../fonts/ProximaNova/ProximaNova-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Bold.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Extrabld.eot"); src: local("Proxima Nova Extrabold"), local("ProximaNova-Extrabld"), url("../fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Extrabld.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Extrabld.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { font-family: "ProximaNova"; src: url("../fonts/ProximaNova/ProximaNova-Black.eot"); src: local("Proxima Nova Black"), local("ProximaNova-Black"), url("../fonts/ProximaNova/ProximaNova-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova/ProximaNova-Black.woff") format("woff"), url("../fonts/ProximaNova/ProximaNova-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; } .topbar > div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .topbar-top .container, .topbar-bottom .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .topbar-top { border-bottom: 1px solid #00000015; padding: 12px 0; } @media only screen and (max-width: 1023px) { .topbar-top { border-bottom-color: transparent; position: absolute; background-color: #fff; top: 0; left: 0; z-index: 555; -webkit-transition: 0.2s -webkit-transform ease-out; transition: 0.2s -webkit-transform ease-out; transition: 0.2s transform ease-out; transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out; -webkit-transform: translateX(0px); transform: translateX(0px); left: -100%; width: 84%; padding-top: 18px; padding-bottom: 18px; } .topbar-top-active { -webkit-transform: translateX(118%); transform: translateX(118%); } } @media only screen and (max-width: 767px) { .topbar-top .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .topbar-top__left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 767px) { .topbar-top__left { width: 100%; padding: 0 15px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; height: 65px; background-color: #fff; } } .topbar-top__left .lang { font-size: 18px; } .topbar-top__left .lang-list { left: -6px; text-align: center; } .topbar-top__right a { font-size: 14px; font-weight: normal; text-align: right; color: black; } .topbar-top__right a:not(:last-of-type) { margin-right: 15px; } @media only screen and (max-width: 767px) { .topbar-top__right a:not(:last-of-type) { margin-right: 5px; } } .topbar-top__right a:hover { color: #ff621a; text-decoration: underline; } .topbar-top .just-call i { color: #333 !important; } .topbar-top .just-call i::after { display: none; } .topbar-bottom { padding: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1023px) { .topbar-bottom .container { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .topbar-bottom .container > * { margin-right: 40px; } } @media only screen and (max-width: 767px) { .topbar-bottom .container > * { margin-right: 20px; } } @media only screen and (max-width: 320px) { .topbar-bottom .container > * { margin-right: 3px; } } .topbar-bottom .sign-in { position: absolute; right: 40px; } .topbar-bottom .sign-in img { width: 27px; height: 27px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .topbar-bottom--bottom { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; margin-left: auto !important; margin-right: auto !important; position: absolute; z-index: 222; bottom: 0px; width: 84%; background: white; -webkit-transition: 0.2s -webkit-transform ease-out; transition: 0.2s -webkit-transform ease-out; transition: 0.2s transform ease-out; transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out; -webkit-transform: translateX(0px); transform: translateX(0px); left: -108%; padding: 10px 15px; } .topbar-bottom--bottom-active { -webkit-transform: translateX(127%); transform: translateX(127%); } .topbar .navbar-toggler { margin: 0 !important; padding: 0 !important; position: absolute; right: 15px; z-index: 122; -webkit-transition: unset; transition: unset; } @media only screen and (min-width: 1024px) { .topbar .navbar-toggler { display: none; } } @media only screen and (min-width: 1024px) { header { margin-top: 6px; } } .section-category { padding: 40px 0 40px; } @media only screen and (max-width: 767px) { .section-category { padding: 30px 0px; } } .section-special { padding: 0px 0 50px; } @media only screen and (max-width: 767px) { .section-special { padding-bottom: 30px; } } @media only screen and (max-width: 767px) { .section-products { padding: 0px 0 30px; } } .section-bonus { padding: 20px 0 20px; } @media only screen and (max-width: 767px) { .section-bonus .container { padding: 0; } } .section-popular_category { padding: 20px 0 20px; } .section-news { padding: 0px 0 40px; } @media only screen and (max-width: 1247px) { .section-news { padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .section-news .section-title { position: relative; z-index: 22; } } .section-news .outer-row, .section-news .inner-row { margin-left: -8px; margin-right: -8px; } .section-news .outer-row > div, .section-news .inner-row > div { padding-left: 8px; padding-right: 8px; } .section-news .swiper-product { padding-left: 15px; padding-right: 15px; } @media only screen and (min-width: 768px) { .section-news .outer-row > div:first-of-type .news { position: relative; height: 100%; background-color: transparent; -webkit-box-shadow: unset; box-shadow: unset; z-index: 2; } .section-news .outer-row > div:first-of-type .news-img { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: -1; } .section-news .outer-row > div:first-of-type .news-content { background-color: transparent; position: relative; z-index: 2; padding: 30px; } .section-news .outer-row > div:first-of-type .news-date { font-size: 16px; font-weight: normal; color: #fff; line-height: 1.625; } .section-news .outer-row > div:first-of-type .news-link { padding: 12px 15px; width: 170px; margin-top: 20px; display: inline-block; border-style: solid; border-width: 2px; border-color: white; background-color: rgba(203, 86, 42, 0); font-size: 16px; border-radius: 25.5px; font-weight: normal; color: white; line-height: 1; text-align: center; } .section-news .outer-row > div:first-of-type .news-link i { font-size: 14px; } .section-news .outer-row > div:first-of-type .news-link:hover { color: white; background-color: rgba(255, 255, 255, 0.15); } .section-news .outer-row > div:first-of-type .news-link:hover i { -webkit-transform: translateX(5px); transform: translateX(5px); } .section-news .outer-row > div:first-of-type .news-title { width: 72%; margin-top: 15px; font-size: 20px; font-weight: 600; color: #fff; line-height: 1.5; -webkit-line-clamp: 3; height: 90px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .section-news .outer-row > div:first-of-type .news-title a:hover { text-decoration: none; color: white; } .section-news .outer-row > div:first-of-type .news:hover a { text-decoration: none; color: white; } .section-news .outer-row > div:first-of-type .news-subtitle { display: none; } .section-news .outer-row > div:first-of-type .news::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-image: repeating-linear-gradient(180deg, rgba(34, 34, 34, 0.65) 0, rgba(34, 34, 34, 0) 70%, rgba(34, 34, 34, 0) 100%); z-index: 1; } } .section-favorite, .section-basket { padding: 0 0 30px; } .section-favorite .product-img, .section-basket .product-img { margin-top: 0; margin-bottom: 0; } .section-favorite .product .old-price, .section-basket .product .old-price { font-size: 18px; } .section-favorite .product-img, .section-basket .product-img { height: 150px; } .section-favorite .product-buttons, .section-basket .product-buttons { margin-bottom: 0; } @media only screen and (max-width: 1247px) { .section-favorite .product-buttons, .section-basket .product-buttons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .section-favorite .product-balance_link, .section-basket .product-balance_link { position: relative; width: 120px; display: inline-block; } .section-favorite .product-to_cart, .section-basket .product-to_cart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 65%; } @media only screen and (max-width: 1247px) { .section-favorite .product-to_cart, .section-basket .product-to_cart { width: 100%; } } .section-favorite .product-to_delete, .section-basket .product-to_delete { width: 30%; z-index: 11; } @media only screen and (max-width: 1247px) { .section-favorite .product-to_delete, .section-basket .product-to_delete { width: 100%; margin-top: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (max-width: 1023px) { .section-favorite .product-to_delete, .section-basket .product-to_delete { width: auto; margin-top: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .section-favorite .product-price, .section-basket .product-price { height: 100%; } .section-basket .product-price_and_checkout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .section-basket .product-price-by-count { margin-bottom: 10px; } @media only screen and (max-width: 1023px) { .section-basket .product-buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .section-basket .product-to_favorite__thin { border-radius: 0; background-color: transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: auto; height: auto !important; text-align: left; } .section-basket .product-to_favorite__thin i { color: #ff621a; font-size: 24px; } .section-basket .product-to_favorite__thin span { margin-left: 8px; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.5; } .section-basket .product-to_favorite__thin.is-active .far { font-weight: 900; } @media only screen and (max-width: 1023px) { .section-basket .product-to_delete { margin-top: 0; } } .section-basket .v-line { position: absolute; right: 115px; -webkit-transform: scaleY(4) translateX(-7px) translateY(-1px); transform: scaleY(4) translateX(-7px) translateY(-1px); } .section-basket .basket__footer { margin-top: 50px; margin-bottom: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 1023px) { .section-basket .basket__footer { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media only screen and (max-width: 767px) { .section-basket .basket__footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 30px; margin-bottom: 30px; } } .section-basket .basket__footer--right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1023px) { .section-basket .basket__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media only screen and (max-width: 767px) { .section-basket .basket__footer--right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .section-basket .product-price { height: 100%; } .section-sections { padding: 0 0 30px; } .section-checkout { padding: 0; } .section-news-all { padding: 0 0 30px; } @media only screen and (min-width: 768px) { .section-news-all .news-img { height: 100%; } } @media only screen and (min-width: 768px) { .section-news-all .news-content { height: 100%; padding-left: 0; } } .section-news-all .news-title { color: #ff621a; font-size: 24px; -webkit-line-clamp: 2; height: 65px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .section-news-all .news-subtitle { -webkit-line-clamp: 4; height: 75px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; } .section-news-all .news-widget { margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-news-all .news-seen { font-size: 14px; font-weight: normal; color: rgba(34, 34, 34, 0.702); } .section-news-all .news-date { margin-left: 10px; margin-bottom: 0; } .section-news-all .news-link { margin-top: 10px; } .section-news-item { padding: 0 0 30px; } .section-news-item .news-item-widget { margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-news-item .news-item-seen, .section-news-item .news-item-date { font-size: 14px; font-weight: normal; color: rgba(34, 34, 34, 0.702); } .section-news-item .news-item-date { margin-left: 15px; } .section-news-item .news-item-content p, .section-news-item .news-item-content ul, .section-news-item .news-item-content ul li, .section-news-item .news-item-content ol, .section-news-item .news-item-content ol li, .section-news-item .news-item-content table, .section-news-item .news-item-content table tr, .section-news-item .news-item-content table td, .section-news-item .news-item-content table th, .section-news-item .news-item-content table tr td, .section-news-item .news-item-content table tr th { font-size: 16px; font-weight: normal; color: black; line-height: 1.5; } .section-news-item .news-item-content iframe, .section-news-item .news-item-content video, .section-news-item .news-item-content embed { max-width: 100%; display: block; text-align: center; margin: 20px auto; } .section-news-item .news-item-content img { height: auto; max-width: 100%; display: block; text-align: center; margin: 20px auto; } .section-news-item .news-item-content a { font-size: 16px; font-weight: normal; color: black; line-height: 1.5; text-decoration: underline; } .section-news-item .news-item-content a:hover { color: #ff621a; } .section-news-item .news-item-content table td, .section-news-item .news-item-content table th { min-width: 200px; } .section-news-item .news-item-content table td:first-of-type, .section-news-item .news-item-content table th:first-of-type { min-width: 50px; } .section-news-item .news-item .socials { margin-left: 8px; } @media only screen and (max-width: 767px) { .section-news-item + .section-products .swiper-product { padding-left: 15px; padding-right: 15px; } } .section-product-item { padding: 0 0 30px; } .section-product-item .product-cart { position: relative; -webkit-box-shadow: unset; box-shadow: unset; padding: 0; } .section-product-item .product-cart .product-buttons { position: absolute; right: 15px; top: 10px; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section-product-item .product { -webkit-box-shadow: unset; box-shadow: unset; } @media only screen and (max-width: 767px) { .section-product-item .product { padding-left: 0; padding-right: 0; } } .section-product-item .product-count { margin-bottom: 10px; margin-right: 20px; } .section-product-item .product-info p { font-size: 16px; font-weight: normal; color: black; line-height: 1.313; } .section-product-item .product-title { font-size: 30px; } @media only screen and (max-width: 767px) { .section-product-item .product-title { font-size: 24px; } } .section-product-item .product-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media only screen and (max-width: 767px) { .section-product-item .product-price { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .section-product-item .product-price .new-price { color: #ff621a; font-size: 30px; margin-right: 20px; } @media only screen and (max-width: 767px) { .section-product-item .product-price .new-price { font-size: 24px; } } .section-product-item .product-price .old-price { font-size: 24px; font-weight: 600; color: #a8a8a8; font-size: 24px; margin-bottom: 0; } @media only screen and (max-width: 767px) { .section-product-item .product-price .old-price { font-size: 20px; } } @media only screen and (max-width: 767px) { .section-product-item .product-color { margin-right: 0px; width: 100%; } } .section-product-item .product-buttons { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .section-product-item .product-buttons .product-to_basket { height: 50px; padding: 10px; min-width: 150px; border-radius: 27.5px; margin-right: 15px; } .section-product-item .product-buttons .product-to_basket span { font-size: 18px; } .section-product-item .product-buttons .product-to_basket i { font-size: 22px; } @media only screen and (max-width: 767px) { .section-product-item .product-buttons .product-to_basket { margin-right: 0px; width: 100%; margin-top: 10px; } } .section-product-item .product-buttons .btn-links { height: 50px; } .section-product-item .product-buttons .btn-links:first-of-type { margin-right: 15px; } @media only screen and (max-width: 767px) { .section-product-item .product-buttons .btn-links:first-of-type { margin-right: 0px; } } @media only screen and (max-width: 767px) { .section-product-item .product-buttons .btn-links { margin-right: 0px; margin-left: 0px; margin-top: 20px; } } @media only screen and (max-width: 767px) { .section-product-item .product-buttons { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .section-product-item .product-buttons .btn-links { width: 100%; } } .section-product-item .socials { margin-left: 8px; } .section-product-item .payments p { font-size: 16px; font-weight: bold; color: black; line-height: 1.313; } .section-product-item .payments span { font-size: 16px; font-weight: 600; color: #787878; line-height: 1.5; text-align: left; z-index: 118; } .section-order-history { padding: 0 0 30px; } .section-order-history .sum-of-products { margin-right: 0; } .section-order-history .sum-of-products h3, .section-order-history .sum-of-products h5 { text-align: right; } .section-order-history table tbody tr td { min-width: 150px; text-align: left; font-size: 16px; font-weight: normal; color: #222222; line-height: 1.333; } .section-order-history table tbody tr td:nth-of-type(2) { text-align: center; } .section-order-history table thead tr th { min-width: 150px; text-align: left; font-size: 18px; font-weight: 600; color: #222222; line-height: 1.333; } .section-order-history table thead tr th:nth-of-type(2) { text-align: center; } .section-order-history .order-history__date { font-size: 18px; font-weight: normal; color: #222222; line-height: 2; } .section-order-history .order-history__number { font-size: 22px; font-weight: bold; color: #ff6319; line-height: 2; } .section-order-history .order-history__list { margin-bottom: 20px; } .section-order-history .order-history__list ul { margin: 0; padding: 0; list-style-type: none; } .section-order-history .order-history__list ul li { font-size: 16px; font-weight: normal; color: #222222; line-height: 1.667; } .section-order-history .accordion { margin-top: 40px; } .section-order-history .accordion .card { margin-bottom: 20px; } .section-order-history .accordion .card h2 { font-size: 18px; } .section-search { padding: 0 0 30px; } .section-search .product-img { margin-top: 0; margin-bottom: 0; } .section-search .product .old-price { font-size: 18px; } .section-search .product-img { height: 150px; } .section-search .product-buttons { margin-bottom: 0; } @media only screen and (max-width: 1247px) { .section-search .product-buttons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media only screen and (min-width: 1248px) { .section-search .product-price { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } .section-search .product-to_cart { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } @media only screen and (max-width: 1247px) { .section-search .product-to_cart { width: 100%; } } .section-search .searching { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .section-search .searching input { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; margin-right: 20px; border-style: solid; border-width: 1px; border-color: rgba(0, 0, 0, 0.2); background-color: transparent; height: 50px; padding: 8px 25px 8px 35px; border-radius: 25px; font-size: 16px; font-weight: normal; color: black; } .section-search .searching input::-webkit-input-placeholder { color: black; } .section-search .searching input::-moz-placeholder { color: black; } .section-search .searching input:-ms-input-placeholder { color: black; } .section-search .searching input::-ms-input-placeholder { color: black; } .section-search .searching input::placeholder { color: black; } .section-search .searching input:focus { border-color: #ff621a; } @media only screen and (max-width: 767px) { .section-search .searching input { width: 100%; margin-right: 0; padding-left: 15px; padding-right: 15px; } } .section-search .searching button { font-size: 16px; font-weight: normal; color: black; height: 50px; background-color: #efefef; border-radius: 25px; padding: 8px 25px 8px 25px; border: 1px solid #efefef; } .section-search .searching button i { margin-right: 5px; } @media only screen and (max-width: 767px) { .section-search .searching button span { display: none; } } @media only screen and (min-width: 768px) { .section-search .searching button:hover, .section-search .searching button:active, .section-search .searching button:focus { background-color: #ff621a; border-color: #ff621a; color: white; } } @media only screen and (max-width: 767px) { .section-search .searching button { position: absolute; right: -5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; border-color: transparent; width: 35px; height: 35px; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 11; } .section-search .searching button i { position: relative; color: white; font-size: 14px; } .section-search .searching button i::after { content: ""; position: absolute; width: 35px; height: 35px; background-color: #ff621a; z-index: -1; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } .section-categories { padding: 0 0 30px; } .section-categories .product { padding: 10px; } .section-categories .product-top { left: 10px; } @media only screen and (min-width: 768px) { .section-categories .row-outer > div:last-of-type { padding-left: 0; } } .section-categories .row-inner { margin-left: -8px; margin-right: -8px; } .section-categories .row-inner > div { padding-left: 8px; padding-right: 8px; } .section-categories .categories { background-color: white; -webkit-box-shadow: 0px 3px 27px 3px rgba(5, 8, 9, 0.05); box-shadow: 0px 3px 27px 3px rgba(5, 8, 9, 0.05); border-radius: 0; padding: 5px 15px; z-index: 11; } .section-categories .categories .card { padding-bottom: 10px; border: 0; border-bottom: 1px solid rgba(34, 34, 34, 0.2); border-radius: 0; } .section-categories .categories .card-link { position: relative; cursor: pointer; } .section-categories .categories .card-link::after { position: absolute; right: 10px; top: 65%; font-size: 14px; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: "\f077"; font-family: "Font Awesome 5 Pro"; font-weight: normal; } .section-categories .categories .card-link.collapsed::after { content: "\f078"; } .section-categories .categories .card-header { border-bottom: 0; padding: 0; border-radius: 0; background-color: transparent; } .section-categories .categories .card-header a { display: block; font-size: 16px; font-weight: bold; color: #222222; padding-top: 15px; line-height: 1; padding-bottom: 5px; padding-right: 15px; } .section-categories .categories .card-body { margin: 0; padding: 0; border-radius: 0; border: 0; } @media only screen and (max-width: 767px) { .section-categories .categories .card-body { margin-right: 30px; } } .section-categories .categories .card-content { padding: 5px 5px 0 0px; margin-bottom: 5px; max-height: 335px; overflow-y: auto; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } .section-categories .categories .card-content::-webkit-scrollbar { width: 4px; height: 4px; } .section-categories .categories .card-content::-webkit-scrollbar-track { background-color: rgba(181, 189, 204, 0.329); } .section-categories .categories .card-content::-webkit-scrollbar-thumb { background-color: #b5bdcc; } .section-categories .categories .card-content::-webkit-scrollbar-thumb:hover { background-color: #b5bdcc; } @media only screen and (min-width: 768px) { .section-categories .categories .card-content.category { max-height: 335px; } .section-categories .categories .card-content.catagory-aksiya { max-height: 90vh; } .section-categories .categories .card-content.brand { max-height: 145px; } .section-categories .categories .card-content.country { max-height: 335px; } .section-categories .categories .card-content.color { max-height: 150px; } .section-categories .categories .card-content.type { max-height: 150px; } } .section-categories .categories .card ul { margin: 0; padding: 0; list-style-type: none; } .section-categories .categories .card ul li { list-style-type: none; } .section-categories .categories .card ul li a { font-size: 14px; font-weight: normal; color: #222222; line-height: 1.2; display: block; padding-top: 5px; padding-bottom: 5px; } .section-categories .categories .card ul li a:hover, .section-categories .categories .card ul li a.active { color: #ff621a; } .section-categories .categories .custom-control label { cursor: pointer; font-size: 14px; font-weight: normal; color: #222222; display: block; } .section-categories .categories .custom-control-label::before, .section-categories .categories .custom-control-label::after { top: 0.15rem; } .section-categories .categories .custom-control .custom-control-input:focus ~ .custom-control-label::before { -webkit-box-shadow: none; box-shadow: none; } .section-categories .categories .custom-control .custom-control-input:checked ~ .custom-control-label::before { background-color: #ff621a; border-color: #ff621a; } .section-categories .categories .custom-control .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #adb5bd; } .section-categories .categories .custom-control .custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #fff; background-color: #fff; border-color: #adb5bd; } .section-categories .categories .my-btn { display: block; width: 100%; font-size: 16px; font-weight: 600; color: white; line-height: 1; text-align: center; } .section-categories .categories .my-btn__apply { background-color: #ff621a; } .section-categories .categories .my-btn__cancel { background-color: #fff; color: black; border-color: rgba(0, 0, 0, 0.5); } .aksiya { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px -12.5px; } .aksiya .product { margin: 15px 12.5px; width: 100%; } @media only screen and (min-width: 560px) { .aksiya .product { width: 45%; } } @media only screen and (min-width: 768px) { .aksiya .product { width: 29.6%; } } @media only screen and (min-width: 1024px) { .aksiya .product { width: 22.2%; } } @media only screen and (min-width: 1248px) { .aksiya .product { width: 17.85%; } } .section-aksiya + .section-categories { padding-top: 30px; } @media only screen and (max-width: 1023px) { .section-aksiya + .section-categories { padding-top: 0px; } } @media only screen and (max-width: 767px) { .section-aksiya + .section-categories { position: relative; } .section-aksiya + .section-categories .section-title { padding-bottom: 90px; } .section-aksiya + .section-categories .catalog-on-mobile { top: 50px; width: 94%; margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 560px) { .no-product-section { min-height: 45vh; } } @media only screen and (min-width: 768px) { .no-product-section { min-height: 55vh; } } @media only screen and (min-width: 1024px) { .no-product-section { min-height: 60vh; } } @media only screen and (min-width: 1248px) { .no-product-section { min-height: 40vh; } } @media only screen and (min-width: 1440px) { .no-product-section { min-height: 46vh; } } @media only screen and (min-width: 2500px) { .no-product-section { min-height: 70vh; } } .section-404 { padding: 50px 0; } .section-404 .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section-404 svg { max-width: 100%; } .section-404 h2 { font-size: 24px; text-transform: uppercase; -webkit-transform: translateY(30px); transform: translateY(30px); } .section-404 a { background: #ff621a; border-radius: 10px; padding: 10px 20px; color: white; font-weight: 600; text-transform: uppercase; font-size: 18px; letter-spacing: 2px; -webkit-transform: translateY(-40px); transform: translateY(-40px); } .section-404 a i { margin-right: 5px; } .footer { background-color: #efefef; padding: 30px 0 30px; } @media only screen and (max-width: 767px) { .footer-top .logo { text-align: center; } } .footer-top .phone { margin-left: 10px; font-size: 16px; font-weight: 600; color: #010101; line-height: 1.2; } @media only screen and (max-width: 767px) { .footer-top .phone { margin-left: -20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer-top .phone i { margin-right: 10px; position: relative; z-index: 2; color: white; } .footer-top .phone i::after { content: ""; position: absolute; border-radius: 50%; width: 26px; height: 26px; background-color: #5b5b5b; z-index: -2; } .footer-top .phone:hover span { text-decoration: underline; } .footer-top .phone:hover i::after { background-color: #ff621a; } .footer-top .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-top .nav-item { font-size: 16px; font-weight: 600; color: black; line-height: 1.2; text-align: left; opacity: 1; padding: 0; } .footer-top .nav-link { margin: 0; margin-bottom: 10px; padding: 0; font-size: 14px; opacity: 1; font-weight: 600; color: black; line-height: 1.2; text-align: left; display: block; } .footer-top .nav-link:hover { text-decoration: underline; color: #ff621a; } @media only screen and (max-width: 767px) { .footer-top .nav-link { text-align: center; } } .footer-top .socials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 1023px) { .footer-top .socials { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer-top .socials a { display: block; margin-bottom: 10px; } .footer-top .socials a:not(:last-of-type) { margin-right: 25px; } .footer-top .socials a i { font-size: 14px; position: relative; z-index: 2; color: white; } .footer-top .socials a i::after { content: ""; position: absolute; border-radius: 50%; width: 26px; height: 26px; background-color: #5b5b5b; z-index: -2; } .footer-top .socials a:hover span { text-decoration: underline; } .footer-top .socials a:hover i::after { background-color: #ff621a; } .footer .copyright, .footer .software-company { font-size: 14px; font-weight: normal; color: black; } .footer .copyright a:hover, .footer .software-company a:hover { color: #ff621a; text-decoration: underline; } @media only screen and (max-width: 767px) { .footer .copyright, .footer .software-company { text-align: center; } } .footer .payments p { font-size: 14px; font-weight: 600; color: black; text-align: left; line-height: 1; padding: 0; margin: 0; margin-bottom: 15px; } @media only screen and (max-width: 1023px) { .footer .payments p { margin-bottom: 25px; } } @media only screen and (max-width: 767px) { .footer .payments p { margin-bottom: 0; margin-top: 15px; } } .footer .payments-item { height: 50px; width: 100px; } .footer .payments > div { margin-top: -20px; } .footer .payments > div img { max-width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media only screen and (max-width: 1023px) { .footer .payments > div { margin-top: -40px; } } @media only screen and (max-width: 767px) { .footer .payments > div { margin-top: 0; } } .my-btn__white { padding: 12px 15px; width: 170px; margin-top: 20px; display: inline-block; border-style: solid; border-width: 2px; border-color: white; background-color: rgba(203, 86, 42, 0); font-size: 16px; border-radius: 25.5px; font-weight: normal; color: white; line-height: 1; text-align: center; } .my-btn__white i { font-size: 14px; } .my-btn__white:hover { color: white; background-color: rgba(255, 255, 255, 0.15); } .my-btn__white:hover i { -webkit-transform: translateX(5px); transform: translateX(5px); } .my-btn { height: 45px; min-width: 120px; padding: 8px 15px; border: 1px solid transparent; border-radius: 22.5px; font-size: 18px; font-weight: normal; color: black; line-height: 1; text-align: center; } .my-btn__gray { background-color: #efefef; } .my-btn__gray:hover { background-color: rgba(91, 91, 91, 0.3); } .my-btn__orange { background-color: #ff621a; color: white; } .my-btn__orange:hover { background-color: #d65a12; } .my-btn__orange--small { padding: 4px 10px; font-size: 14px; height: auto; min-width: unset; cursor: unset !important; } .my-btn__orange--small:hover { background-color: #ff621a; } .btn-links { display: inline-block; min-width: 200px; padding: 15px; border: 1px solid transparent; border-radius: 27.5px; font-size: 18px; font-weight: normal; line-height: 1; vertical-align: middle; text-align: center; text-decoration: none; } .btn-links:hover { text-decoration: none; } .btn-links__one { background-color: #f8445a; border-color: #f8445a; color: white; } .btn-links__one.bg__green { background-color: #42c28d; border-color: #42c28d; } .btn-links__one:hover { color: white; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(248, 68, 90, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(248, 68, 90, 0.35); } .btn-links__one:hover.bg__green { background-color: #42c28d; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(66, 194, 141, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(66, 194, 141, 0.35); border-color: #42c28d; } .btn-links__two { background-color: #ff621a; border-color: #ff621a; color: white; } .btn-links__two:hover { color: white; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); } .btn-links__three { background-color: #fff; border-color: rgba(0, 0, 0, 0.5); border-width: 2px; color: white; color: black; } .btn-links__three:hover { background-color: rgba(255, 255, 255, 0.4); } .no-button { background-color: #c2c2c2 !important; border-color: #c2c2c2 !important; -webkit-box-shadow: none !important; box-shadow: none !important; cursor: no-drop; } .no-button:hover { background-color: #c2c2c2 !important; -webkit-box-shadow: none !important; box-shadow: none !important; border-color: #c2c2c2 !important; } .my-navbar { overflow: hidden; background-color: #00b58d; height: 80px; } @media only screen and (max-width: 1023px) { .my-navbar { overflow-y: auto; position: absolute; width: 84%; height: 100%; min-height: 100%; top: 0; padding-top: 110px; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -webkit-transform: translateX(0px); transform: translateX(0px); left: -100%; z-index: 111; -webkit-transition: 0.2s -webkit-transform ease-out; transition: 0.2s -webkit-transform ease-out; transition: 0.2s transform ease-out; transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out; } } @media only screen and (max-width: 1023px) and (max-width: 559px) { .my-navbar { min-height: 105%; } } .my-navbar-active { -webkit-transform: translateX(118%); transform: translateX(118%); } .my-navbar .container { height: 100%; } @media only screen and (max-width: 1023px) { .my-navbar .container { height: auto; padding: 0; } } .my-navbar .container .nav { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .my-navbar .container .nav-item { width: calc(100% / 8); } @media only screen and (max-width: 1023px) { .my-navbar .container .nav-item { width: 100%; } } @media only screen and (max-width: 1023px) { .my-navbar .container .nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .my-navbar .nav-item { overflow: hidden; list-style-type: none; height: 100%; } .my-navbar .nav-item > i { display: none; width: 50px; height: 30px; position: absolute; top: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: -15px; color: #999; z-index: 11; margin-left: 15px; padding: 5px; } @media only screen and (max-width: 1023px) { .my-navbar .nav-item { position: relative; border-bottom: 1px solid #00000015; padding-left: 10px; } .my-navbar .nav-item > i { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .my-navbar .nav-item.checkout { background-image: linear-gradient(137deg, #ff8a52, #ff6319); } @media only screen and (max-width: 1023px) { .my-navbar .nav-item.checkout { background-image: unset; } .my-navbar .nav-item.checkout a { color: #ff621a; } } .my-navbar .nav-item .dropbtn { height: 100%; border: none; outline: none; padding: 10px; background-color: inherit; text-decoration: none; font-size: 15px; font-family: "ProximaNova", Arial, Helvetica, sans-serif; color: white; line-height: 1.333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1023px) { .my-navbar .nav-item .dropbtn { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; color: #000; height: auto; } } .my-navbar .nav-item .dropbtn span { text-align: center; display: block; width: 100%; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 1023px) { .my-navbar .nav-item .dropbtn span { text-align: left; margin: unset; width: 80%; display: inline-block; } .my-navbar .nav-item .dropbtn span br { display: none; } } .my-navbar a:hover, .my-navbar .nav-item:hover .dropbtn { background-color: rgba(255, 255, 255, 0.102); } .my-navbar .nav-item-content { overflow-y: auto; padding: 30px 0; display: none; position: absolute; width: 100%; left: 0; z-index: 1111; -webkit-box-shadow: 0px 20px 18px 2px rgba(5, 8, 9, 0.1); box-shadow: 0px 20px 18px 2px rgba(5, 8, 9, 0.1); background-color: white; } @media only screen and (min-width: 1024px) { .my-navbar .nav-item-content { height: 353px; } } @media only screen and (min-width: 1248px) { .my-navbar .nav-item-content { height: 400px; } } @media only screen and (min-width: 1440px) { .my-navbar .nav-item-content { height: 503px; } } @media only screen and (max-width: 1023px) { .my-navbar .nav-item-content { padding: 10px 20px; width: 95%; max-height: 350px; overflow-y: auto; margin: 0 auto; position: relative; display: none; -webkit-box-shadow: unset; box-shadow: unset; } } .my-navbar .nav-item-content a { text-decoration: none; display: block; margin: 5px 0; text-align: left; font-size: 14px; font-weight: normal; color: #222222; padding-right: 36px; } @media only screen and (max-width: 767px) { .my-navbar .nav-item-content a { padding-right: 12px; } } .my-navbar .nav-item-content a:hover { color: #ff621a; } .my-navbar .nav-item-content h3, .my-navbar .nav-item-content h3 a { font-size: 16px; font-weight: bold; color: #222222; line-height: 1.2; } @media only screen and (max-width: 1023px) { .my-navbar .nav-item-content h3, .my-navbar .nav-item-content h3 a { font-size: 14px; font-weight: normal; } } .my-navbar .nav-item-content h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .my-navbar .nav-item-content h3 img { position: absolute; left: -38px; top: 5px; width: 30px; height: 30px; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } @media only screen and (max-width: 1247px) { .my-navbar .nav-item-content h3 img { left: -30px; top: 5px; width: 25px; height: 25px; } } @media only screen and (max-width: 1023px) { .my-navbar .nav-item-content h3 img { display: none; } } .my-navbar .nav-item-content h3 i { margin-left: 10px; font-size: 14px; padding: 5px; width: 50px; height: 30px; position: absolute; top: 0px; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: -30px; z-index: 11; margin-left: 15px; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #999; } @media only screen and (min-width: 1024px) { .my-navbar .nav-item-content h3 i { display: none; } } @media only screen and (max-width: 1023px) { .my-navbar .nav-item-content__toggle { display: none; padding-left: 10px; } } @media only screen and (min-width: 1024px) { .my-navbar .nav-item:hover .nav-item-content { display: block; } } .lang { position: relative; cursor: pointer; z-index: 223; font-size: 14px; font-weight: normal; text-align: right; color: #000; } .lang-selected i { font-size: 12px; } .lang-list { opacity: 0; visibility: hidden; position: absolute; top: 50px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; left: -10px; width: 100%; color: white; background-color: #fff; width: 40px; -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 1023px) { .lang-list { left: -3px; } } .lang-list a { display: block; font-weight: normal; font-size: 16px; color: black; margin-right: 0 !important; padding: 5px 10px; } .lang-list a:not(:last-of-type) { border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .lang-list a.active, .lang-list a:hover { color: #ff621a; text-decoration: none; } .lang:hover .lang-list { visibility: visible; opacity: 1; top: 27px; } @media only screen and (max-width: 1023px) { .lang:hover .lang-list { top: 25px; } } .search { min-width: 450px; position: relative; } @media only screen and (max-width: 1247px) { .search { min-width: 300px; } } @media only screen and (max-width: 1023px) { .search { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; margin-left: auto !important; margin-right: auto !important; position: absolute; z-index: 222; top: 65px; width: 80%; background: white; -webkit-transition: 0.2s -webkit-transform ease-out; transition: 0.2s -webkit-transform ease-out; transition: 0.2s transform ease-out; transition: 0.2s transform ease-out, 0.2s -webkit-transform ease-out; -webkit-transform: translateX(0px); transform: translateX(0px); left: -100%; } .search-active { -webkit-transform: translateX(127%); transform: translateX(127%); border-radius: 22.5px; } .search::after { content: ""; position: absolute; width: 100%; height: 50px; top: -3px; left: 0; z-index: -1; background-color: #fff; border-top-right-radius: 22.5px; border-bottom-right-radius: 22.5px; } } @media only screen and (max-width: 559px) { .search { min-width: 200px; } } .search input { width: 100%; background-color: #efefef; height: 45px; font-weight: normal; color: black; font-size: 14px; border-radius: 22.5px; border: 1px solid #efefef; padding: 8px 15px; } .search input::-webkit-input-placeholder { color: black; } .search input::-moz-placeholder { color: black; } .search input:-ms-input-placeholder { color: black; } .search input::-ms-input-placeholder { color: black; } .search input::placeholder { color: black; } .search input:focus { border-color: #ff621a; } @media only screen and (max-width: 1023px) { .search input { padding: 8px 15px 8px 10px; } } @media only screen and (max-width: 1023px) { .search input { display: block; background-color: #fff; } } .search a { position: absolute; right: 15px; } .search a i { position: relative; color: white; font-size: 14px; } .search a i::after { content: ""; position: absolute; width: 35px; height: 35px; background-color: #ff621a; z-index: -1; border-radius: 50%; } .just-call { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .just-call { display: none; } } .just-call a:nth-of-type(1) { font-size: 20px; font-weight: bold; color: black; line-height: 1; margin-right: 35px; } @media only screen and (max-width: 1023px) { .just-call a:nth-of-type(1) { margin-right: 20px; } } @media only screen and (max-width: 320px) { .just-call a:nth-of-type(1) { margin-right: 10px; } } .just-call a:nth-of-type(1) i { position: relative; color: #fff; font-size: 18px; } @media only screen and (min-width: 1024px) { .just-call a:nth-of-type(1) i { display: none; } } .just-call a:nth-of-type(1) i::after { position: absolute; content: ""; background-color: #5b5b5b; border-radius: 50%; width: 35px; height: 35px; z-index: -1; } @media only screen and (max-width: 1023px) { .just-call a:nth-of-type(1) span { display: none; } } .just-call a:nth-of-type(2) { font-size: 16px; font-weight: normal; color: black; text-decoration: underline; } .just-call a:nth-of-type(2):hover { text-decoration: none; } @media only screen and (max-width: 767px) { .just-call a:nth-of-type(2) { display: none; } } .just-call a:hover { color: #ff621a; } .selected-products { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .selected-products .favorite, .selected-products .basket { margin-right: 30px; } .selected-products .balance-link { margin-right: 30px; } .favorite, .basket, .balance { position: relative; cursor: pointer; display: block; } .favorite i, .basket i, .balance i { position: relative; color: #c2c2c2; } .favorite i::after, .basket i::after, .balance i::after { position: absolute; content: ""; background-color: #efefef; border-radius: 50%; width: 36px; height: 36px; z-index: -1; } .favorite div, .basket div, .balance div { position: absolute; top: -15px; right: -8px; z-index: 1; } .favorite div input, .basket div input, .balance div input { position: relative; cursor: pointer; color: #fff; display: block; font-weight: 600; font-size: 12px; text-align: center; line-height: 1; border: 0; background-color: #ff621a; border-radius: 50%; width: 18px; height: 18px; } .topbar-top__left .balance { margin-left: 8px; } .topbar-top__left .balance i { font-size: 14px; } .topbar-top__left .balance i::after { width: 32px; height: 32px; } .topbar-top__left .balance div { top: -9px; right: -15px; } .logo { display: block; } .logo img { max-height: 100%; max-width: 150px; } @media only screen and (max-width: 767px) { .logo { margin-right: 30px !important; } .logo img { max-width: 120px; } } .breadcrumb { background-color: transparent; padding-left: 0; padding-right: 0; font-size: 14px; font-weight: normal; color: #222222; line-height: 1.429; text-align: left; } .breadcrumb-item a:hover { color: #ff621a; } .socials { display: -webkit-box; display: -ms-flexbox; display: flex; } .socials a { display: block; } @media only screen and (max-width: 1023px) { .socials a:not(:last-of-type) { margin-right: 25px; } } .socials a i { font-size: 14px; position: relative; z-index: 2; color: white; } .socials a i::after { content: ""; position: absolute; border-radius: 50%; width: 26px; height: 26px; background-color: #5b5b5b; z-index: -2; } .socials a:hover span { text-decoration: underline; } .socials a:hover i::after { background-color: #ff621a; } .share a:not(:last-of-type) { margin-right: 25px; } .share p { font-size: 16px; font-weight: bold; color: black; line-height: 1.313; } .product-color { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 50px; } .product-color p { margin-right: 10px; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.5; } .colors ul { list-style: none; padding: 0; margin: 0; } .colors li { display: inline-block; } .colors label { margin-bottom: 14px; cursor: pointer; } .colors input { display: none; } .colors input[type="radio"]:checked + .swatch { -webkit-box-shadow: inset 0 0 0 2px white; box-shadow: inset 0 0 0 2px white; } .swatch { display: inline-block; vertical-align: middle; width: 25px; height: 25px; cursor: pointer; margin-right: 5px; margin-left: 5px; border-width: 1px; border-style: solid; border-radius: 50%; } .all_tabs { font-weight: normal; } .all_tabs .conversation { padding: 5px; margin: 0; } .all_tabs .message-wrap { padding: 0; } .all_tabs .msg { padding: 5px; margin: 0; } .all_tabs .msg-wrap { padding: 0 10px; } .all_tabs .time { color: #bfbfbf; } .all_tabs .send-wrap { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px; /*background: #f8f8f8;*/ } .all_tabs .send-message { resize: none; } .all_tabs .highlight { background-color: #f7f7f9; border: 1px solid #e1e1e8; } .all_tabs .send-message-btn { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .all_tabs .btn-panel { background: #f7f7f9; } .all_tabs .btn-panel .btn { color: #b8b8b8; -webkit-transition: 0.2s all ease-in-out; transition: 0.2s all ease-in-out; } .all_tabs .btn-panel .btn:hover { color: #666; background: #f8f8f8; } .all_tabs .btn-panel .btn:active { background: #f8f8f8; -webkit-box-shadow: 0 0 1px #ddd; box-shadow: 0 0 1px #ddd; } .all_tabs .btn-panel-conversation .btn, .all_tabs .btn-panel-msg .btn { background: #f8f8f8; } .all_tabs .btn-panel-conversation .btn:first-child { border-right: 1px solid #ddd; } .all_tabs .msg-wrap .media-heading { color: #000; font-weight: 500; font-size: 20px; font-weight: 600; } .all_tabs .msg-date { background: none; text-align: center; color: #aaa; border: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #ddd; } .all_tabs ul { margin: 0; padding: 0; list-style: none; width: 100%; margin: 0; padding: 0; font-weight: 600; background-color: #f2f4f6; display: -webkit-box; display: -ms-flexbox; display: flex; } .all_tabs ul li { cursor: pointer; height: auto; overflow: hidden; position: relative; background: #f2f4f6; margin-left: 1.5rem; margin-right: 1.5rem; padding: 1em 0; border-bottom: 2px solid transparent; font-size: 18px; font-weight: 600; } .all_tabs ul li.active { color: #ff621a; border-bottom-color: #ff621a; } .all_tabs .tab_container { border: 1px solid #f2f4f6; border-top: none; width: 100%; background: #fff; overflow: auto; } .all_tabs .tab_content { padding: 20px; display: none; } @media screen and (max-width: 768px) { .all_tabs .tab_content { padding: 15px; } } .all_tabs .tab_drawer_heading { display: none; } @media screen and (max-width: 768px) { .all_tabs .tabs { display: none; } .all_tabs .tab_drawer_heading { background-color: #f2f4f6; margin: 5px 0; padding: 15px; display: block; cursor: pointer; border-bottom: 2px solid transparent; font-size: 18px; font-weight: 600; } .all_tabs .tab_drawer_heading:first-of-type { margin-top: 0; } .all_tabs .tab_drawer_heading:last-of-type { margin-bottom: 0; } .all_tabs .d_active { color: #ff621a; } } .address-add, .address-delete { border: 0; background-color: transparent; border-radius: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .address-add span, .address-delete span { font-size: 18px; font-weight: normal; color: #1a1a1a; line-height: 1.333; margin-left: 10px; } .address-add i, .address-delete i { color: #ff621a; } @media only screen and (min-width: 1024px) { .address-delete { position: absolute; right: -30px; top: -68px; } .address-delete span { display: none; } } @media only screen and (max-width: 1023px) { .address-delete { margin: 0 0 5px auto; } } .v-line { color: #efefef; -webkit-transform: scaleY(4) translateX(5px) translateY(-2px); transform: scaleY(4) translateX(5px) translateY(-2px); } @media only screen and (max-width: 1247px) { .v-line { display: none; } } .sum-of-products { margin-right: 50px; } @media only screen and (max-width: 1023px) { .sum-of-products { margin-right: 0; margin-bottom: 10px; } } @media only screen and (max-width: 767px) { .sum-of-products { margin-top: 30px; } } .sum-of-products h3 { font-size: 18px; font-weight: 600; color: #222222; line-height: 1.2; text-align: right; margin-bottom: 0; } .sum-of-products h3 span { font-weight: bold; font-size: 24px; } @media only screen and (max-width: 767px) { .sum-of-products h3 { text-align: center; font-size: 16px; } .sum-of-products h3 span { font-size: 22px; } } .sum-of-products h5 { font-size: 18px; font-weight: 600; color: #222222; line-height: 1.2; text-align: right; color: #a8a8a8; margin-bottom: 0; } .sum-of-products h5 span { font-weight: bold; font-size: 24px; } @media only screen and (max-width: 767px) { .sum-of-products h5 { text-align: center; font-size: 16px; } .sum-of-products h5 span { font-size: 22px; } } .sum-of-products h2 { margin-top: 10px; font-size: 22px; font-weight: 600; color: #ff6319; font-weight: bold; line-height: 1.2; } @media only screen and (max-width: 767px) { .sum-of-products h2 { text-align: center; font-size: 22px; } .sum-of-products h2 span { font-size: 22px; } } #return-to-top { position: fixed; bottom: 50px; right: 15px; background: black; background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; display: block; text-decoration: none; border-radius: 35px; display: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 444; } @media only screen and (max-width: 1247px) { #return-to-top { bottom: 90px; } } #return-to-top i { color: #fff; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #return-to-top:hover { background: rgba(0, 0, 0, 0.9); } #return-to-top:hover i { color: #fff; top: 5px; } .pagination .page-item { margin-right: 5px; margin-left: 5px; } .pagination .page-item.active .page-link { background-color: #000; } .pagination .page-item:first-of-type { margin-right: 20px; } .pagination .page-item:last-of-type { margin-left: 20px; } .pagination .page-item:last-of-type .page-link { background-color: transparent; } .pagination .page-link { width: 35px; height: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0; border-radius: 50%; color: #222222; font-size: 18px; font-weight: 600; color: #222222; line-height: 1.25; text-align: center; } .pagination .page-link:focus { -webkit-box-shadow: none; box-shadow: none; } .accordion .card { border: none; } .accordion .card h2 { background: url(https://cdn0.iconfinder.com/data/icons/entypo/91/arrow56-512.png) no-repeat calc(100%) 10px; background-size: 20px; cursor: pointer; } .accordion .card h2.collapsed { background-image: url(https://cdn0.iconfinder.com/data/icons/arrows-android-l-lollipop-icon-pack/24/expand2-256.png); } .accordion .card-body { padding-left: 0; padding-right: 0; } .sorting { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-left: 0; list-style-type: none; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .sorting { margin-top: 20px; } } .sorting-item { margin-right: 20px; } .sorting-item a { font-size: 16px; font-weight: bold; color: #222222; line-height: 2.572; text-align: right; padding: 5px 0; border-bottom: 2px solid transparent; } .sorting-item a.active, .sorting-item a:focus { border-bottom-color: #ff621a; } @media only screen and (max-width: 767px) { .sorting-item a { font-size: 14px; } } .selected-tags { margin-bottom: 10px; } .selected-tags ul { list-style-type: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .selected-tags ul li { margin-right: 10px; margin-bottom: 10px; padding: 5px 10px; text-decoration: none; color: black; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 14px; font-weight: normal; color: #222222; border-style: solid; border-width: 1px; border-color: #cbccd3; border-radius: 3px; background-color: rgba(255, 255, 255, 0); height: 32px; } .selected-tags .clear-all { background-color: #9d9d9d; color: white; cursor: pointer; } .selected-tags .close { cursor: pointer; margin-left: 10px; } .selected-tags .close i { font-size: 16px; } .selected-tags .close:hover { color: #ff621a; } .catalog-on-mobile { width: 100%; position: absolute; top: 71px; left: 0; right: 0; z-index: 55; height: 65px; background-color: #f77c44; } .catalog-on-mobile ul { padding: 0; margin: 0; list-style-type: none; } .catalog-on-mobile .outer-ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .catalog-on-mobile .outer-ul.two-li > li { width: 50% !important; } .catalog-on-mobile .outer-ul.two-li > li:not(:last-of-type) { border-right: 1px solid #fff !important; } .catalog-on-mobile .outer-ul.one-li > li { width: 100% !important; } .catalog-on-mobile .outer-ul.one-li > li:not(:last-of-type) { border-right: 0 !important; } .catalog-on-mobile .outer-ul > li { font-size: 15px; font-weight: normal; color: white; height: 65px; background-color: #f77c44; width: 33%; background-color: #ff621a; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .catalog-on-mobile .outer-ul > li:not(:last-of-type) { border-right: 1px solid #fff; } .catalog-on-mobile .outer-ul > li > i { margin-left: 5px; } .catalog-on-mobile .inner-ul { position: absolute; padding-top: 5px; padding-bottom: 5px; width: 100%; left: 0; right: 0; top: 100%; z-index: 44; background-color: #fff; background-color: white; -webkit-box-shadow: 0px 0px 19.2px 0.8px rgba(5, 8, 9, 0.15); box-shadow: 0px 0px 19.2px 0.8px rgba(5, 8, 9, 0.15); max-height: calc(100vh - 131px); overflow-y: auto; opacity: 0; visibility: hidden; } .catalog-on-mobile .inner-ul .card-link::after { content: "\f078"; } .catalog-on-mobile .inner-ul .card-link.collapsed::after { content: "\f078"; } .catalog-on-mobile .inner-ul li { margin: 0 15px; } .catalog-on-mobile .inner-ul li:not(:last-of-type) a { border-bottom: 1px solid rgba(34, 34, 34, 0.102); } .catalog-on-mobile .inner-ul li a { display: block; padding: 12px 0; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.3; } .catalog-on-mobile .inner-ul li a.active, .catalog-on-mobile .inner-ul li a:hover { color: #ff621a; } .catalog-on-mobile .outer-ul > li.active > i:before { content: "\f0d8"; } .catalog-on-mobile .outer-ul > li.active .inner-ul { opacity: 1; visibility: visible; } .catalog-on-mobile .active + .inner-ul { opacity: 1 !important; visibility: visible !important; } .steps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0; margin: 0; list-style-type: none; margin-top: 30px; margin-bottom: 30px; } .steps-one .steps-item:nth-of-type(1) a { border-bottom-color: #ff621a; } .steps-two .steps-item:nth-of-type(1) a { border-bottom-color: #ff621a; background-color: #ff621a; color: white; } .steps-two .steps-item:nth-of-type(2) a { border-bottom-color: #ff621a; } .steps-three .steps-item:nth-of-type(1) a { border-bottom-color: #ff621a; background-color: #ff621a; color: white; } .steps-three .steps-item:nth-of-type(2) a { border-bottom-color: #ff621a; background-color: #ff621a; color: white; } .steps-three .steps-item:nth-of-type(3) a { border-bottom-color: #ff621a; } .steps-item { width: 33%; text-align: center; } .steps-item a { height: 60px; background-color: #f8f8f8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 3px solid transparent; font-size: 22px; font-weight: 600; line-height: 1.091; color: black; } @media only screen and (max-width: 767px) { .steps-item a { height: 45px; font-size: 18px; } } .all_sum { border-radius: 20px; background-color: #f8f8f8; padding: 15px 20px; margin-bottom: 75px; } .all_sum span, .all_sum p { font-size: 18px; font-weight: 600; color: #222222; line-height: 1.2; text-align: left; margin-bottom: 0; } .all_sum a { text-decoration: underline; font-size: 14px; font-weight: normal; color: black; text-decoration: underline; line-height: 1.286; } .added-to-basket { position: absolute; bottom: -75px; left: 0; z-index: 33; border-radius: 3px; background-color: white; -webkit-box-shadow: 0px 3px 9.2px 0.8px rgba(5, 8, 9, 0.15); box-shadow: 0px 3px 9.2px 0.8px rgba(5, 8, 9, 0.15); height: 50px; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; min-width: 200px; opacity: 0; visibility: hidden; font-size: 16px; font-weight: normal; color: #010101; } .added-to-basket b { font-weight: normal; margin-left: 4px; color: #ff621a; } .added-to-basket.alert-is-active { visibility: visible; opacity: 1; bottom: -55px; } .back-to { font-size: 16px; font-weight: normal; color: #010101; } .item, .item1 { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .lg-backdrop { background-color: #000000bb !important; } .lg-on main, .lg-on .topbar, .lg-on .my-navbar, .lg-on .breadcrumb, .lg-on .back-to { -webkit-filter: blur(4px); filter: blur(4px); } .now-no-product { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .now-no-product p { font-size: 18px; font-weight: bold; margin-bottom: 0; margin-right: 30px; display: inline-block; min-width: 250px; padding: 15px; border: 1px solid transparent; font-size: 18px; font-weight: 600; line-height: 1; vertical-align: middle; text-align: center; background-color: #5aa090; border-radius: 6px; border-color: #5aa090; color: white; background-image: url("../img/now-no-product.png"), -webkit-gradient(linear, left top, right top, from(#5aa090), to(#5aa090)); background-image: url("../img/now-no-product.png"), linear-gradient(to right, #5aa090, #5aa090); background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-box-shadow: 0px 0px 26.4px 3.6px rgba(90, 160, 144, 0.35); box-shadow: 0px 0px 26.4px 3.6px rgba(90, 160, 144, 0.35); } .now-no-product button { display: inline-block; padding: 15px; border: 1px solid transparent; border-radius: 27.5px; font-size: 18px; font-weight: normal; line-height: 1; vertical-align: middle; text-align: center; text-decoration: none; min-width: 150px; background-color: #ff621a; border-color: #ff621a; color: white; } .now-no-product button:hover { color: white; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 98, 26, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(255, 98, 26, 0.35); } @media only screen and (max-width: 767px) { .now-no-product { -ms-flex-wrap: wrap; flex-wrap: wrap; } .now-no-product p { width: 100%; margin-right: 0; margin-bottom: 10px; } .now-no-product button { margin-left: auto; margin-right: auto; } } .modal-content, .modal-body, .modal-header, .modal-footer { border: 0; border-radius: 10px; } .modal-body { padding: 30px 40px; position: relative; } @media only screen and (max-width: 767px) { .modal-body { padding-left: 20px; padding-right: 20px; } } .modal-body .close { position: absolute; top: 15px; right: 15px; } .modal-body h4 { font-size: 30px; font-weight: 600; color: #222222; text-align: left; } @media only screen and (max-width: 767px) { .modal-body h4 { font-size: 24px; } } .terms-of-use__content { margin-top: 20px; font-size: 16px; font-weight: normal; color: #222222; line-height: 1.3; text-align: left; max-height: 600px; overflow-y: auto; padding-right: 10px; /* width */ /* Track */ /* Handle */ /* Handle on hover */ } .terms-of-use__content::-webkit-scrollbar { width: 4px; height: 4px; } .terms-of-use__content::-webkit-scrollbar-track { background-color: rgba(181, 189, 204, 0.329); } .terms-of-use__content::-webkit-scrollbar-thumb { background-color: #b5bdcc; } .terms-of-use__content::-webkit-scrollbar-thumb:hover { background-color: #b5bdcc; } .basket-modal .product { padding: 10px; margin: 20px 0; } .basket-modal .product-title { font-size: 16px; } .basket-modal .product-title a { font-size: 16px; } .basket-modal .product-img { margin-top: 0; margin-bottom: 0; height: 120px; } .basket-modal .product .product-buttons { margin-bottom: 0; } .basket-modal .product .product-buttons button { width: 100%; } .basket-modal .sum-of-products { margin-right: 0; } .basket-modal .btn-links { height: 45px; padding: 13px 5px; font-size: 18px; } @media (min-width: 576px) { .basket-modal .modal-dialog { max-width: 550px; } } @media (min-width: 900px) { .basket-modal .modal-dialog { max-width: 850px; } } @media (max-width: 576px) { .basket-modal form button, .basket-modal form a { width: 100%; margin: 10px 0 !important; } .basket-modal form .product-buttons { width: 100%; } } .alert-when-has-product h5 { font-size: 20px; font-weight: 600; color: #222222; text-align: left; } @media only screen and (max-width: 767px) { .alert-when-has-product h5 { font-size: 20px; } } .alert-when-has-product p { font-size: 16px; font-weight: normal; color: #222222; text-align: left; } @media only screen and (max-width: 767px) { .alert-when-has-product p { font-size: 16px; } } .installment .nav-pills .nav-link { border: 2px solid #b5bdcc; margin: 0 5px; background-color: transparent; color: #000; min-width: 150px; text-align: center; position: relative; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 576px) { .installment .nav-pills .nav-link { min-width: unset; } } .installment .nav-pills .nav-link::after { content: ""; position: absolute; top: 5px; right: 10px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #b5bdcc; } .installment .nav-pills .nav-link::before { content: ""; position: absolute; top: 8px; right: 13px; width: 9px; height: 9px; border-radius: 50%; background-color: #ff621a; opacity: 0; } @media screen and (max-width: 576px) { .installment .nav-item { width: 48%; } } .installment .nav-pills .nav-link.active, .installment .nav-pills .show > .nav-link { border-color: #ff621a; } .installment .nav-pills .nav-link.active::after, .installment .nav-pills .show > .nav-link::after { border-color: #ff621a; } .installment .nav-pills .nav-link.active::before, .installment .nav-pills .show > .nav-link::before { opacity: 1; } .installment .my-form__group input:disabled { color: #000; } .my-form__group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .my-form__group label { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .my-form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .my-form p { font-size: 16px; font-weight: normal; color: #222222; line-height: 1.5; text-align: left; } .my-form label { display: block; font-size: 18px; font-weight: normal; color: rgba(34, 34, 34, 0.502); line-height: 1.333; } .my-form input, .my-form select, .my-form textarea { display: block; width: 100%; border-style: solid; border-width: 1px; border-color: rgba(34, 34, 34, 0.2); border-radius: 6px; background-color: transparent; height: 50px; padding: 6px 15px; color: rgba(34, 34, 34, 0.99); font-size: 18px; font-weight: 600; line-height: 1.333; } @media only screen and (max-width: 767px) { .my-form input, .my-form select, .my-form textarea { font-size: 16px; } } @media only screen and (max-width: 320px) { .my-form input, .my-form select, .my-form textarea { font-size: 14px; } } .my-form input::-webkit-input-placeholder, .my-form select::-webkit-input-placeholder, .my-form textarea::-webkit-input-placeholder { color: rgba(34, 34, 34, 0.502); } .my-form input::-moz-placeholder, .my-form select::-moz-placeholder, .my-form textarea::-moz-placeholder { color: rgba(34, 34, 34, 0.502); } .my-form input:-ms-input-placeholder, .my-form select:-ms-input-placeholder, .my-form textarea:-ms-input-placeholder { color: rgba(34, 34, 34, 0.502); } .my-form input::-ms-input-placeholder, .my-form select::-ms-input-placeholder, .my-form textarea::-ms-input-placeholder { color: rgba(34, 34, 34, 0.502); } .my-form input::placeholder, .my-form select::placeholder, .my-form textarea::placeholder { color: rgba(34, 34, 34, 0.502); } .my-form input:focus, .my-form select:focus, .my-form textarea:focus { border-color: #ff621a; } .my-form input:focus ~ label, .my-form select:focus ~ label, .my-form textarea:focus ~ label { color: #ff621a; } .my-form textarea { height: auto; resize: none; } .my-form select:focus { border-color: rgba(34, 34, 34, 0.2); -webkit-box-shadow: unset; box-shadow: unset; } .my-form select:focus ~ label { color: #ff621a; } .my-form .reset-password { font-size: 16px; font-weight: normal; text-decoration: underline; text-align: right; } .my-form .form-payment { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .my-form .form-payment label { font-size: 16px; font-weight: 600; color: #1a1a1a !important; line-height: 1.5; cursor: pointer; } .my-form .form-payment > div { margin-top: 5px; margin-bottom: 5px; } .my-form .form-payment + div { margin-top: 50px; } .my-form .form-payment + div textarea { display: block; width: 100%; border-radius: 8px; padding: 8px 15px; background-color: transparent; border: 1px solid #fff; color: rgba(34, 34, 34, 0.99); font-weight: normal; font-size: 14px; line-height: 24px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; resize: none; border-color: rgba(0, 0, 0, 0.2); } .my-form .form-payment + div textarea:focus { border-color: #ff621a; color: #000; } .my-form h3 { font-size: 20px; font-weight: 600; color: #1a1a1a; line-height: 1.333; text-align: left; } .my-form h2 { font-size: 24px; font-weight: 600; color: #1a1a1a; line-height: 1.333; text-align: left; } .my-form h4 { font-size: 16px; font-weight: bold; color: #1a1a1a; line-height: 1.333; text-align: left; } .my-form .custom-control-label::before { background-color: transparent; } .my-form .custom-control-label::after { width: 1.7rem; height: 1.7rem; top: -1px; left: -1.7rem; background: no-repeat 35%/35% 35%; } .my-form .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("../img/check.png"); } .my-form .custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #fff; background-color: transparent; border-color: #ff621a; } .my-form .custom-control-input:checked ~ .custom-control-label::before { color: white; background-color: transparent; border-color: #ff621a; } .my-form .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #adb5bd; } .my-form .custom-control-input:focus ~ .custom-control-label::before { -webkit-box-shadow: unset; box-shadow: unset; } .my-form .custom-radio { font-size: 16px; font-weight: normal; color: black; line-height: 1.5; } .my-form .custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: none; width: 11px; height: 11px; background-color: #ff621a; border-radius: 50%; top: 0.4rem; left: -1.35rem; } .my-form .custom-radio .custom-control-label::after { background: no-repeat 38%/30% 30%; } .my-form .my-custom-control .custom-control-label { font-size: 16px; color: #000; font-weight: normal; } .my-form .my-custom-control .custom-control-input:checked ~ .custom-control-label::before { color: #fff; background-color: #ff621a; border-color: #ff621a; } .my-form__countBy select { height: 32px; padding: 5px 10px; text-decoration: none; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 14px; font-weight: normal; color: #222; border-style: solid; border-width: 1px; border-color: #cbccd3; border-radius: 3px; background-color: rgba(255, 255, 255, 0); min-width: 150px; } @media only screen and (max-width: 767px) { .my-form__countBy select { min-width: unset; max-width: 100px; } } .my-form__countBy p { font-size: 16px; font-weight: 600; color: #222; } .select-months { position: relative; margin-top: 30px; padding: 0 15px; } .select-months::after { content: ""; position: absolute; top: -12px; width: 100%; height: 1px; background-color: #000; opacity: 0.3; z-index: 0; } .select-months label { cursor: pointer; min-width: 60px; text-align: center; font-size: 16px; color: #000 !important; } .select-months label::before { top: -20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .select-months input { display: none; } .select-months .custom-control { padding-left: 0; position: relative; z-index: 22; } .select-months .custom-control-inline { margin: 0 5px; } .select-months .custom-control-label::after { top: -17.5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #fff; } .select-months .custom-radio .custom-control-input:checked ~ .custom-control-label::after { top: -17.5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .select-months .custom-control-label::before { background-color: #fff; } .select-months .custom-control-input:checked ~ .custom-control-label::before { background-color: #fff; } .category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .category { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .category-item { width: calc(100% / 5.3); margin: 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .category-item:not(:last-of-type) { margin-right: 13px; } @media only screen and (max-width: 1023px) { .category-item { width: calc(100% / 3.3); } .category-item:not(:last-of-type) { margin-right: 20px; } } @media only screen and (max-width: 767px) { .category-item { width: calc(100% / 2.3); margin-right: 0 !important; margin-top: 15px; margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .category-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; } } .category-item__logo { margin-right: 10px; } @media only screen and (max-width: 767px) { .category-item__logo { height: 55px; } } .category-item__title { font-size: 16px; font-weight: 600; color: #050505; line-height: 1.3; margin-bottom: 0; } .category-item__title a:hover { text-decoration: underline; } @media only screen and (min-width: 768px) { .category-item:hover .category-item__logo { -webkit-transform: scale(1.075); transform: scale(1.075); } } .specials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .specials > .special { width: 32.5%; height: 200px; } @media only screen and (max-width: 1023px) { .specials { -ms-flex-wrap: wrap; flex-wrap: wrap; } .specials > .special { width: 48%; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .specials > .special { height: 190px; width: 100%; } } .special { position: relative; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 0.2s background-position ease-out; transition: 0.2s background-position ease-out; } .special-content { width: 50%; } .special-title { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.333; } .special-price { font-size: 18px; font-weight: bold; color: #fff; line-height: 1.444; } .special-link { font-size: 16px; font-weight: normal; color: #ff6319; line-height: 1.444; } .special-link i { font-size: 14px; } .special .my-btn { height: 35px; font-size: 16px; margin-bottom: 25px; } .product { border-radius: 5px; background-color: white; -webkit-box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); padding: 17px; position: relative; } .product-top { top: 15px; left: 15px; position: absolute; z-index: 22; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; padding: 2px; font-weight: 600; color: white; text-align: center; } .product-top > div { min-width: 40px; margin-right: 10px; } .product-top .type { border-radius: 2px; background-color: #16c56f; } .product-top .discound { border-radius: 2px; background-color: #bd227d; } .product-top .xit { border-radius: 2px; background-color: #bf5efb; } .product-top .no-product { border-radius: 2px; background-color: #fb5e5e; padding: 0 5px; margin-right: 0; } .product-img { margin-top: 20px; margin-bottom: 20px; padding: 10px 0; height: 180px; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .product-img img.no-product-img { -webkit-filter: grayscale(200%); filter: grayscale(200%); } .product-category { font-size: 14px; font-weight: normal; color: #a1a1a1; line-height: 1; margin-bottom: 5px; height: 25px; } .product-title { font-size: 16px; font-weight: 600; color: #222222; line-height: 1.2; } .product-title a { font-size: 14px; font-weight: 600; color: #222222; line-height: 1.2; margin-bottom: 10px; display: inline-block; -webkit-line-clamp: 3; height: 50px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .product-title a:hover { text-decoration: underline; color: #ff621a; } .product-price { margin-bottom: 10px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-price .title-price { font-size: 16px; font-weight: bold; color: #222222; line-height: 1.5; margin-bottom: 20px; } @media only screen and (max-width: 1023px) { .product-price .title-price { margin-bottom: 10px; margin-top: 10px; } } .product-price .old-price { text-decoration: line-through; font-size: 14px; font-weight: normal; color: #7f7f7f; line-height: 1; } .product-price .new-price { font-size: 20px; font-weight: bold; color: black; } .product-buttons { margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .product-buttons button { border: 0; position: relative; z-index: 33; width: 36px; height: 36px; border-radius: 50%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-to_cart { width: 80%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-to_basket { background-color: #ff6319; margin-right: 5px; } .product-to_basket span { font-size: 13px; font-weight: normal; color: white; text-align: center; line-height: 1; position: absolute; padding-left: 2px; padding-right: 2px; width: 100%; opacity: 0; visibility: hidden; z-index: 9; } .product-to_basket i { color: white; opacity: 1; visibility: visible; } .product-to_basket:hover { width: 60%; border-radius: 20px; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); } @media only screen and (max-width: 767px) { .product-to_basket:hover { width: 70%; } } @media only screen and (max-width: 320px) { .product-to_basket:hover { width: 60%; } } .product-to_basket.is-active { background-color: #ff6319; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35) !important; box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35) !important; width: 60%; border-radius: 20px; } @media only screen and (max-width: 767px) { .product-to_basket.is-active { width: 70%; } } @media only screen and (max-width: 320px) { .product-to_basket.is-active { width: 60%; } } .product-to_basket.is-active i { opacity: 0; visibility: hidden; } .product-to_basket.is-active span { opacity: 1; visibility: visible; } .product-to_basket.is-actived { background-color: #ff6319; -webkit-box-shadow: unset; box-shadow: unset; width: 100px; border-radius: 20px; } .product-to_basket.is-actived:hover { -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); } @media only screen and (max-width: 1023px) { .product-to_basket.is-actived { width: 120px; } } @media only screen and (max-width: 767px) { .product-to_basket.is-actived { width: 120px; } } @media only screen and (max-width: 320px) { .product-to_basket.is-actived { width: 100px; } } .product-to_compare, .product-to_compares { background-color: #efefef; } .product-to_compare i, .product-to_compares i { color: #c2c2c2; } .product-to_compare.is-active, .product-to_compares.is-active { background-color: #c2c2c2; } .product-to_compare.is-active i, .product-to_compares.is-active i { color: white; } .product-to_compare + span, .product-to_compares + span { position: absolute; left: 45px; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.5; } .product-to_delete { background-color: transparent; height: auto !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; border-radius: 0 !important; } .product-to_delete i { color: #ff621a; } .product-to_delete span { margin-left: 5px; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.5; } .product-to_favorite { width: 50px; background-color: #efefef; } .product-to_favorite i { color: #c2c2c2; } .product-to_favorite.is-active { background-color: #ff6319; -webkit-box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); box-shadow: 0px 5px 14.25px 0.75px rgba(255, 99, 25, 0.35); } .product-to_favorite.is-active i { color: white; } .product-addition_info { height: 80px; margin-top: 15px; font-size: 13px; font-weight: normal; line-height: 1.429; color: #222222; } .product-addition_info a { font-weight: 600; border-bottom: 1px solid #222; } .product-addition_info a:hover { color: #ff621a; border-bottom-color: #ff621a; } .product-address { font-size: 16px; font-weight: normal; color: #6a6a6a; line-height: 1.2; } .product-price_and_checkout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1247px) { .product-price_and_checkout { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .product-price-by-count { font-size: 16px; font-weight: 600; color: #6a6a6a; line-height: 1.125; } @media only screen and (max-width: 1247px) { .product-price-by-count { margin-bottom: 10px; } } .product-count { display: -webkit-box; display: -ms-flexbox; display: flex; width: 120px; border: 1px solid #efefef; margin-bottom: 20px; } .product-count__title { font-size: 16px; font-weight: bold; color: #222222; line-height: 1.5; margin-bottom: 30px; } @media only screen and (max-width: 1023px) { .product-count__title { margin-top: 10px; margin-bottom: 10px; } } @media only screen and (max-width: 1023px) { .product-count { margin-top: 0px; margin-bottom: 10px; } } .product-count span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 35px; height: 35px; background-color: #efefef; color: #222222; font-size: 16px; cursor: pointer; } .product-count input { width: 50px; background-color: #fff; border: 0; color: #333; font-size: 18px; font-weight: bold; color: #222222; font-weight: bold; line-height: 1.2; text-align: center; } .product-subtitle { font-size: 14px; font-weight: normal; color: #222222; line-height: 1.5; text-align: left; } @media only screen and (min-width: 768px) { .product-subtitle { max-height: 110px; overflow-y: auto; } } .product-info { font-size: 14px; font-weight: normal; color: #222222; line-height: 1.714; text-align: left; } .product-info span { font-weight: 600; } .product-info p { margin-bottom: 0; } .bonus { height: 280px; padding: 20px 20px 20px 60px; width: 100%; background-image: url("../img/pattern.png"), linear-gradient(-43deg, #00b58c 0%, #00b58c 100%); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .bonus .gift { right: 200px; bottom: 0px; max-width: 300px; position: absolute; -webkit-animation: mover 1.5s infinite alternate; animation: mover 1.5s infinite alternate; } .bonus .icon { position: absolute; } .bonus .icon-left { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 50%; -webkit-animation: mover2 1s infinite alternate; animation: mover2 1s infinite alternate; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .bonus .icon-right { top: 10%; right: 6%; -webkit-animation: mover3 1s infinite alternate; animation: mover3 1s infinite alternate; } .bonus-content { width: 50%; } .bonus-content h3 { font-size: 40px; font-weight: bold; color: white; line-height: 1.2; } .bonus-content h3 span { font-weight: normal; } @media only screen and (max-width: 1247px) { .bonus { height: 300px; } .bonus .gift { max-width: 250px; right: 150px; } } @media only screen and (max-width: 1023px) { .bonus { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 30px; padding-left: 30px; padding-right: 30px; } .bonus .gift { max-width: 200px; right: 90px; } .bonus-content { width: 100%; } } @media only screen and (max-width: 767px) { .bonus { height: 450px; padding: 15px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .bonus .gift { max-width: 200px; top: -30px; bottom: unset; } .bonus .icon-left { top: 30%; right: unset; left: 0; -webkit-transform: unset; transform: unset; } .bonus .icon-right { right: 0; } .bonus-content { -webkit-transform: translateY(-30px); transform: translateY(-30px); } .bonus-content h3 { font-size: 32px; } } .popular_category { padding: 20px 0; margin-left: -7.5px; margin-right: -7.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .popular_category { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .popular_category--item { width: calc(100% / 6.5); margin-right: 7.5px; margin-left: 7.5px; margin-bottom: 20px; padding: 25px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; background-color: white; -webkit-box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); } @media only screen and (max-width: 1247px) { .popular_category--item { width: 23%; } } @media only screen and (max-width: 1023px) { .popular_category--item { width: 31%; } } @media only screen and (max-width: 767px) { .popular_category--item { width: 45%; } } .popular_category--item__img { height: 75px; width: 100%; } .popular_category--item__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-filter: brightness(130%) grayscale(1); filter: brightness(130%) grayscale(1); } .popular_category--item__title { margin-top: 30px; font-size: 16px; font-weight: normal; color: #222222; line-height: 1.2; text-align: center; } .popular_category--item:hover .popular_category--item__img img { -webkit-filter: unset; filter: unset; } .news { border-radius: 5px; background-color: white; -webkit-box-shadow: 0px 3px 27px 3px rgba(5, 8, 9, 0.05); box-shadow: 0px 3px 27px 3px rgba(5, 8, 9, 0.05); overflow: hidden; } .news-img { display: block; border-radius: 5px; overflow: hidden; height: 150px; width: 100%; } @media only screen and (max-width: 767px) { .news-img { height: 220px; } } .news-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news-title { font-size: 14px; font-weight: 600; color: black; line-height: 1.313; -webkit-line-clamp: 2; height: 35px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .news-title a:hover { color: #ff621a; } .news-subtitle { font-size: 14px; font-weight: normal; color: #222222; line-height: 1.3; -webkit-line-clamp: 3; height: 55px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .news-date { font-size: 14px; font-weight: normal; color: rgba(34, 34, 34, 0.702); margin-bottom: 10px; } .news-link { font-size: 14px; font-weight: bold; color: #ff6319; line-height: 1.5; margin-top: 15px; display: inline-block; } .news-link i { font-size: 12px; } .news-link:hover { color: #ff621a; } .news-link:hover i { -webkit-transform: translateX(5px); transform: translateX(5px); } .news-content { padding: 15px; } .news:hover img { -webkit-transform: scale(1.09); transform: scale(1.09); } .news:hover .news-title a { text-decoration: underline; } .partner { padding: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100px; } .partner-logo { height: 75px; width: 100%; } .partner-logo img { height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } .sections { padding: 20px 0; margin-left: -7.5px; margin-right: -7.5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .sections { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .sections-item { -ms-flex-item-align: stretch; align-self: stretch; width: 18.7%; margin-right: 7.5px; margin-left: 7.5px; margin-bottom: 20px; padding: 25px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center; background-color: white; -webkit-box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); box-shadow: 0px 3px 15px 3px rgba(5, 8, 9, 0.05); } @media only screen and (max-width: 1247px) { .sections-item { width: 23%; } } @media only screen and (max-width: 1023px) { .sections-item { width: 31%; } } @media only screen and (max-width: 767px) { .sections-item { width: 45%; padding: 15px; } } .sections-item__img { height: 120px; width: 100%; } @media only screen and (max-width: 767px) { .sections-item__img { height: 75px; } } .sections-item__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .sections-item__title { margin-top: 30px; font-size: 16px; font-weight: 600; color: #222222; line-height: 1.2; text-align: center; } .sections-item:hover .sections-item__title { color: #ff621a; text-decoration: underline; } .banner { height: 250px; width: 100%; } .banner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 0px 0px; display: inline-block; cursor: pointer; -webkit-transition-property: opacity, -webkit-filter; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: linear; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 1; } .hamburger.is-active:hover { opacity: 1; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: #333; } .hamburger-box { width: 22px; height: 14px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 22px; height: 2px; background-color: #333; border-radius: 4px; position: absolute; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -6px; } .hamburger-inner::after { bottom: -6px; } /* * 3DX */ .hamburger--3dx .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dx .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dx-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dxy .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg); transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { -webkit-perspective: 44px; perspective: 44px; } .hamburger--3dxy-r .hamburger-inner { -webkit-transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { -webkit-transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; -webkit-transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { -webkit-transform: translate3d(-4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { -webkit-transform: translate3d(-4.4px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-4.4px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(4.4px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(4.4px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(4.4px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(-4.4px, -5.5px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-4.4px, -5.5px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(-4.4px, 5.5px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-4.4px, 5.5px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: translate3d(4.4px, -5.5px, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(4.4px, -5.5px, 0) rotate(45deg) scale(0.7, 1); -webkit-transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: translate3d(4.4px, 5.5px, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(4.4px, 5.5px, 0) rotate(-45deg) scale(0.7, 1); -webkit-transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22), -webkit-transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { -webkit-transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { -webkit-transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { -webkit-transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { -webkit-transition-property: none; transition-property: none; } .hamburger--boring.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after { top: -12px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0.13s; transition-delay: 0.13s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -12px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { -webkit-transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -6px, 0) rotate(45deg); transform: translate3d(0, -6px, 0) rotate(45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 1px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 6px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 12px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { -webkit-transform: translate3d(0, 6px, 0) rotate(135deg); transform: translate3d(0, 6px, 0) rotate(135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -12px, 0) rotate(-270deg); transform: translate3d(0, -12px, 0) rotate(-270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 1px; -webkit-transition-duration: 0.275s; transition-duration: 0.275s; -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 6px; -webkit-transition: opacity 0.125s 0.275s ease; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 12px; -webkit-transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 6px, 0) rotate(-135deg); transform: translate3d(0, 6px, 0) rotate(-135deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { -webkit-transition-delay: 0s; transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -12px, 0) rotate(270deg); transform: translate3d(0, -12px, 0) rotate(270deg); -webkit-transition-delay: 0.075s; transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic .hamburger-inner::after { top: 6px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -44px; top: -44px; -webkit-transform: translate3d(44px, 44px, 0) rotate(45deg); transform: translate3d(44px, 44px, 0) rotate(45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -44px; top: -44px; -webkit-transform: translate3d(-44px, 44px, 0) rotate(-45deg); transform: translate3d(-44px, 44px, 0) rotate(-45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { -webkit-transition: background-color 0.125s 0.175s ease-in; transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; -webkit-transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r .hamburger-inner::after { top: 6px; right: 0; -webkit-transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in, -webkit-transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335); } .hamburger--emphatic-r.is-active .hamburger-inner { -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -44px; top: 44px; -webkit-transform: translate3d(44px, -44px, 0) rotate(-45deg); transform: translate3d(44px, -44px, 0) rotate(-45deg); -webkit-transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -44px; top: 44px; -webkit-transform: translate3d(-44px, -44px, 0) rotate(45deg); transform: translate3d(-44px, -44px, 0) rotate(45deg); -webkit-transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { -webkit-transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; -webkit-transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 1px; } .hamburger--slider .hamburger-inner::before { top: 6px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 12px; } .hamburger--slider.is-active .hamburger-inner { -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: rotate(-45deg) translate3d(-3.14286px, -4px, 0); transform: rotate(-45deg) translate3d(-3.14286px, -4px, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -12px, 0) rotate(-90deg); transform: translate3d(0, -12px, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 1px; } .hamburger--slider-r .hamburger-inner::before { top: 6px; -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 12px; } .hamburger--slider-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg); transform: translate3d(0, 6px, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { -webkit-transform: rotate(45deg) translate3d(3.14286px, -4px, 0); transform: rotate(45deg) translate3d(3.14286px, -4px, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -12px, 0) rotate(90deg); transform: translate3d(0, -12px, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { -webkit-transform: rotate(225deg); transform: rotate(225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { -webkit-transition-duration: 0.22s; transition-duration: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { -webkit-transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 1px; -webkit-transition: background-color 0s 0.13s linear; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 6px; -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 12px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { -webkit-transition-delay: 0.22s; transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 6px, 0) rotate(45deg); transform: translate3d(0, 6px, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 6px, 0) rotate(-45deg); transform: translate3d(0, 6px, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; -webkit-transition-duration: 0.13s; transition-duration: 0.13s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -12px; -webkit-transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { -webkit-transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg); -webkit-transition-delay: 0.22s; transition-delay: 0.22s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; -webkit-transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { -webkit-transform: rotate(90deg); transform: rotate(90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { -webkit-transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear, -webkit-transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::before { -webkit-transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: transparent !important; -webkit-transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear, -webkit-transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { -webkit-transition-duration: 0.075s; transition-duration: 0.075s; -webkit-transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { -webkit-transition: top 0.075s 0.12s ease, opacity 0.075s ease; transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { -webkit-transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0.12s; transition-delay: 0.12s; -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; -webkit-transition: top 0.075s ease, opacity 0.075s 0.12s ease; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex.is-active .hamburger-inner { -webkit-transform: rotate(765deg); transform: rotate(765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { -webkit-transition-property: top, opacity; transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, -webkit-transform; transition-property: bottom, transform; transition-property: bottom, transform, -webkit-transform; } .hamburger--vortex-r.is-active .hamburger-inner { -webkit-transform: rotate(-765deg); transform: rotate(-765deg); -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { -webkit-transition-delay: 0s; transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .swiper-header__item { width: 100%; } @media only screen and (min-width: 1248px) { .swiper-header__item { height: 453px; } } @media only screen and (min-width: 1440px) { .swiper-header__item { height: 553px; } } @media only screen and (min-width: 2500px) { .swiper-header__item { height: 753px; } } @media only screen and (max-width: 1247px) { .swiper-header__item { height: 353px; } } @media only screen and (max-width: 1023px) { .swiper-header__item { height: 303px; } } @media only screen and (min-width: 768px) { .swiper-header .swiper-pagination-bullets { bottom: 20px; } } .swiper-header .swiper-pagination-bullets .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 50%; background-color: white; opacity: 0.502; } .swiper-header .swiper-pagination-bullets .swiper-pagination-bullet-active { width: 20px; border-radius: 20px; } .swiper-header .swiper-button-next, .swiper-header .swiper-container-rtl .swiper-button-prev { right: 50px; } @media only screen and (max-width: 767px) { .swiper-header .swiper-button-next, .swiper-header .swiper-container-rtl .swiper-button-prev { display: none; } } .swiper-header .swiper-button-prev, .swiper-header .swiper-container-rtl .swiper-button-next { left: 50px; } @media only screen and (max-width: 767px) { .swiper-header .swiper-button-prev, .swiper-header .swiper-container-rtl .swiper-button-next { display: none; } } .swiper-header .swiper-button-next:after, .swiper-header .swiper-container-rtl .swiper-button-prev:after { content: "\f061"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 18px; color: white; opacity: 0.7; } .swiper-header .swiper-button-prev:after, .swiper-header .swiper-container-rtl .swiper-button-next:after { content: "\f060"; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 18px; color: white; opacity: 0.7; } .swiper-header .swiper-button-next:before, .swiper-header .swiper-button-prev::before { border-color: white; opacity: 0.7; border-style: solid; border-width: 2px; border-radius: 50%; width: 44px; height: 44px; position: absolute; content: ""; } .swiper-product { padding: 75px 0 50px; margin-top: -50px; padding-left: 10px; padding-right: 10px; } @media only screen and (max-width: 767px) { .swiper-product { margin-left: -15px; margin-right: -15px; padding-bottom: 30px; } .swiper-product .swiper-wrapper { z-index: 22; } } .swiper-banners .swiper-button-next, .swiper-banners .swiper-button-prev, .swiper-product .swiper-button-next, .swiper-product .swiper-button-prev { z-index: 2; } @media only screen and (min-width: 768px) { .swiper-banners .swiper-button-next, .swiper-banners .swiper-button-prev, .swiper-product .swiper-button-next, .swiper-product .swiper-button-prev { top: 25px; } } @media only screen and (max-width: 767px) { .swiper-banners .swiper-button-next, .swiper-banners .swiper-button-prev, .swiper-product .swiper-button-next, .swiper-product .swiper-button-prev { display: none; } } .swiper-banners .swiper-button-next::after, .swiper-banners .swiper-button-prev::after, .swiper-product .swiper-button-next::after, .swiper-product .swiper-button-prev::after { width: 36px; height: 36px; border-radius: 50%; content: ""; position: absolute; z-index: -1; background-color: #f2f4f6; } .swiper-banners .swiper-button-next::before, .swiper-banners .swiper-button-prev::before, .swiper-product .swiper-button-next::before, .swiper-product .swiper-button-prev::before { font-family: "Font Awesome 5 Pro"; font-weight: 400; color: #999; font-size: 14px; position: absolute; z-index: 0; } .swiper-banners .swiper-button-next:hover::after, .swiper-banners .swiper-button-prev:hover::after, .swiper-product .swiper-button-next:hover::after, .swiper-product .swiper-button-prev:hover::after { background-color: #ff621a; } .swiper-banners .swiper-button-next:hover::before, .swiper-banners .swiper-button-prev:hover::before, .swiper-product .swiper-button-next:hover::before, .swiper-product .swiper-button-prev:hover::before { color: white; } @media only screen and (min-width: 768px) { .swiper-banners .swiper-button-prev, .swiper-product .swiper-button-prev { right: 145px; left: unset; } } .swiper-banners .swiper-button-prev::before, .swiper-product .swiper-button-prev::before { content: "\f053"; } .swiper-banners .swiper-button-next::before, .swiper-product .swiper-button-next::before { content: "\f054"; } .swiper-banners .swiper-pagination, .swiper-product .swiper-pagination { width: 100%; } @media only screen and (min-width: 768px) { .swiper-banners .swiper-pagination, .swiper-product .swiper-pagination { height: 50px; top: 20px; right: 50px; left: unset; } } @media only screen and (max-width: 767px) { .swiper-banners .swiper-pagination, .swiper-product .swiper-pagination { bottom: 0; } } @media only screen and (min-width: 768px) { .swiper-banners .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-product .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: unset !important; -webkit-transform: unset !important; transform: unset !important; } } .swiper-banners .swiper-pagination-bullet, .swiper-product .swiper-pagination-bullet { background: #909090; opacity: 1; } .swiper-banners .swiper-pagination-bullet-active-main, .swiper-product .swiper-pagination-bullet-active-main { background: #ff621a; } .swiper-banners { padding: 75px 0 0px; margin-top: -50px; } @media only screen and (max-width: 767px) { .swiper-banners { padding-bottom: 30px; } } @media only screen and (max-width: 767px) { .swiper-partners .swiper-button-next, .swiper-partners .swiper-button-prev { top: 70%; } } .swiper-news { margin-bottom: 20px; } .slider-small .sldier-slide { height: 100%; } .slider-small .slider__img { height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; background-color: #fff; padding: 5px; border: 1px solid transparent; } .slider-small .slider__img img { height: 60px; width: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .slider-small .slick-current { border: 1px solid #d3d3d3; border-radius: 4px; } @media only screen and (max-width: 767px) { .slider-small { display: none !important; } } .slider-small .slick-prev, .slider-small .slick-next { width: 40px; height: 40px; border-radius: 50%; z-index: 45; } .slider-small .slick-prev:before, .slider-small .slick-next:before { color: #5b5b5b; font-size: 24px; font-family: "Font Awesome 5 Pro"; font-weight: 300; } .slider-small .slick-prev:before { content: "\f137"; } .slider-small .slick-next:before { content: "\f138"; } .slider-big { margin: 5px; margin-bottom: 10px; } .slider-big .slider__content { height: 400px; position: relative; padding: 30px; padding-top: 32px; min-height: 1px; } .slider-big .slick-list { border-radius: 5px; background-color: #fff; -webkit-box-shadow: 0 3px 15px 3px rgba(5, 8, 9, 0.1); box-shadow: 0 3px 15px 3px rgba(5, 8, 9, 0.1); } .slider-big .slider__img { height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slider-big .slider__img img { -webkit-box-shadow: unset; box-shadow: unset; max-width: 100%; max-height: 100%; width: unset !important; } .slider-big .slick-prev, .slider-big .slick-next { width: 40px; height: 40px; border-radius: 50%; z-index: 45; } .slider-big .slick-prev { left: -15px; } .slider-big .slick-next { right: -15px; } .slider-big .slick-prev:before, .slider-big .slick-next:before { color: #5b5b5b; font-size: 36px; font-family: "Font Awesome 5 Pro"; font-weight: 300; } .slider-big .slick-prev:before { content: "\f137"; } .slider-big .slick-next:before { content: "\f138"; } @media only screen and (max-width: 1023px) { .xzoom-source { display: none !important; } } .xzoom-preview { z-index: 9999; } .swiper-category { margin-top: 0; padding-top: 10px; } .swiper-category .category-item { width: 100%; margin: 0; } @media only screen and (max-width: 767px) { .swiper-category .category-item__title { padding-left: 5px; padding-right: 5px; } } @media only screen and (min-width: 768px) { .swiper-category { padding-left: 0; padding-right: 0; } } .swiper-specials { padding-left: 0; padding-right: 0; margin-bottom: 0; margin-top: 50px; } @media only screen and (max-width: 767px) { .swiper-specials { margin-left: 0; margin-right: 0; margin-bottom: 0px; padding-top: 0px; margin-top: 0; } } .swiper-specials .specials .special { width: 100%; } @media only screen and (max-width: 767px) { .swiper-specials .specials .special { margin-bottom: 0; } } @media only screen and (min-width: 1248px) { html, .product-subtitle { /* width */ /* Track */ /* Handle */ /* Handle on hover */ } html::-webkit-scrollbar, .product-subtitle::-webkit-scrollbar { width: 8px; height: 4px; } html::-webkit-scrollbar-track, .product-subtitle::-webkit-scrollbar-track { background-color: rgba(181, 189, 204, 0.329); } html::-webkit-scrollbar-thumb, .product-subtitle::-webkit-scrollbar-thumb { background: #2c2c2c; background-image: linear-gradient(137deg, #f8583d 0, #f8445a 100%); } html::-webkit-scrollbar-thumb:hover, .product-subtitle::-webkit-scrollbar-thumb:hover { background: #2c2c2c; background-image: linear-gradient(137deg, #f8583d 0, #f8445a 100%); } } .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: fixed; top: 0; left: 0; width: 100%; z-index: 99999999; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); -webkit-transition: -webkit-transform 0.5s ease-out; transition: -webkit-transform 0.5s ease-out; transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; } .pace.pace-active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .pace .pace-progress { display: block; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 2px; background: #ff621a; pointer-events: none; }