/* carousel slider ------------------------------------------------------------------- */ .j-carousel { display: none; width: 100%; text-align: center; position: relative; -ms-touch-action: pan-y; } .j-carousel__title { width: 100%; margin-top: 35px; position: relative; } .j-carousel__title:before { z-index: 1; display: block; padding: 10px 25px 0; font-size: 22px; position: relative; text-align: center; margin-bottom: 15px; text-transform: uppercase; } .j-carousel__title:after { left: 0; top: 35px; content: ''; height: 1px; width: -webkit-calc(100% - 10px); width: calc(100% - 10px); margin-left: 5px; display: block; position: absolute; background: #555555; } .j-carousel__title--new:before { content: '???????'; } .j-carousel__title--hit:before { content: '???? ??????'; } .j-carousel__title--sale:before { content: '?????'; } .j-carousel__title--related:before { content: '??????? ??????'; } .j-carousel__button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; top: 0; bottom: 0; margin: auto; position: absolute; width: 50px; height: 50px; font-size: 22px; cursor: pointer; color: #ffffff; background: var(--main-color); border-radius: 3px; } @media (min-width: 1025px) { .j-carousel__button { opacity: 0; visibility: hidden; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .j-carousel__button__left { left: 25px; } .j-carousel__button__right { right: 25px; } } @media (max-width: 1024px) { .j-carousel__button__left { left: 5px; } .j-carousel__button__right { right: 5px; } } @media (max-width: 800px) { .j-carousel__button { width: 40px; height: 40px; } } .j-carousel__button:hover { background: var(--secondary-color); } @media (min-width: 1025px) { .j-carousel:hover .j-carousel__button { opacity: 1; visibility: visible; } .j-carousel:hover .j-carousel__button__right { right: 5px; } .j-carousel:hover .j-carousel__button__left { left: 5px; } } .j-carousel .owl-next, .j-carousel .owl-prev { top: 0; height: 100%; position: absolute; } .j-carousel .owl-next { right: 0; } .j-carousel .owl-prev { left: 0; } .j-carousel .owl-item { float: left; } .j-carousel .owl-item > div { width: 100%; } .j-carousel .owl-controls { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .j-carousel .owl-wrapper { display: none; position: relative; transform: translate3d(0, 0, 0); } .j-carousel .owl-wrapper:before, .j-carousel .owl-wrapper:after { content: ' '; display: table; clear: both; } .j-carousel .owl-wrapper-outer { width: 100%; overflow: hidden; position: relative; } .j-carousel .owl-pagination { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; bottom: 10px; position: absolute; } .j-carousel .owl-pagination > div { padding: 7px; margin: 2px; cursor: pointer; background: #FFF; border: 1px solid var(--main-color); border-radius: 3px; } .j-carousel .owl-pagination > div:active { -ms-transform: translatey(3px); transform: translatey(3px); } .j-carousel .owl-pagination > div.active, .j-carousel .owl-pagination > div:hover { background: var(--secondary-color); } @media (max-width: 700px) { .j-carousel .owl-pagination { display: none; } } .owl-origin { -webkit-perspective: 1200px; perspective: 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ /*empty*/ @-webkit-keyframes empty { 0% { opacity: 1; } } @keyframes empty { 0% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; transform: scale(0.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(0.8); } } @-webkit-keyframes goDown { from { transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } /* influence on carousel ------------------------------------------------------------------- */ .j-carousel__slideset .owl-item { padding: 0 5px; } .j-carousel__slideset .owl-wrapper-outer { padding: 10px 0; }